如何在GWT中集成CKEditor

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在GWT中集成CKEditor相关的知识,希望对你有一定的参考价值。

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

我做了一些谷歌搜索,发现了这个项目:https://code.google.com/p/gwt-ckeditor/已被遗弃多年。所以CKEditor完全过时了。

我还看到CKEditor在GWT之外加载到GWT中创建的textarea中。我不确定这是不是一个好方法。

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

答案

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

在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并用本机代码替换textarea:

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

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>
另一答案

。text.getElement()SETID(DOM.createUniqueId());

以上是关于如何在GWT中集成CKEditor的主要内容,如果未能解决你的问题,请参考以下文章

使用Flask-CKEditor在Flask项目中集成富文本编辑器

如何实现ckeditor文件上传

django中集成富文本编辑器

Flask 项目集成富文本编辑器 CKeditor

Laravel有官方CKEditor吗?

在intelliJ项目中集成Kotlinx协同程序