GWT プロジェクトに CKEditor を統合する方法を探しています。
私はいくつかのグーグルを作成し、このプロジェクトを見つけました: https://code.google.com/p/gwt-ckeditor/ これは何年も放棄されていました。したがって、CKEditor は完全に時代遅れです。
また、CKEditor が GWT の外部で、GWT で作成されたテキストエリアに読み込まれていることも確認しました。それが良い方法かどうかはわかりません。
誰かが私にアドバイスを与えることができれば、それは非常にありがたいです. 事前に感謝
JSNI を使用して CKEditor をアクティブ化できます。JavaScript ファイルをロードするには、これを html ページにロードするか、ScriptInjectorおよびStyleInjectorを使用します。
GWT で、コンポーネントを作成します。
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);
}-*/;
}
これはサンプルです。CKEditor で設定したいすべての構成を追加します
ScriptInjector もお勧めします。これは、スクリプトが最終的に読み込まれ、すべてが正常であることを示すコールバックを提供するからです。
その後、$wnd を使用して CKEDITOR を適切にアドレス指定し、ネイティブ コードのテキストエリアを置き換える必要があります。
private native void initCKEditor(String id) /*-{
this.@com.google.editor.CKeditor::editor = $wnd.CKEDITOR.replace( id );
}-*/;
パトリスの答えは非常に役に立ちましたが、TextArea text = new TextArea(); であるため、最初はうまくいきませんでした。id フィールドのない TextArea を作成していました。これを解決するために、次のように id フィールドを手動で追加しました。
text.getElement().setId("make_up_an_id_name_here");
また、必ず ckeditor フォルダーを war ディレクトリに配置してください。
project_name.html ファイルでそれにリンクすることを選択した場合は、メインの ...nocache.js スクリプトを挿入する行の上に次の行を追加します。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
text.getElement().setId(DOM.createUniqueId());