How to integrate CKEditor in GWT

问题

I'm looking for a way to integrate CKEditor in my GWT project.

I've made some googling and found this project: https://code.google.com/p/gwt-ckeditor/ which has been abandoned for years. So the CKEditor is completely outdated.

I've also seen the CKEditor being loaded outside of GWT into a textarea created in GWT. I'm not sure if that's a good way.

If someone could give me some advises, it would be highly appreciated. Thanks by advance

回答1:

You can use JSNI for activate the CKEditor. For loadning the javascript file, either you load this in the html page, or by using ScriptInjector and StyleInjector.

In GWT, create a 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);
  }-*/;
}

It's a sample, add all config you want to set in CKEditor

回答2:

I'd also suggest ScriptInjector as it gives you a callback that the script has finally loaded and everything's fine.

Thereafter you have to use $wnd to address CKEDITOR properly and replace the textarea in native code:

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

回答3:

Patrice's answer was very helpful, however it initially did not work for me because TextArea text = new TextArea(); was creating a TextArea with no id field. To solve this I just manually added an id field with:

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

Also make sure you put the ckeditor folder in your war directory.

If you choose to link to it in your project_name.html file, add this line above the line that inserts your main ...nocache.js script:

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

回答4:

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

来源：https://stackoverflow.com/questions/18958728/how-to-integrate-ckeditor-in-gwt

标签

gwt

ckeditor