Simple Tiny Mce Plugin [Archive]

View Full Version : Simple Tiny Mce Plugin

neni

13 Jan 2008, 8:55 PM

This a very simple plugin for use TinyMce (Version 3) on a textarea.

TinyMce.plugin.js:

Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.TinyMceEditor = function(config){
Ext.apply(this, {config:config});
};

Ext.extend(Ext.ux.plugins.TinyMceEditor, Ext.util.Observable, {
config:{mode : "textareas",editor_selector : "mceEditor",theme : "simple"}
,onRender:function(o){
tinyMCE.init(this.config);
tinyMCE.execCommand('mceAddControl', false, o.id);
}
,init:function(textarea) {
textarea.on('render', this.onRender, this);
Ext.apply(textarea, {
setValue:textarea.setValue.createSequence(function(ct, position) {
//alert('update:'+textarea.id);
tinyMCE.getInstanceById( textarea.id ).setContent( textarea.getValue() );
})
,beforeDestroy:textarea.beforeDestroy.createSequence(function(ct, position) {
if (tinyMCE.getInstanceById(textarea.id) != null){
//alert('destroy: '+textarea.id);
// TO DO: fond the problem
//tinyMCE.execCommand( 'mceRemoveControl', false, textarea.id );
}
})
});
}
});

In HTML file:

<head>

...


<script type="text/javascript" src="ux/HtmlEditor/tinymce3/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ux/HtmlEditor/TinyMce.plugin.js"></script>

...

</head>

And in JS code:

...

// TinyMce configs
var tinyMCEConf1={
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
theme_advanced_buttons3_add : "fullpage",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,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,|,fullscreen",
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 : true
};

var tinyMCEConf2={
mode : "textareas"
,editor_selector : "mceEditor"
,theme : "simple"
};

...

var localForm = new Ext.form.FormPanel({
....
,items: [
{
xtype:'textfield'
,fieldLabel: 'Titre'
,name: 'titre'
,anchor:'100%'
},{
xtype:'textarea'
,fieldLabel:'Entete'
,name:'entete'
,anchor:'100%'
,height:100
,plugins:new Ext.ux.plugins.TinyMceEditor(tinyMCEConf2)
},{
xtype:'textarea'
,fieldLabel:'Contenu'
,name:'contenu'
,anchor:'100%'
,height:300
,plugins:new Ext.ux.plugins.TinyMceEditor(tinyMCEConf1)
}
]
...

});

The beforeDestroy method seems to be call after that the textarea was destroyed (that is why TinyMce's remove method make an error if it is not commented). Sorry for my English!

That's my first plugin, so I don't know if this is the best way to do.

neni

13 Jan 2008, 9:23 PM

When the FromPanel is rendered several times, the size of the textarea isn't good. Changed the render methode by resize seems to resolve this problem... I don't know why...

Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.TinyMceEditor = function(config){
Ext.apply(this, {config:config});
};

Ext.extend(Ext.ux.plugins.TinyMceEditor, Ext.util.Observable, {
config:{mode : "textareas",editor_selector : "mceEditor",theme : "simple"}
,onResize:function(o){
if (tinyMCE.getInstanceById(o.id) == null){
//alert('resize:'+o.id);
tinyMCE.init(this.config);
tinyMCE.execCommand('mceAddControl', false, o.id);
}
}
,init:function(textarea) {
textarea.on('resize', this.onResize, this);
Ext.apply(textarea, {
setValue:textarea.setValue.createSequence(function(ct, position) {
//alert('update:'+textarea.id);
tinyMCE.getInstanceById( textarea.id ).setContent( textarea.getValue() );
})
,beforeDestroy:textarea.beforeDestroy.createSequence(function(ct, position) {
if (tinyMCE.getInstanceById(textarea.id) != null){
//alert('destroy: '+textarea.id);
// TO DO: fond the problem
//tinyMCE.execCommand( 'mceRemoveControl', false, textarea.id );
}
})
});
}
});

albertogiantin

15 Jan 2008, 6:43 AM

Hi, i've tried to use your plugin, but it works well only with firefox but no with ie. The editor doesn't load.
Here is my code:

caricaEditor = function() {
// TinyMce configs
var tinyMCEConf1={
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
theme_advanced_buttons3_add : "fullpage",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,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,|,fullscreen",
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 : true
};

editorWindow = new Ext.Window({
title :'Editor HTML',
titleCollapse: true,
plain: true,
resizable:true,
draggable: true,
autoScroll:true,
closeAction:'close',
animCollapse:true,
autoDestroy:true,
closable: true,
collapsible:true,
maximizable:true,
height:200,
width:550,
minHeight:200,
minWidth: 550,
modal:true,
shadow:true,
tools:[{
id:'save',
// hidden:true,
qtip: 'Salva e chiudi',
handler: salvaHTML
}
],

items: {
xtype:'textarea',
label:'ciao',
name:'contenuto',
anchor:'100%',
height:200,
width:550,
plugins:new Ext.ux.plugins.TinyMceEditor(tinyMCEConf1)
}

});

// editorWindow.on('resize', function(obj,width,height) {
// editorWindow.getComponent('editorFAQ').setSize(width-20,height-50);
// });

editorWindow.show();
};

3865

3866

wuschba

21 Apr 2008, 3:41 AM

Has this problem with IE been solved?