如何在GWT中集成CKEditor

我正在寻找一种在我的GWT项目中集成CKEditor的方法

我通过谷歌搜索找到了这个项目： 已经被遗弃多年了。因此，CKEditor完全过时了

我还看到在GWT外部将CKEditor加载到GWT中创建的文本区域中。我不确定这是不是个好办法

如果有人能给我一些建议，我将不胜感激。

---

提前感谢

您可以使用JSNI激活CKEditor。 要加载javascript文件，可以在html页面中加载，也可以使用和

在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);
  }-*/;
}

package.com.google.editor；
导入com.google.gwt.core.client.JavaScriptObject；
导入com.google.gwt.user.client.TakesValue；
导入com.google.gwt.user.client.ui.Composite；
导入com.google.gwt.user.client.ui.TextArea；
公共类CKeditor扩展复合实现TakesValue{
TextArea text=新建TextArea（）；
受保护的JavaScriptObject编辑器；
公共编辑器（）{
initWidget（文本）；
}
@凌驾
受保护的空位{
super.onAttach（）；
initCKEditor（text.getElement（）.getId（））；
}
私有本机void initCKEditor（字符串id）/*-{
这是@com.google.editor.CKeditor:：editor=CKeditor.replace（id）；
}-*/;
@凌驾
公共本机void setValue（字符串值）/*-{
这是@com.google.editor.CKeditor:：editor.setData（值）；
}-*/;
@凌驾
公共本机字符串getValue（）/*-{
这是@com.google.editor.CKeditor:：editor.setData（值）；
}-*/;
}

---

这是一个示例，添加您想在CKEditor中设置的所有配置，我还建议使用ScriptInjector，因为它提供了一个回调，脚本已最终加载，一切正常

此后，您必须使用$wnd正确寻址CKEDITOR并替换本机代码中的textarea：

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

---

Patrice的回答很有帮助，但最初对我不起作用，因为TextArea text=newtextarea（）；正在创建没有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（））

很好！本机getValue（）方法应调用editor.getValue（）；我还需要使用下面@ArcTanH建议的$wnd.CKEDITOR。