Cách tích hợp CKEditor trong GWT

Question

Tôi đang tìm cách tích hợp CKEditor vào dự án GWT của mình.

Tôi đã thực hiện một số việc vặt và tìm thấy dự án này: https://code.google.com/p/gwt-ckeditor/ đã bị hủy trong nhiều năm. Vì vậy, CKEditor là hoàn toàn lỗi thời.

Tôi cũng đã thấy CKEditor được tải bên ngoài GWT vào một vùng văn bản được tạo trong GWT. Tôi không chắc đó có phải là một cách hay hay không.

Nếu ai đó có thể cho tôi một số lời khuyên, nó sẽ được đánh giá cao. Cảm ơn trước

Answer 1

Bạn có thể sử dụng JSNI để kích hoạt CKEditor. Để tải tệp javascript, bạn tải tệp này vào trang html hoặc bằng cách sử dụng ScriptInjector và StyleInjector.

Trong GWT, tạo ra một componant:

package com.google.editor; 

import com.google.gwt.core.client.JavaScriptObject; 
import com.google.gwt.user.client.TakesValue; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.TextArea; 

public class CKeditor extends Composite implements TakesValue<String> { 
    TextArea text = new TextArea(); 
    protected JavaScriptObject editor; 

    public CKeditor() { 
    initWidget(text); 
    } 

    @Override 
    protected void onAttach() { 
    super.onAttach(); 
    initCKEditor(text.getElement().getId()); 
    } 

    private native void initCKEditor(String id) /*-{ 
    this.@com.google.editor.CKeditor::editor = CKEDITOR.replace(id); 
    }-*/; 

    @Override 
    public native void setValue(String value) /*-{ 
    this.@com.google.editor.CKeditor::editor.setData(value); 
    }-*/; 

    @Override 
    public native String getValue() /*-{ 
    this.@com.google.editor.CKeditor::editor.setData(value); 
    }-*/; 
} 

Đó là một mẫu, thêm tất cả các cấu hình bạn muốn thiết lập trong ckeditor

Answer 2

Tôi cũng muốn đề nghị ScriptInjector vì nó cung cấp cho bạn một callback rằng kịch bản cuối cùng đã được tải và mọi thứ đều ổn.

Sau đó bạn phải sử dụng $ wnd để giải quyết ckeditor đúng cách và thay thế textarea trong mã nguồn gốc:

private native void initCKEditor(String id) /*-{ 
    this.@com.google.editor.CKeditor::editor = $wnd.CKEDITOR.replace(id); 
    }-*/; 

Answer 3

câu trả lời Patrice là rất hữu ích, tuy nhiên nó ban đầu không làm việc cho tôi vì TextArea text = TextArea mới(); đã tạo một TextArea không có trường id. Để giải quyết vấn đề này, tôi chỉ cần thêm trường id theo cách thủ công với:

text.getElement().setId("make_up_an_id_name_here"); 

Đồng thời đảm bảo bạn đặt thư mục ckeditor vào thư mục chiến tranh của bạn.

Nếu bạn chọn để liên kết với nó trong tập tin project_name.html của bạn, thêm dòng này trên dòng chèn chính ... nocache.js kịch bản của bạn:.

<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 

Answer 4

text.getElement() setId (DOM.createUniqueId());