PDA

View Full Version : TinyMCE width ExtJS



akiles83
2 Oct 2011, 1:42 AM
Hi, i need config de plugin TinyMCE into the Ext.form, version ExtJS 4.

Any idea or guide, conector?? or other plugin as TinyMCE. :((

Thanks.

maneljn
3 Oct 2011, 1:21 AM
the same need for me...

akiles83
3 Oct 2011, 4:04 AM
I find solution,

1.- Download the last version of TinyMCE, i think that is 3.4
2.- Import lib tiny_mce_src.js:
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.src.js"></script>
3.- Import lib tiny_mce_ext.js attached 28469
<script type="text/javascript" src="tiny_mce_ext.js"></script>
4.- Finally add


xtype: "TinyMCEEditor",
columnWidth: 1,
flex:1,
name: 'contenido',
tinyMCESettings: {
plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,fullscreen",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,cleanup,code,|,preview,print,|,help,|,fullscreen",
theme_advanced_buttons2: "styleselect,formatselect,fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,image,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,visualaid",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
//theme_advanced_buttons4: ",insertdate,inserttime",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
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",
theme_advanced_resizing : true,
content_css : "/lib/css/editor.css"

},
width: 930,
height: 400
and your configuration

i hope to help.

maneljn
3 Oct 2011, 11:43 PM
i tried your solution.
it show an error

h.content is undefined
chrome://firebug/content/blank.gif(function(){tinymce.create("tinymce.pl...,tinymce.plugins.PageBreakPlugin)})();

and the resize works bad.

akiles83
4 Oct 2011, 12:45 PM
need see your code... however, de param flex and columnWidth use is your editor is into Ext.form.Form

maneljn
5 Oct 2011, 12:08 AM
i have found a new code integration extjs - tinymce in this web
http://code.google.com/p/ext-js-4-tinymce-ux/source/browse/trunk/ux/form/TinyMCE.js

It works good, the only thing is wrong is resizing.




/**
* Ext JS 4 TinyMCE form field widget
* Built on ExtJS 4.2a and TinyMCE 3.2.x
*
* @author Fady Khalife
* @site www.fkportfolio.com
* @licence www.gnu.org/licenses/lgpl.html
*/

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();

},

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);
}

});

iNes14
6 Jan 2012, 7:32 AM
Code of akiles83 works. Thanks :)

But where is the file editor.css ?

Be just careful with the import :



<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script>


(It's an underscore and not a point)

biohazardo
28 Feb 2012, 4:21 AM
Thanks a lot. I googling that manual for a long time...:D

machetico
25 Aug 2013, 3:58 PM
I follow your instruction and
When I run the code I get the above error in line 218 of tiny_mce_ext.js
The line is:

var bodyWidth = component.bodyEl.getWidth();And the value in component new Number(1050). It does not look link an object.I am using tinyMCE 3.5.8 and ext 4.2.1Any help will be much appreciated

sdruckerfig
31 Mar 2014, 10:19 AM
I've created an Ext 4.2 / TinyMCE 4 component, along with a Sencha Architect user extension.http://druckit.wordpress.com/2014/03/30/integrating-ext-js-4-and-the-tinymce-4-rich-text-wysiwyg-editor/

tarini85
31 Jan 2017, 7:14 PM
I find solution,

1.- Download the last version of TinyMCE, i think that is 3.4
2.- Import lib tiny_mce_src.js:
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.src.js"></script>
3.- Import lib tiny_mce_ext.js attached 28469
<script type="text/javascript" src="tiny_mce_ext.js"></script>
4.- Finally add


xtype: "TinyMCEEditor",
columnWidth: 1,
flex:1,
name: 'contenido',
tinyMCESettings: {
plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,fullscreen",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,cleanup,code,|,preview,print,|,help,|,fullscreen",
theme_advanced_buttons2: "styleselect,formatselect,fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,image,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,visualaid",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
//theme_advanced_buttons4: ",insertdate,inserttime",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
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",
theme_advanced_resizing : true,
content_css : "/lib/css/editor.css"

},
width: 930,
height: 400
and your configuration

i hope to help.



Can you please help me I m getting Failed to resolve dependency tinymce.WindowManager for file EC.common.tinymce.WindowManager

tarini85
31 Jan 2017, 7:15 PM
I have tried your solution I am getting the below error

Failed to resolve dependency tinymce.WindowManager for file EC.common.tinymce.WindowManager