There's an article explaining how to do it in SmartClient (Javascript). I'll try to explain how to do it in SmartGwt (Java).
You have to download CKEditor and extract "ckeditor" folder into "project/client/public", create it if it doesn't exist. This is to get CKEditor source copied into war module folder when compiled.
Add the following to your module xml file
Finally, edit project/client/public/ckeditor/config.js file to avoid z-index problems with CKEditor
That's all you have to setup, now you can use the following classes as shown in the EntryPoint example below
CKEditor.java
I don't know why draw method wasn't being called. So, instead of override, I subscribed to draw event.
CKEditorItem.java
This class is to use CKEditor inside a form though I haven't tested it with smartgwt datasources. I overrode sizing methods to adjust canvas size when item's size changes -this allowed me to put CKEditor inside a Layout-
I hope this helps someone like the previous article helped me. Cheers!
You have to download CKEditor and extract "ckeditor" folder into "project/client/public", create it if it doesn't exist. This is to get CKEditor source copied into war module folder when compiled.
Add the following to your module xml file
Code:
<script src="ckeditor/ckeditor.js"></script>
Code:
config.baseFloatZIndex = 1000000;
Code:
public class CKEditorEntryPoint implements EntryPoint {
private CKEditorItem txtEditor;
private final static String DEFAULT_HTML_CONTENT="<h1>\n" +
" HTML Ipsum Presents</h1>\n" +
"<p>\n" +
" <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\"#\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>\n" +
"<h2>\n" +
" Header Level 2</h2>\n" +
"<ol>\n" +
" <li>\n" +
" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n" +
" <li>\n" +
" Aliquam tincidunt mauris eu risus.</li>\n" +
"</ol>\n" +
"<blockquote>\n" +
" <p>\n" +
" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>\n" +
"</blockquote>\n" +
"<h3>\n" +
" Header Level 3</h3>\n" +
"<ul>\n" +
" <li>\n" +
" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n" +
" <li>\n" +
" Aliquam tincidunt mauris eu risus.</li>\n" +
"</ul>\n" +
"<pre>\n" +
"<code>\n" +
"#header h1 a { \n" +
" display: block; \n" +
" width: 300px; \n" +
" height: 80px; \n" +
"}\n" +
"</code></pre>";
@Override
public void onModuleLoad() {
try {
VLayout main = new VLayout();
main.setSize("100%", "100%");
DynamicForm frmEditor = new DynamicForm();
frmEditor.setBorder("2px solid blue");
frmEditor.setNumCols(1);
txtEditor = new CKEditorItem("txtEditor");
txtEditor.setValue(DEFAULT_HTML_CONTENT);
txtEditor.setShowTitle(false);
txtEditor.setWidth("50%");
txtEditor.setHeight("100%");
frmEditor.setItems(txtEditor);
IButton btnPrintHTML = new IButton("Print HTML");
btnPrintHTML.addClickHandler(btnPrintHTML_onClick);
frmEditor.setSize("50%", "80%");
main.setMembers(frmEditor, btnPrintHTML);
main.draw();
} catch (Exception exc) {
SC.warn("An exception has occured:<br>" + exc.toString());
}
}
private ClickHandler btnPrintHTML_onClick = new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
if (txtEditor.getValue() != null)
SC.say("CKEditor value:<br>"
+ StringUtil.asHTML(txtEditor.getValue().toString()));
else {
SC.say("type something in the editor!");
}
}
};
}
I don't know why draw method wasn't being called. So, instead of override, I subscribed to draw event.
Code:
public class CKEditor extends Canvas{
{
setOverflow(Overflow.VISIBLE);
setCanDragResize(false);
setRedrawOnResize(false);
setZIndex(0);
}
private boolean loaded=false;
public CKEditor(String id){
super(id);
addDrawHandler(new DrawHandler() {
@Override
public void onDraw(DrawEvent event) {
loadCKEditor();
}
});
}
@Override
public String getInnerHTML() {
if(this.getContents() != null){
return "<textarea style='width=100%;height=100%' id=" + this.getID() + "_ta>"+
getContents()+"</textarea>";
}
return "<textarea style='width=100%;height=100%' id=" + this.getID() + "_ta></textarea>";
}
// @Override
// public void draw() {
// super.draw();
// loadCKEditor();
// }
protected native void loadCKEditor()/*-{
if(!this.@tsj.ckeditor.client.CKEditor::loaded){
var ckEditorId=this.@tsj.ckeditor.client.CKEditor::getID()() + "_ta";
$wnd.CKEDITOR.replace(ckEditorId);
this.@tsj.ckeditor.client.CKEditor::loaded=true;
}
}-*/;
public boolean isLoaded() {
return loaded;
}
}
This class is to use CKEditor inside a form though I haven't tested it with smartgwt datasources. I overrode sizing methods to adjust canvas size when item's size changes -this allowed me to put CKEditor inside a Layout-
Code:
public class CKEditorItem extends CanvasItem {
private CKEditor ckeCanvas;
public CKEditorItem(String name) {
super(name);
ckeCanvas = new CKEditor(name);
this.setCanvas(ckeCanvas);
}
@Override
public void setWidth(String width) {
super.setWidth(width);
ckeCanvas.setWidth(width);
}
@Override
public void setWidth(int width) {
super.setWidth(width);
ckeCanvas.setWidth(width);
}
@Override
public void setHeight(String height) {
super.setHeight(height);
ckeCanvas.setHeight(height);
}
@Override
public void setHeight(int height) {
super.setHeight(height);
ckeCanvas.setHeight(height);
}
@Override
public Object getValue() {
return getCKEditorValue(ckeCanvas.getID()+"_ta");
}
private native String getCKEditorValue(String ckEditorId)/*-{
if($wnd.CKEDITOR.instances[ckEditorId]){
return $wnd.CKEDITOR.instances[ckEditorId].getData();
}
return null;
}-*/;
@Override
public void setValue(String value) {
super.setValue(value);
if(ckeCanvas.isLoaded())
setCKEditorValue(ckeCanvas.getID()+"_ta", value);
else
ckeCanvas.setContents(value);
}
private native void setCKEditorValue(String ckEditorId,String value)/*-{
if($wnd.CKEDITOR.instances[ckEditorId]){
$wnd.CKEDITOR.instances[ckEditorId].setData(value);
}
}-*/;
}
Comment