PDA

View Full Version : [2.x] Ext.ux.form.TinyMCE



MaximGB
25 Feb 2008, 2:37 PM
Hi, just created form field component wrapper for TinyMCE.
Tested (not hardly) on:
FF 2.0.0.12
Opera 9.22
MSIE 7.x
Requirements:
TinyMCE 3.0.1


Ext.namespace('Ext.ux.form');
/**
* @class Ext.ux.form.TinyMCE
* @author Maxim Bazhenov (http://www.max-bazhenov.com)
*/
Ext.ux.form.TinyMCE = Ext.extend(Ext.form.TextArea, {

autoCreate : true,

editor_config : null,

editor : null,

editor_rendered : false,

fs_patch_settings : null,

initComponent : function()
{
Ext.ux.form.TinyMCE.superclass.initComponent.call(this);
},

onRender : function(ct, position)
{
Ext.ux.form.TinyMCE.superclass.onRender.call(this, ct, position);

if (tinymce) {
var defaults = Ext.apply({}, tinymce.EditorManager.settings);
defaults.id = this.id;
this.editor = new tinymce.Editor(
this.id,
Ext.apply(
defaults,
Ext.applyIf(this.editor_config || {}, {add_form_submit_trigger: true})
)
);

this.editor.onPreInit.add(this.onEditorPreInit, this);
this.editor.onPostRender.add(this.onEditorPostRender, this);
this.editor.onExecCommand.add(this.onEditorExecCommand, this);
this.editor.onBeforeExecCommand.add(this.onEditorBeforeExecCommand, this);
this.editor.render();
}
},

onEditorPreInit : function(ed)
{
// Setting custom showMenu handler
var controls = ed.controlManager.controls, ctrl;
for (var ctl_id in controls) {
ctrl = controls[ctl_id];
if (ctrl.showMenu) {
ctrl.showMenu = this.myMenuControlShowMenu.createDelegate(
this, [ctrl, ctrl.showMenu], true
);
}
}

// Setting custom windowManager.open handler
ed.windowManager.open = this.myEditorWindowManagerOpen.createDelegate(
this, [ed.windowManager, ed.windowManager.open], true
);
},

onEditorPostRender : function(ed, cm)
{
this.editor_rendered = true;
this.resizeEditor(this.el.getWidth());
ed.load();

Ext.fly(ed.getContainer()).on('focus', this.onFocus, this);
Ext.fly(ed.getContainer()).on('blur', this.onBlur, this);
ed.onActivate.add(this.onFocus, this);
ed.onDeactivate.add(this.onBlur, this);

// Finding parent form and attaching to beforeaction
var fp = this.findFormPanel();
if (fp) {
fp.getForm().on('beforeaction', this.getValue, this);
}
},

onEditorBeforeExecCommand : function(ed, cmd, ui, val)
{
// We should intercept the inline editor created with fullscreen plugin.
if (cmd == 'mceFullScreen' && !this.editor.getParam('fullscreen_new_window')) {
this.fs_patch_settings = Ext.apply({}, tinymce.EditorManager.settings);
tinymce.EditorManager.add = this.myEditorManagerAdd.createDelegate(
this, [tinymce.EditorManager.add], true
);
}
},

onEditorExecCommand : function(ed, cmd, ui, val)
{
if (cmd == 'mceFullScreen') {
var active_win = Ext.WindowMgr.getActive();
var fs_cont = Ext.fly('mce_fullscreen_container');
if (fs_cont && active_win) {
fs_cont.setStyle('z-index', active_win.lastZIndex + 5);
}
tinymce.EditorManager.settings = Ext.apply({}, this.fs_patch_settings);
this.fs_patch_settings = null;
}
},

myEditorManagerAdd : function(ed, original)
{
ed.onPreInit.add(this.onEditorPreInit, this);
tinymce.EditorManager.add = original;
return original.call(tinymce.EditorManager, ed);
},

myEditorWindowManagerOpen : function(f, p, oWM, oF)
{
var active_win = Ext.WindowMgr.getActive();
if (active_win) {
oWM.zIndex = active_win.lastZIndex + 10;
}
if (oF) {
return oF.call(oWM, f, p);
}
else {
return oWM.call(p, f);
}
},

myMenuControlShowMenu : function(event, ctrl, oF)
{
oF.call(ctrl, event);
var active_win = Ext.WindowMgr.getActive();
if (active_win) {
var mEl = Ext.fly('menu_' + ctrl.id) || Ext.fly(ctrl.id + '_menu') || (ctrl.menu ? Ext.fly('menu_' + ctrl.menu.id) : null);
if (mEl) {
mEl.setStyle('z-index', active_win.lastZIndex + 10);
}
}
},

resizeEditor : function(w, h)
{
if (this.editor && this.editor_rendered) {
var cel = Ext.fly(this.editor.getContainer());
if (w && h) {
if (!Ext.isBorderBox) {
w -= cel.getBorderWidth('lr');
h -= cel.getBorderWidth('tb');
}
cel.setSize(w, h);
}
else if (w) {
if (!Ext.isBorderBox) {
w -= cel.getBorderWidth('lr');
}
cel.setWidth(w);
}
else if (h) {
if (!Ext.isBorderBox) {
h -= cel.getBorderWidth('tb');
}
cel.setHeight(h);
}
}
},

setSize : function(w, h)
{
if (this.editor && this.editor_rendered) {
this.resizeEditor(w || undefined, h || undefined);
}
else {
return Ext.ux.form.TinyMCE.superclass.setSize.call(this, w, h);
}
},

getValue : function()
{
if (this.editor && this.editor_rendered) {
this.editor.save();
}
return Ext.ux.form.TinyMCE.superclass.getValue.call(this);
},

setValue : function(value)
{
Ext.ux.form.TinyMCE.superclass.setValue.call(this, value);
if (this.editor && this.editor_rendered) {
this.editor.load();
}
},

focus : function()
{
if (this.editor) {
this.editor.focus();
}
else {
Ext.ux.form.TinyMCE.superclass.focus.call(this);
}
},

onFocus : function()
{
Ext.ux.form.TinyMCE.superclass.onFocus.call(this);
if (this.editor && this.editor_rendered) {
Ext.fly(this.editor.getContainer()).addClass(this.focusClass);
}
},

onBlur : function()
{
Ext.ux.form.TinyMCE.superclass.onBlur.call(this);
if (this.editor && this.editor_rendered) {
Ext.fly(this.editor.getContainer()).removeClass(this.focusClass);
}
},

markInvalid : function(msg)
{
Ext.ux.form.TinyMCE.superclass.markInvalid.call(this, msg);
if (this.editor && this.editor_rendered) {
Ext.fly(this.editor.getContainer()).addClass(this.invalidClass);
}
},

clearInvalid : function(msg)
{
Ext.ux.form.TinyMCE.superclass.clearInvalid.call(this);
if (this.editor && this.editor_rendered) {
Ext.fly(this.editor.getContainer()).removeClass(this.invalidClass);
}
},

alignErrorIcon : function()
{
if (this.editor && this.editor_rendered) {
this.errorIcon.alignTo(this.editor.getContainer(), 'tl-tr', [2, 0]);
}
else {
Ext.ux.form.TinyMCE.superclass.alignErrorIcon.call(this);
}
},

destroy : function()
{
if (this.editor) {
this.editor.remove();
this.editor = null;
this.editor_rendered = false;
}
Ext.ux.form.TinyMCE.superclass.destroy.call(this);
},

findFormPanel : function()
{
var owner = this.ownerCt;
while (owner && owner.xtype != 'form') {
owner = owner.ownerCt || null;
}
return owner;
}
});

Ext.reg('xtinymce', Ext.ux.form.TinyMCE);

Demo: http://www.max-bazhenov.com/dev/form-tinymce/index.php

dawesi
25 Feb 2008, 8:44 PM
nice.... there's been a few attempts...

http://extjs.com/forum/showthread.php?t=24787&highlight=tinymce
http://extjs.com/forum/showthread.php?t=19101&highlight=tinymce
http://extjs.com/forum/showthread.php?t=22965&highlight=tinymce

to name a few... nice job

MaximGB
25 Feb 2008, 9:35 PM
I know, but mine is
1. working in Ext.Window;
2. working with inlinepopup TinyMCE plugin
3. provides custom configuration for each TinyMCE instance
4. works correctly with multiple instances

;)

contex
27 Feb 2008, 5:08 AM
how can is add this ?

can i see a example page or some ?

MaximGB
28 Feb 2008, 4:40 AM
You should use this extension like any other form field, and don't forget to include TinyMCE scripts in you page and do the TinyMCE.init() call.

Lester Burlap
29 Feb 2008, 10:09 AM
Howdy:

Just checking -- does this fall under the same license as Ext?

Thanks so much...

LBB

MaximGB
29 Feb 2008, 2:27 PM
I didn't think about license, let's say I permit to use it anywhere if my authorship note will not be removed from the code.

cmendez21
4 Mar 2008, 4:36 PM
=D>
awesome plug-in just what i needed to finish some chaotic forms
Nice Work and Keep it up..!

cmendez21
4 Mar 2008, 7:24 PM
:D HI again i have a few observations

If use Ext.GetCmp('ideditor').getValue(); doesnt return any value its empty :((

If i use var valuedata = tinyMCE.activeEditor.getContent();
it appears the right value but it could be nicer and easier way to get it by getValue() by the plugin code and also what happens if you got 2 or more editors but how to get the right value

i also used tinyMCE.get('ideditor').getContent() and no value always appears empty

alindsay55661
14 Mar 2008, 2:22 PM
When I use this I get TinyMCE is not defined in reference to my init call. However the editor works. Any suggestions?

alindsay55661
14 Mar 2008, 2:26 PM
Nevermind, spelling error TinyMCE should be tinyMCE.

alindsay55661
14 Mar 2008, 3:51 PM
How do I customize each editor instance?

alindsay55661
14 Mar 2008, 3:53 PM
Nevermind found it again!

editor_config: {}

cmendez21
14 Mar 2008, 6:12 PM
You need to include properly the tinyMCE scripts check the samples of tinyMCE
or download the full package and check the sample pages that are included

:D

contex
15 Mar 2008, 5:57 AM
:D HI again i have a few observations

If use Ext.GetCmp('ideditor').getValue(); doesnt return any value its empty :((

If i use var valuedata = tinyMCE.activeEditor.getContent();
it appears the right value but it could be nicer and easier way to get it by getValue() by the plugin code and also what happens if you got 2 or more editors but how to get the right value

i also used tinyMCE.get('ideditor').getContent() and no value always appears empty

var ed = tinyMCE.get('ideditor');
alert(ed.getContent());

whnois
27 Nov 2010, 1:54 AM
Hi MaximGB, i have worked the plug-in with ff and chrome. But i realized that it is not working properly with ie8 for both my pages and example page. in your example page tiny editor couldn't been edited. In my pages browser throw error 'invalid variable' on 2893th line by
this.dom.style.width = this.addUnits(width); please help for solution and sorry about poor english.

sorry, it is working in your example page. just handle it :) but still i have same problem.