[Updated] Ext.ux.TinyMCE - TinyMCE form field (v0.7b1)

[xor]

Ext.ux.TinyMCE 0.8.6

ExtJS form field containing TinyMCE v3.

Download
* Download from component's page.
* Release notes.

You can support the project by donating at component's page.

Features
* Use getValue() and setValue() to set HTML content.
* Resizes editor to the field size.
* Opens TinyMCE popups as Ext windows.
* Supports several instances of TinyMCE editor.
* Each instance could be configured individually.
* Overflow of TinyMCE toolbar gets hidden, so control can fit any size.

Requires
* Modern browser
* ExtJS 3.4
* TinyMCE 3.4.4

Usage example (part of form config):

...
items: [
{
	xtype: "tinymce",
	tinymceSettings: {
		theme : "advanced",
		plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : false,
		extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
		template_external_list_url : "example_template_list.js"
	}
}
]
...

[dawesi]

Nice one...

seems like all the editors require iframes to work nicely... hmmm...

[galdaka]

Without live demo is difficult test the results or view the posibilities or your extension.

Thanks,

[xor]

galdaka, I understand that demo and screenshots are necessary. Just didn't have time for that yet.

[DigitalSkyline]

daeisi- that's is because they are all using iframe w/designMode

[jenner]

galdaka, I understand that demo and screenshots are necessary. Just didn't have time for that yet.

xor, could you perhaps create a simple example and put it in a zip? I just can't get your code to work with latest extjs and tinyMCE 3.0

thanks in advance,
jenner

[xor]

Hi!

I've added links to demo and sources. Please try.

BTW, I found that if we create control at document ready event, then page doesn't work at all. It's possible that TinyMCE's script loading mechanism doesn't work well at this page state.

[jenner]

Hi!

I've added links to demo and sources. Please try.

BTW, I found that if we create control at document ready event, then page doesn't work at all. It's possible that TinyMCE's script loading mechanism doesn't work well at this page state.

Thanks a lot!
To be honest, I've already figured it out by myself, took me quite a while though
Btw, if I try to instantiate a "standalone" TinyMCE field using applyTo (so it's bound to an existing textarea) then it doesn't work, the workaround is to replace afterRender with onRender and change all occurrences of this.getEl().child( "textarea" ).id; with this.getEl().id;.

Thanks for your work,
jenner

[tobiu]

just checked out the online demo.

the "choose color" button does not work in ff with me. bug?


rest looks nice this far, tobiu

[jenner]

here's a weird hack that replaces original tinMCE buttons with Ext.Button objects, it's really dirty since the buttons are added after the Window has been rendered (not to mention the use of eval) but it works... replace original open method with this:

            open : function( s, p ) {
                
                s = s || {};
                p = p || {};
                
                s.width = parseInt(s.width || 320);
                s.height = parseInt(s.height || 240) + (tinymce.isIE ? 8 : 0);
                s.min_width = parseInt(s.min_width || 150);
                s.min_height = parseInt(s.min_height || 100);
                s.max_width = parseInt(s.max_width || 2000);
                s.max_height = parseInt(s.max_height || 2000);
                s.movable = s.resizable = true;
                p.mce_width = s.width;
                p.mce_height = s.height;
                p.mce_inline = true;

                this.features = s;
                this.params = p;
                
                // predefine window and panel ids so we can reference the components later
                var winId = Ext.id();
                var panelId = Ext.id();
                
                var panel = new Ext.ux.ManagedIframePanel({
                	id: panelId,
			defaultSrc: s.url || s.file
                });

				
		// look out for buttons
                panel.on("documentloaded", function(pnl) {
                	var doc = pnl.getDocument();
                	var btns = new Array();
                	['insert', 'cancel'].each(function(btnId) {
	                	var btn = Ext.get(doc.getElementById(btnId));
	                	if (btn) {
	                		var _handler = Ext.emptyFn;
                                        // copy the onclick=".." string and create a function,
	                		if (btn.dom.getAttribute("onclick")) {
	                			_handler = function(){
	                				eval("Ext.getCmp('"+panelId+"').getFrameWindow()." + btn.dom.getAttribute("onclick"));
	                			};
	                		}
	                		btns.push(new Ext.Button({
	                			text: btn.dom.value,
	                			handler: _handler
	                		}));
	                		btn.remove();
	                	}
                	});
                	if (btns.length > 0) {
                		var parentWin = Ext.getCmp(winId);
                                // copied from Ext.Panel#onRender()
                		parentWin.buttons = btns;
                                var tb = parentWin.footer.createChild({cls:'x-panel-btns-ct', cn: {
                                       cls:"x-panel-btns x-panel-btns-"+parentWin.buttonAlign,
                                       html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
                                }}, null, true);
                                 var tr = tb.getElementsByTagName('tr')[0];
                                 for(var i = 0, len = parentWin.buttons.length; i < len; i++) { 
                                     var b = parentWin.buttons[i];
                                     var td = document.createElement('td');
                                     td.className = 'x-panel-btn-td';
                                     b.render(tr.appendChild(td));
                                  }                		
                	}
                }.createDelegate(panel));
                
                var win = new Ext.Window(
                {
                    id: winId,
                    title: s.name,
                    width: s.width,
                    height: s.height,
                    minWidth: s.min_width,
                    minHeight: s.min_height,
                    resizable: true,
                    maximizable: s.maximizable == true,
                    minimizable: s.minimizable == true,
                    modal: true,
                    layout: "fit",
                    items: [panel],
                    buttons: []
                });
                
                p.mce_window_id = win.getId();
                
                win.show( null,
                    function() {
                        if( s.left && s.top ) 
                            win.setPagePosition( s.left, s.top );
                        var pos = win.getPosition();
                        s.left = pos[0];
                        s.top = pos[1];
                        this.onOpen.dispatch( this, s, p );
                    },
                    this
                );
                
                return win;
            },

cheers,
jenner