PHP Code:
<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "none",
theme : "advanced",
plugins : "safari,layer,table,advhr,advimage,advlink,iespell,inlinepopups,media,searchreplace,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "iespell,media,advhr,separator,separator,ltr,rtl,separator",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});
</script>
PHP Code:
import com.extjs.gxt.ui.client.widget.form.Field;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.HTMLPanel;
/**
* @author webflash
*/
public class TinyMCE extends Field<String> {
private String id;
@Override
protected void onRender(Element target, int index) {
if (el() == null) {
setElement(DOM.createTextArea());
el().insertInto(target, index);
getElement().setAttribute("id", id = HTMLPanel.createUniqueId());
}
initTinyMCE(id);
super.onRender(target, index);
}
@Override
public String getValue() {
if(rendered){
super.setValue(getTextData(id));
}
return super.getValue();
}
@Override
public void setValue(String value) {
super.setValue(value);
if (rendered) {
updateContent(id,value);
}
}
protected native String getTextData(String id) /*-{
return $wnd.tinyMCE.getInstanceById(id).getContent({format : 'raw'});
}-*/;
protected native void updateContent(String id,String value) /*-{
var editor = $wnd.tinyMCE.getInstanceById(id);
if(editor){
editor.setContent(value);
}
}-*/;
private native void initTinyMCE(String id)/*-{
$wnd.tinyMCE.execCommand("mceAddControl", true, id);
}-*/;
@Override
public void focus() {
super.focus();
focusMCE(id);
}
protected native void focusMCE(String id) /*-{
$wnd.tinyMCE.execCommand('mceFocus', true, id);
}-*/;
}
public class UIWiget implements EntryPoint {
public void onModuleLoad() {
Viewport viewPort = new Viewport();
viewPort.setLayout(new FitLayout());
FormPanel formPanel = new FormPanel();
final TinyMCE field = new TinyMCE();
field.setValue("test");
formPanel.add(field);
formPanel.addButton(new Button("test",new SelectionListener<ButtonEvent>(){
public void componentSelected(ButtonEvent ce) {
Window.alert(field.getValue());
}}));
viewPort.add(formPanel);
RootPanel.get().add(viewPort);
}
}
Integration TinyMCE in GXT
Originally Posted by Webflash
