Another Ext.ux.form.TinyMCE

[ontho]

Hello,

I know there are some solutions around for using a tinyMce-Editor with ExtJs 4, but I needed a class which is able to handle several different tinyMce-configs on one form. So here is my approach, any feedback is welcome.



Ext.define('Ext.ux.form.TinyMCE',
{ extend:'Ext.form.TextArea',
alias: 'widget.xtinymce',

tinyMceConfig: {}, // Config for this tinyMce-Instance
saveFunc: null, // Function called when pressing the save-button of tis tinyMce. If not set and this tinyMce-field is inside a form, the form is submitted.

onRender: function (ct, position)
{ if (this.id === undefined) this.id = this.name;
this.callParent(arguments);
this.initTinyMce();
},

getSubmitValue: function()
{ return this.getValue();
},

getValue : function()
{ if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id))
{ this.value = tinymce.EditorManager.get(this.inputEl.id).getContent();
}
return this.value;
},

setValue : function(value)
{ if (value === null || value === undefined) value = "";
if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id))
{ tinymce.EditorManager.get(this.inputEl.id).setContent(value);
}
this.value = value;
if (this.inputEl) this.inputEl.dom.value = value;
},

initTinyMce: function()
{ var standardConfig = {
mode : 'exact',
elements: this.inputEl.id,
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

theme_advanced_buttons1 :
"save,newdocument,separator,undo,redo,separator,"+ // cancel
"cut,copy,paste,pastetext,pasteword,separator,"+
"bold,italic,underline,blockquote,strikethrough,sub,sup,separator,help",

theme_advanced_buttons2 :
"justifyleft,justifycenter,justifyright,justifyfull,separator,"+
"bullist,numlist,outdent,indent,separator,"+
"link,unlink,image,media,advhr,separator,charmap,separator,pagebreak,separator,code",

theme_advanced_buttons3 :
"tablecontrols,separator,fullscreen,separator,styleprops,forecolor,backcolor", // preview,

theme_advanced_buttons4 :
"styleselect,formatselect,separator,fontselect,fontsizeselect,removeformat,cleanup",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : false,
width : "100%",
theme_advanced_source_editor_width : "600",
height: "100%",

class_filter : Ext.bind(this.onFilterClass, this),
save_onsavecallback : Ext.bind(this.onSave, this)
}

var config = this.tinyMceConfig;
Ext.apply(config, standardConfig);

tinyMCE.init(config);
},

// Called when the user presses the save-button in tinyMce
onSave: function()
{ if (this.saveFunc)
{ this.saveFunc();
}
else
{ var form = this.up('form');
if (form)
{ form.submit();
}
}
},

// Called when the css-classes are shown
onFilterClass: function(cls, rule)
{ // return false or otherClassName
return cls;
}
});

[zillabyte]

ontho,
I'm trying to use your plugin but I can't seem to get it to work in my situation. I'm opening a window with only the plugin and trying to set the initial value but the textarea is blank. here is my code:




//-- TEXTAREA IMPLEMENT
Ext.create('Ext.window.Window', {
title: 'Editor',
height: 700,
width: 980,
layout: 'fit',
modal: true,
items: {
xtype: 'xtinymce'
, border: false
, name: 'ContentData'
, id: 'ContentData'
, data: 'THIS IS MY HTML FOR TINYMCE'
}
}).show();



Also the size of the editable area is incorrect. Can you help with this?

[zillabyte]

Okay, I believe I got this working. It looks like the value was trying to be set before the tinymce object was being initialized so the inputEl was not set when the setValue method was being called. Also, the hieght and width wasn't working correctly with the h/w set at 100%. So, I changed a couple of things to set the h/w from the config options. I also added the afterRender, which I think reapplies the config since when I opened and closed the window, then reopened again the editor was not sized right. Not sure if this was best way to fix it but it now works for me.

Using the control:



Ext.create('Ext.window.Window', {
title: 'Editor',
height: 700,
width: 980,
//layout: 'fit', DONT USE A LAYOUT
resizable: false,
modal: true,
items: {
xtype: 'xtinymce'
, border: false
, name: 'ContentData'
, id: 'ContentData'
, height: 650
, width: 968
, value: 'MY HTML DATA'
},
listeners: {
scope: this,
beforeclose: {
fn: function (pnl, options) {
var d = Ext.getCmp('ContentData');
me.updateContent(d);
}
}
}
}).show();


Full ux with my changes:



Ext.define('Ext.ux.form.TinyMCE', {
extend: 'Ext.form.TextArea',
alias: 'widget.xtinymce',

tinyMceConfig: {}, // Config for this tinyMce-Instance
saveFunc: null, // Function called when pressing the save-button of tis tinyMce. If not set and this tinyMce-field is inside a form, the form is submitted.

onRender: function (ct, position) {
if (this.id === undefined) this.id = this.name;
this.callParent(arguments);
this.initTinyMce();
},

getSubmitValue: function () {
return this.getValue();
},

getValue: function () {
if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id)) {
this.value = tinymce.EditorManager.get(this.inputEl.id).getContent();
}
return this.value;
},

setValue: function (value) {
if (value === null || value === undefined) value = "";
if (this.inputEl && tinymce && tinymce.EditorManager && tinymce.EditorManager.get(this.inputEl.id)) {
tinymce.EditorManager.get(this.inputEl.id).setContent(value);
}
this.value = value;
if (this.inputEl) this.inputEl.dom.value = value;
},

initTinyMce: function () {
var me = this;
var standardConfig = {
mode: 'exact',
elements: this.inputEl.id,
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

theme_advanced_buttons1:
"save,newdocument,separator,undo,redo,separator," + // cancel
"cut,copy,paste,pastetext,pasteword,separator," +
"bold,italic,underline,blockquote,strikethrough,sub,sup,separator,help",

theme_advanced_buttons2:
"justifyleft,justifycenter,justifyright,justifyfull,separator," +
"bullist,numlist,outdent,indent,separator," +
"link,unlink,image,media,advhr,separator,charmap,separator,pagebreak,separator,code",

theme_advanced_buttons3:
"tablecontrols,separator,fullscreen,separator,styleprops,forecolor,backcolor", // preview,

theme_advanced_buttons4:
"styleselect,formatselect,separator,fontselect,fontsizeselect,removeformat,cleanup",

theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_path_location: "bottom",
plugin_insertdate_dateFormat: "%Y-%m-%d",
plugin_insertdate_timeFormat: "%H:%M:%S",
theme_advanced_resize_horizontal: false,
theme_advanced_resizing: false,
//width: "100%",
theme_advanced_source_editor_width: "600",
//height: "100%",
width: me.width,
height: me.height,

class_filter: Ext.bind(this.onFilterClass, this),
save_onsavecallback: Ext.bind(this.onSave, this),
file_browser_callback: Ext.bind(this.onInsertImage, this)

}

var config = this.tinyMceConfig;
Ext.apply(config, standardConfig);

tinyMCE.init(config);

var me = this;
me.setValue(me.value);
},

//-- after component render
afterRender: function () {
this.callParent(arguments);
},

// Called when the user presses the save-button in tinyMce
onInsertImage: function () {
alert('InsertImage');
},

// Called when the user presses the save-button in tinyMce
onSave: function () {
if (this.saveFunc) {
this.saveFunc();
}
else {
var form = this.up('form');
if (form) {
form.submit();
}
}
},

// Called when the css-classes are shown
onFilterClass: function (cls, rule) { // return false or otherClassName
return cls;
}
});