In the following example, I will create an html file that loads ckeditor javascript before the gwt application javascript is loaded:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript"
src="js/ckeditor/ckeditor.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript"
src="circulares2/circulares2.nocache.js"></script>
<div id="uniqueID"></div>
</body>
</html>
Then the following is the code for the ckeditor gwt widget, with support for gwt editor framework:
package com.beeblos.portlet.circulares2.gwt.client.util;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.TextAreaElement;
import com.google.gwt.editor.client.LeafValueEditor;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextArea;
/**
* ckeditor.js must be already loaded, put it in .
* @author sg
*
*/
public class CKEditor extends SimplePanel implements LeafValueEditor{
String _id=null;
private String text;
private TextAreaElement ta;
static Integer idCounter=0;
public CKEditor(String text) {
idCounter++;
_id="ckEditorWidget_"+idCounter;
this.text=text;
initGui();
}
private void initGui() {
ta = Document.get().createTextAreaElement();
ta.getStyle().setWidth(100, Unit.PCT);
ta.getStyle().setHeight(100, Unit.PCT);
ta.setId(_id);
getElement().appendChild(ta);
}
@Override
public void setValue(String value) {
this.text=value;
this._setText(_id, value);
}
@Override
public String getValue() {
return _getText(_id)+"";
}
protected native void _setText(String id, String value)/*-{
if($wnd.CKEDITOR && $wnd.CKEDITOR.instances && $wnd.CKEDITOR.instances[id])
$wnd.CKEDITOR.instances[id].setData(value);
}-*/;
protected native Object _getText(String id) /*-{
if(!$wnd.CKEDITOR || !$wnd.CKEDITOR.instances || !$wnd.CKEDITOR.instances[id])
return "";
else
return $wnd.CKEDITOR.instances[id].getData();
}-*/;
@Override
protected void onLoad() {
super.onLoad();
_loadCKEditor(_id, getCkEditorConfig());
ta.getStyle().setDisplay(Display.NONE);
if(Util.notNull(text))
this._setText(_id, text);
}
protected native Object getCkEditorConfig() /*-{
return {
toolbar : 'Basic',
uiColor : '#9AB8F3'
};
}-*/;
private static native void _loadCKEditor(String id, Object config) /*-{
$wnd.CKEDITOR.replace(id, config);
}-*/;
}
Note how I use the gwt widget's onLoad for loading native ckeditor inside the widget, because I need gwt to be fully loaded before adding native ckeditor. Also, note that you can extend this class for indicating a custom ckeditor configuration, for example:
public class CkEditorNormal extends CKEditor {
public CkEditorNormal(String text) {
super(text);
}
protected native Object getCkEditorConfig() /*-{
return {};
}-*/;
}
Hope this helps somebody to develop / integrate its own javascript toolkits as gwt widgets or in gwt projects.
