如何将CKEditor集成到GWT中

Question

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

我进行了一些搜索，并找到了这个项目：https://code.google.com/p/gwt-ckeditor/，该项目已经被放弃多年了。因此，CKEditor已经过时了。

我也看到过CKEditor在GWT之外加载到在GWT中创建的文本区域中。我不确定这是否是一个好方法。

如果有人能给我一些建议，我将非常感激。 提前感谢。

- gryter

---

http://angulartutorial.blogspot.in/2014/03/integration-of-ck-editor-to-ui.html - Prashobh

Answer 1

你可以使用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) /*-{
    [e-mail]::editor =  CKEDITOR.replace( id );
  }-*/;

  @Override
  public native void setValue(String value) /*-{
    [e-mail]::editor.setData(value);
  }-*/;

  @Override
  public native String getValue() /*-{
    [e-mail]::editor.setData(value);
  }-*/;
}

这是一个示例，在CKEditor中添加您想要设置的所有配置。

- Patrice De Saint Steban

---

不错！你的本地getValue()方法应该调用editor.getValue(); 此外，我还需要使用$wnd.CKEDITOR，就像@ArcTanH下面建议的那样。 - Jamie

Answer 2

我建议使用ScriptInjector，因为它会提供一个回调函数来确认脚本已经加载完成并且一切正常。之后，您需要使用$wnd来适当地调用CKEDITOR并在本地代码中替换文本区域。

  private native void initCKEditor(String id) /*-{
    [e-mail]::editor =  $wnd.CKEDITOR.replace( id );
  }-*/;

- ArcTanH

Answer 3

Patrice的回答非常有帮助，但是最初对我没有起作用，因为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>

- Jesse Adamson

Answer 4

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

- Virus