PDA

View Full Version : Tinymce with Ext 4.0.7



maneljn
3 Jan 2012, 10:07 AM
Anyone has working tinymce v 3.4.6 with extjs v 4.0.7
I have working it with extjs 4.0.2a but now with 4.0.7 i have an error in getLabelableSelectors() function in Ext.ux.form.TinyMCE.js

maneljn
3 Jan 2012, 10:19 AM
code for Ext.ux.form.TinyMCE of fkportfolio.com



Ext.define('Ext.ux.form.TinyMCE', {
extend: 'Ext.Component',
mixins: {
labelable: 'Ext.form.Labelable',
field: 'Ext.form.field.Field'
},
alternateClassName: ['Ext.form.TinyMCE'],
alias: 'widget.tinymcefield',

fieldSubTpl: [
'<textarea id="{id}" ',
'<tpl if="name">name="{name}" </tpl>',
'tabIndex="-1" ',
'class="{fieldCls}" autocomplete="off" />',
'</textarea>',
{
compiled: true,
disableFormats: true
}
],

hideMode: 'offsets',
fieldCls: Ext.baseCSSPrefix + 'tinymce-field',

constructor: function(config) {
var me = this;

// The default configuration to use is none is specified
var edDefault = {
mode: 'none',
theme: 'advanced',
plugins: 'autolink,lists,spellchecker,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: 'newdocument,|,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,|,fullscreen',
theme_advanced_buttons4: 'insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,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',
skin: 'o2k7'
};

// Apply any user specified tinymceInit configurations
config.tinymceInit = config.tinymceInit || {};
Ext.applyIf(config.tinymceInit, edDefault);

// Init values we do not want changed
config.tinymceInit.mode = 'none';

me.callParent(arguments);
},

initComponent: function() {
var me = this;

// Add events?

me.callParent(arguments);

// Init mixins
me.initLabelable();
me.initField();

// Set name to id id one is not set
if (!me.name) {
me.name = me.getInputId();
}
},

getInputId: function() {
return this.name || (this.name = Ext.id());
},

getSubTplData: function() {
var me = this,
inputId = me.getInputId();

return {
id: inputId,
fieldCls: me.fieldCls,
name: me.name || inputId
};
},

getSubTplMarkup: function() {
return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
},

initRenderTpl: function() {
var me = this;
if (!me.hasOwnProperty('renderTpl')) {
me.renderTpl = me.getTpl('labelableRenderTpl');
}
return me.callParent();
},

initRenderData: function() {
return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
},

onRender: function() {
var me = this,
inputId = me.getInputId(),
renderSelectors = me.renderSelectors;

Ext.applyIf(renderSelectors, me.getLabelableSelectors());

Ext.applyIf(renderSelectors, {
textareaEl: '.' + me.fieldCls
});

me.callParent(arguments);

// Default value for textarea
me.setRawValue(me.rawValue);

// Render and add editor
// http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor
me.ed = new tinymce.Editor(inputId, me.tinymceInit);
me.ed.render();

// this.on('resize', this.onResize, this);

},

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

getRawValue: function() {
var me = this,
value;

// Sync textarea with editor content if initialized
if (me.ed && me.ed.initialized) {
me.ed.save();
}

value = me.textareaEl? me.textareaEl.getValue() : Ext.value(me.rawValue, '');
me.rawValue = value;
return value;
},

setRawValue: function(value) {
var me = this;
value = Ext.value(value, '');
me.rawValue = value;

// Some Field subclasses may not render an textareaEl
if (me.textareaEl) {
me.textareaEl.dom.value = value;
}

// Sync editor with textarea if initialized
if (me.ed && me.ed.initialized) {
me.ed.setContent(value);
}
return value;
},

valueToRaw: function(value) {
return '' + Ext.value(value, '');
},

rawToValue: function(rawValue) {
return rawValue;
},

processRawValue: function(value) {
return value;
},

reset: function() {
this.setValue('');
},

getValue: function() {
var me = this,
value = me.rawToValue(me.processRawValue(me.getRawValue()));
me.value = value;
return value;
},

setValue: function(value) {
var me = this;
me.setRawValue(me.valueToRaw(value));
return me.mixins.field.setValue.call(me, value);
},

toggleEditor: function() {
tinymce.execCommand('mceToggleEditor', false, this.name);
}
});

tiago.teixeira
24 Jan 2012, 10:06 AM
Hey!

Did u manage to fix it?

Cheers!

harrydeluxe
24 Jan 2012, 4:40 PM
I had initially played with the above code. But then i found a better solution. The results are now here available:

https://github.com/harrydeluxe/extjs-ux/ (https://github.com/harrydeluxe/extjs-ux/#extuxformfieldtinymce)

And here a working demo:
http://harrydeluxe.github.com/extjs-ux/img/tinymce.jpg

http://harrydeluxe.github.com/extjs-ux/example/form/tinymce.html

tiago.teixeira
25 Jan 2012, 2:00 AM
Great stuff! Awesome work you have made, Thanks for sharing! Btw, I fck love your quote :)

Cheers!

craigsimons
25 Jan 2012, 11:10 AM
I'd always assumed that the built-in htmleditor was more than sufficient... until I used it. Thank you (and all the work of the others involved) for providing an alternative that I can use!

Bodom78
31 Jan 2012, 4:31 PM
Nice work Harry,

The Google repo was me originally starting on a ux but it's been neglected for a while due to work.

I have updated the repos home page with a link to your UX for future people looking to integrate TinyMCE.

harrydeluxe
1 Feb 2012, 4:24 AM
Thank you.

ringline
10 Feb 2012, 5:53 AM
Nice ~~:))

harrydeluxe
28 Apr 2012, 3:22 PM
Works now with 4.1.0
See: https://github.com/harrydeluxe/extjs-ux/ (https://github.com/harrydeluxe/extjs-ux/#extuxformfieldtinymce)

m2276699
18 May 2012, 2:00 AM
Works now with 4.1.0
See: https://github.com/harrydeluxe/extjs-ux/ (https://github.com/harrydeluxe/extjs-ux/#extuxformfieldtinymce)

IE8 has a bug!
'serializer' is empty or not an object
row: 1
char: 167888
URI: http://harrydeluxe.github.com/extjs-ux/ux/form/field/tinymce/tiny_mce.js

harrydeluxe
18 May 2012, 9:23 PM
fixed!

sentyx
19 May 2012, 12:30 AM
hello,
i have little problem (and i think its i s due to my "lack of ext skills") and i would like to ask u for help.

I am using tinymce field in in form


var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
height: 370,

items: [{
xtype: 'tinymcefield',
name: 'content',
fieldLabel: trans_admin_menu_module_content,
labelAlign: 'top',
height: 230,
tinymceConfig: {
theme_advanced_buttons1: 'fullscreen',
theme_advanced_buttons2: 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect,|,pasteword',
theme_advanced_buttons3: '',
theme_advanced_buttons4: '',
skin: 'o2k7'
}
}],

url: menuSaveData,
buttons: [{
text: trans_admin_button_save,
handler: function() {
var form = this.up('form').getForm();
alert(this.up('form').getComponent('test').getValue());
if (form.isValid()){
// save form
}
}
}, {
text: trans_admin_button_close,
handler: function() {
this.up('window').close();
}
}]


});



and this "addform" is then added to window, which can be "created" and showed by show() method
when i first click to "create and show" window - everything works fine (including tinymce etc.)
when i "close" window and click againg to "create and show" - strange things happens :

i cannot write in tinymce (but tinymce plugins like emotikons etc. works...just i didnt see they efect)
when i switch to fullscrean mode - everything works fine !

can someone pls help me ?

PS : just for completness of code i add my window code :


var window = Ext.create('Ext.window.Window', {
itemId: 'window',
title: trans_admin_menu_new,
height: 460,
width: 730,
layout: 'fit'
}).show();
window.add(form);

m2276699
19 May 2012, 1:03 AM
nice work!

sentyx
19 May 2012, 2:43 AM
problem fixed ->
my form was created this way :


var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
height: 370,
renderTo: Ext.getBody(),

...


and line : renderTo: Ext.getBody(),

force tinymce to froze



hello,
i have little problem (and i think its i s due to my "lack of ext skills") and i would like to ask u for help.

I am using tinymce field in in form


var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
height: 370,

items: [{
xtype: 'tinymcefield',
name: 'content',
fieldLabel: trans_admin_menu_module_content,
labelAlign: 'top',
height: 230,
tinymceConfig: {
theme_advanced_buttons1: 'fullscreen',
theme_advanced_buttons2: 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect,|,pasteword',
theme_advanced_buttons3: '',
theme_advanced_buttons4: '',
skin: 'o2k7'
}
}],

url: menuSaveData,
buttons: [{
text: trans_admin_button_save,
handler: function() {
var form = this.up('form').getForm();
alert(this.up('form').getComponent('test').getValue());
if (form.isValid()){
// save form
}
}
}, {
text: trans_admin_button_close,
handler: function() {
this.up('window').close();
}
}]


});



and this "addform" is then added to window, which can be "created" and showed by show() method
when i first click to "create and show" window - everything works fine (including tinymce etc.)
when i "close" window and click againg to "create and show" - strange things happens :

i cannot write in tinymce (but tinymce plugins like emotikons etc. works...just i didnt see they efect)
when i switch to fullscrean mode - everything works fine !

can someone pls help me ?

PS : just for completness of code i add my window code :


var window = Ext.create('Ext.window.Window', {
itemId: 'window',
title: trans_admin_menu_new,
height: 460,
width: 730,
layout: 'fit'
}).show();
window.add(form);

scottmartin
3 Jul 2012, 10:35 PM
It seems that toggling to full screen, then back will lose connection to the data. getRawValue() does not seem to be called. The last value will remain when changing records.

Do demonstrate this in your demo, load data and click reset .. all fields are cleared including MCE. Load data again, then toggle full screen and then click reset. MCE still has data.

Another issue related to fullscreen. Load data, toggle fullscreen, then load data again. Modal 'loading' remains on screen.

Scott.

harrydeluxe
4 Jul 2012, 7:23 AM
@scottmartin The problem is solved. I have the plugin 'fullscreen' in tinymce rewritten. Since there existed a conceptual error.

scottmartin
4 Jul 2012, 7:28 AM
Thank you sir!

Scott.

extremed
12 Nov 2012, 10:00 AM
i checked the github page and found that it supports 4.1.1.

http://harrydeluxe.github.com/extjs-ux/example/form/tinymce.html

but once i try to build the project with sencha cmd it says Failed parsing TinyMCEWindowManager.js

any fix for the issue?

Dmoney
4 Feb 2013, 6:42 PM
I am also getting the "Failed parsing TinyMCEWindowManager.js" Error when trying to compile the application.

Anyone having any luck with this?

zombeerose
25 Feb 2013, 10:29 AM
Any chance of supporting multiple instances of the editor?



Ext.widget({xtype:'tinymcefield',renderTo:Ext.getBody()});
Ext.widget({xtype:'tinymcefield',renderTo:Ext.getBody()});
...

svitalius
27 Feb 2013, 3:38 PM
First off – Thanks Harald for making a great solution for bringing TinyMCE into ExtJS. It works great!

One thing I'm struggling with is how to add custom buttons to the toolbar. In a non-extjs implementation of TinyMCE you can do this by simply adding the following to tinymce.init()



setup: function(editor) {
editor.addButton('custom-button, {
title: 'Custom Button',
image: 'images/example.png',
onclick: function() {
// do whatever
}
});
}


However, this approach does not seem to work in the extjs implementation. I've tried adding that code in a variety of places from the tinymceConfig when instantiating to the globalSettings and initEditor -> tinymceConfig.setup functions in TinyMCE.js class file. None of those seem to do the trick.

Has anyone done this successfully? If so, how? If not, any ideas?

Cheers!

zombeerose
28 Feb 2013, 11:05 AM
@svitalius

Try adding the button during the handler for "onBeforeRenderUI" instead of "setup"...


editor.onBeforeRenderUI.add(function(ed){
ed.addButton('custom-id',{
'class': 'my-css-class',
title: 'custom button'
});
});


That's how I inject my buttons.

svitalius
28 Feb 2013, 1:24 PM
Thanks for the reply zombeerose.

What I just figured out is that both approaches actually work. The reason why my custom button wasn't showing up is because I wasn't actually instantiating it through the button config - ie: theme_advanced_buttons1: 'bold, italic, customBtnId, etc....'

Bonehead oversight on my part.

svitalius
28 Feb 2013, 11:32 PM
I've added added a custom button to tinymce that when clicked opens a ext window extended to a custom file browser. When a file is selected or uploaded I would like to insert an image tag into the tinymce editor, ideally outside of the tag containing the current cursor position – so that I can float it next to the current <p>.

Any thoughts on how to go about this would be super appreciated!

Cheers.

Dmoney
19 Apr 2013, 8:43 AM
@svitalius

WHERE are you putting your setup function. I'm trying to add a button I tried adding a listener for setup but the function is never called.

Dmoney
20 Apr 2013, 5:42 AM
nevermind, this worked for me.




editor.onBeforeRenderUI.add(function(ed){ ed.addButton('custom-id',{ 'class': 'my-css-class', title: 'custom button' });});

megaurav2002
11 Jul 2013, 10:36 PM
I am getting "Failed parsing TinyMCEWindowManager.js" Error when trying to compile the application.

Any ideas?

Thanks

Bodom78
12 Jul 2013, 12:43 AM
I am also getting the "Failed parsing TinyMCEWindowManager.js" Error when trying to compile the application.

Anyone having any luck with this?

If you minifying your JS, try not minifying TinyMCEWindowManager.js and just add it separately. I'm not sure but I remember having issues with minifying it back in the day.

megaurav2002
14 Jul 2013, 4:50 PM
I am getting "Unknown definition for dependency:tinymce.WindowManager" error when trying to build extjs 4.2 with TinyMCE. Any ideas?

Thanks

raye
31 Aug 2013, 1:49 AM
thx!!!

joejernst
5 Nov 2013, 10:19 AM
I am getting "Failed parsing TinyMCEWindowManager.js" Error when trying to compile the application.

Any ideas?

Thanks

I was able to get past this error by removing the extend: tinymce.WindowManager line in TinyMCEWindowManager.js. It allowed the build to complete, but I'm not sure if there will be any downstream effects.

larza79
6 Nov 2013, 2:04 PM
Just wanted to send a BIG thanks-a-lot for all your efforts on this extension! You kind of saved my life today!! :) I needed a HTML-editor with WordPaste function that actually works, and voila, enter TinyMCE for Ext! :)