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

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

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

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>

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

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

标签

gwt

ckeditor