PDA

View Full Version : [Updated] Ext.ux.TinyMCE - TinyMCE form field (v0.7b1)



Pages : [1] 2

xor
30 Jan 2008, 8:58 AM
Ext.ux.TinyMCE 0.8.6

ExtJS form field containing TinyMCE v3.

Download
* Download from component's page (http://blogs.byte-force.com/xor/tinymce/index.html).
* Release notes (http://blogs.byte-force.com/xor/tinymce/release-notes.txt).

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
30 Jan 2008, 8:39 PM
Nice one...

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

galdaka
31 Jan 2008, 12:15 AM
Without live demo is difficult test the results or view the posibilities or your extension.

Thanks,

xor
31 Jan 2008, 12:43 AM
galdaka, I understand that demo and screenshots are necessary. Just didn't have time for that yet.

DigitalSkyline
31 Jan 2008, 4:34 PM
daeisi- that's is because they are all using iframe w/designMode

jenner
4 Feb 2008, 3:37 PM
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
5 Feb 2008, 4:58 AM
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
5 Feb 2008, 6:16 AM
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
5 Feb 2008, 1:11 PM
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
6 Feb 2008, 4:19 AM
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

Hani
6 Feb 2008, 5:26 AM
One of the biggest issues of this is that the tmce view does not resize when its container (in this case, the dialog window) is resized.

xor
6 Feb 2008, 8:10 AM
Hani, what browser do you use?

neenhouse
6 Feb 2008, 8:13 AM
FF2 works for me, as well as IE 7 (but slow as all hell)

Hani
6 Feb 2008, 8:18 AM
Doesnt on Mac/Safari

xor
6 Feb 2008, 8:33 AM
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...

jenner, very nice hack! But do you think it's really required feature? I afraid it would be too fragile.

xor
6 Feb 2008, 8:36 AM
neenhouse, current issues in IE7:
* Height of text editing box is wrong - it's too narrow.
* Toolbars are not cut to the width of a container.

Hani, I have no Mac so I can't check it there. Later I'd simply try on Windows Safari.

tobiu, bug with color picker is clear - will fix it soon.

neenhouse
6 Feb 2008, 8:54 AM
Xor,

Thanks for working on this plugin. As far as I can tell right now EXT (or any of the contributions) offers nothing close to what tinyMCE can do. Truthfully I'm kinda suprised that no one has worked on this before... I can't wait till its cross-browser !

Great job!

xor
6 Feb 2008, 8:56 AM
Fix for the colors drop-downs. The following code should be added to ControlManager members.

createColorSplitButton: function( id, s ){
// Call base method
var res = ControlManager.superclass.createColorSplitButton.call( this, id, s );

// Modify returned result
var orig = res.showMenu;
res.showMenu = function( x, y, px ) {
orig.call( this, x, y, px );
Ext.fly( this.id + '_menu' ).setStyle( "z-index", 12000 );
}

return res;
}

Konstantin
6 Feb 2008, 2:58 PM
Poking around the example with Safari (v3) on OSX -- all seems to work

Hani
6 Feb 2008, 3:23 PM
it does work, but it does not seem to notice when its container is resized.

So when you first open it up by clicking on the button in the example, there is a horizontal scrollbar. Resizing the dialog can get rid of this, but when you shrink the horizontal scrollbar shows up again. So the tmce editor area doesnt change size, even though the dialog its in does.

MuratCorlu
6 Feb 2008, 4:53 PM
Good work! I checked it on my system (Ubuntu 7.10, Firefox 2), it seems great. Only it's some slow I think. Do you see a problem like this?

And what about ie 6.0? Is this working properly on ie6? If "no", what is the problem about ie6?

jenner
6 Feb 2008, 8:01 PM
jenner, very nice hack! But do you think it's really required feature? I afraid it would be too fragile.

It sure is fragile, that's why I declared it as a hack :)

P.S.: working on examples/chooser.js based image plugin

cheers,
jenner

xor
6 Mar 2008, 4:53 AM
I've update Ext.ux.TinyMCE to version 0.2. Look at initial post for details.

Dongluan
7 Mar 2008, 12:37 AM
Are there some probleme with the site where I could normally download the source?

xor
7 Mar 2008, 1:13 AM
Sorry, I've messed up with permissions of the file area. Please, try again from this URL:
http://blogs.byte-force.com/files/folders/tinymce/default.aspx

Dongluan
7 Mar 2008, 1:35 AM
now it is possible to download!

I downloaded the Demo, but it doesn

xor
7 Mar 2008, 1:55 AM
I think the problem is that you are trying to open the demo right from the file URL. It doesn't work because of browser security restrictions (most likely). For demo to work you must open it from web server. Try my online demo link - it's exactly the same and it should work for you.

bloudon
7 Mar 2008, 6:30 AM
At line 427 in Ext.ux.TinyMCE.js an attempt is made to access an element with a class name of mceStatusbar:


var sbar = t.select( "td.mceStatusbar > div" ).first().first();

if( sbar ) {
h += sbar.getHeight() + 5;
sbar.setWidth( aw - 2 );
}

Because my editor's configuration disables the status bar I do not have an element with the mceStatusbar class in the generated HTML. This results in a 'no properties' error and an incomplete rendering of the editor.

It is recommended that the return value of select() be checked before attempting to dive deeper into the status bar.

bloudon
7 Mar 2008, 6:35 AM
Thanks for the update, by the way. The failure to honor configured editor height in IE6 is now fixed!

6epcepk
8 Mar 2008, 2:00 AM
Hi, thanks 4 ux!
Editor show correctly, but when i click on `image` button, i have error:

types[config.xtype || defaultType] is not a constructor
[Break on this error] Ext.ComponentMgr=function(){var all=new Ext.util.MixedCollection();var types={};...
Bold, italic etc working good.

cmendez21
8 Mar 2008, 1:05 PM
a simple question
does this plugin only works for a new window with tinymce ?

cause im trying to insert the editor to a form with multiple fields also but i get a lot of errors and i cant figure out how to make it work as a form field


:((

cmendez21
8 Mar 2008, 2:40 PM
after several test doing this with forms i found:

First you need the init() function for the editor even if you dont use it
this one on the head section on html page

then the code for the form is this :


<script type="text/javascript">
Ext.onReady(function(){
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
// campos
arealevel= new Ext.form.TextField({
fieldLabel: 'Area level ',
id:'arealevel',
name: 'arealevel',
selectOnFocus:true,
allowBlank:false,
anchor:'95%'
});
txtsec = new Ext.form.Checkbox({
fieldLabel: 'its active yes/no',
id:'area_sec',
name: 'area_sec',
inputValue:1,
anchor:'95%'
});
// forma de prueba
formpuestos = new Ext.FormPanel({
url:'_ipost.php',
baseParams: {task:'savenew'},
labelAlign: 'left',
labelWidth : 60,
width: 750,
height: 550,
title: 'Inner Tabs',
bodyStyle:'padding:5px',
name:'area_form',
id:'area_form',
layout: "fit",
items: [{
xtype: "tinymce",
id:'testcms',
name:'testcms',
tinymceSettings: {
theme : "advanced",
width: 534 ,
height: 380,
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 : true,
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"
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works CMS data ...</p>"
}],
buttons: [{
text: 'Save',
id: 'btnsave',
tooltip:'Save new record....!',
handler:saveformx
},{
text: 'Cancel',
id:'btncancel',
tooltip:'Cancel input data',
handler:function(){
formpuestos.form.reset();
}
},{
text: 'Close form',
id:'btnclose',
tooltip:'Cerrar Ventana',
handler:windowx
}]
});
formpuestos.render('center');
function saveformx(){
var testxxx = Ext.getCmp('testcms');
var pruebavalor = testxxx.getValue();
alert ("Value of the editor is : " + pruebavalor );
}
</script>

But now it render the editor but it doesn't render well see my pic
am i doing something wrong ?

Updated (also when browse on combos for values or color buttons appears like this)

Note: to make appear the status bar i changed this code in the plugin file (bold ones)


// TinyMCE Settings specified for this instance of the editor.
tinymceSettings: null,
// HTML markup for this field
defaultAutoCreate: { tag: "div", style: { overflow: "hidden" }, children: [{ tag: "textarea" }] },
// Default width
width: 200,
// Default height
height: 320,

6epcepk
8 Mar 2008, 8:28 PM
cmendez21
does your editor sent to backend script value? i set up name and id of editor, but vo velue sents to server..

cmendez21
8 Mar 2008, 9:54 PM
no the submission does not send the value i have to make it in a hidden field
thats was the only way for the moment (:|

xor
11 Mar 2008, 7:16 AM
cmendez21, can you post full code of your page here? I have to confess that i haven't tried it w/o windows, so it can behave quite weird.

Also, please describe in more details your statement about init() function.

cmendez21
11 Mar 2008, 11:19 AM
Hi Xor

Here's the code where i get the display issues
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Areas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="">
<link rel="stylesheet" type="text/css" href="lib/ext//resources/css/ext-all.css" />
<style>
body { padding: 10px; font-family: Arial; font-size: 12pt;}
h1 { margin-bottom: 0.3em; }
h2 { margin-top: 1em }
ul { list-style: disc outside; padding-left: 1.5em; }
</style>
<script type="text/javascript" src="lib/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/ux/miframe.js"></script>
<script type="text/javascript" src="lib/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="Ext.ux.TinyMCE.js"></script>

<script type="text/javascript">
tinyMCE.init({
// General options
docs_language : "en",
language : "en",
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "safari,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 options
theme_advanced_buttons1 : "template,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,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "styleprops,|,cite,abbr,acronym,del,ins,attribs",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
width: 534 ,
height: 380
});
</script>

<script type="text/javascript">
Ext.onReady(function(){
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
// campos
txtnivel = new Ext.form.TextField({
fieldLabel: 'Nivel',
id:'area_nivel',
name: 'area_nivel',
selectOnFocus:true,
allowBlank:false,
anchor:'95%'
});
txtsec = new Ext.form.Checkbox({
fieldLabel: 'Secuencia si/no',
id:'area_sec',
name: 'area_sec',
inputValue:1,
anchor:'95%'
});
// forma de prueba
formpuestos = new Ext.FormPanel({
url:'_ipost.php',
baseParams: {task:'savenew'},
labelAlign: 'left',
labelWidth : 60,
width: 650,
height: 395,
title: 'Inner Tabs',
name:'area_form',
id:'area_form',
layout: "fit",
autoScroll: true,
bodyStyle: 'padding:1px',
border: true,
bodyBorder: false,
items: [{
xtype: "tinymce",
id:'testcms',
name:'testcms',
tinymceSettings: {
theme : "advanced",
skin : "o2k7",
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 : true,
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",
width: 534 ,
height: 300
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works CMS data ...</p>"
}],
buttons: [{
text: 'Guardar',
id: 'btnsave',
tooltip:'Guardar nuevo registro....!',
handler:saveformx
},{
text: 'Cancelar',
id:'btncancel',
tooltip:'Cancelar captura',
handler:function(){
formpuestos.form.reset();
}
},{
text: 'Cerrar',
id:'btnclose',
tooltip:'Cerrar Ventana',
handler:windowx
}]
});
formpuestos.render('center');
formpuestos.doLayout();

function saveformx(){
var testxxx = Ext.getCmp('testcms');
var pruebavalor = testxxx.getValue();
alert ("valores de Editor ---- " + pruebavalor );
alert ("Guarda");
var prueba = formpuestos.form;
prueba.submit({
waitTitle:'Procesando informacion' ,
waitMsg:'Guardando datos capturados...',
params:{
method:'POST',
action:'Submit'
},
success: function(prueba, action) {
Ext.MessageBox.alert('Datos almacenados', 'Datos procesados exitosamente...!' + action.result.prueba);
//tinyMCE.get('fichaposto').setContent('');
prueba.reset();
//var mistabsxx = Ext.getCmp('mitabx');
//mistabsxx.activate('pruebatab');
},
failure: function(prueba, action){
Ext.MessageBox.alert('Error en informaci

xor
12 Mar 2008, 8:05 AM
Hi! Thank you for the code.

Looks like the problem occurs when we try to initialize the control in onReady event. It tries to init TinyMCE behind the scene and all of this causes my FF to fall into some sort of hang up. If I execute your code on button click - it works very well. I will investigate it further.

BTW, I don't think that "theme_advanced_resizing : true" feature would play nicely with my control. You'd better use Ext's native resizers.

w011117
21 Mar 2008, 11:33 AM
Hello,
Great code, just what I needed.
Why do I see tinyMCE resize in the window? It opens up at one size and then resizes itself to the extension component size. This takes about a second or so and is very evident to the user?

Thanks,
Timmer

xor
24 Mar 2008, 5:58 AM
Well, Timmer, it happens because TinyMCE instance is created during Ext component rendering so outer component is already visible. Editor renders itself for some noticeable time, and only after rendering is complete it fires event and I grab it. Maybe it's possible to set expected initial size, but I just didn't look for that.

w011117
24 Mar 2008, 8:45 AM
Thanks Andrew,
So you are suggesting that I set the Editor size to match the final size as part of the editor config?
Is this the size on the extension config or on TinyMCE config?

Thanks,
Timmer

xor
25 Mar 2008, 2:15 AM
If anything could do a trick, it would be a size in tinyMCE configuration object. Note that sizes could be a bit different - several pixels to height/width.

Please let me know about your progress.

w011117
25 Mar 2008, 4:06 PM
Thanks,
Adding the size to the tinyMCE config worked. I no longer see the editor resize.
Do you have a fix for the init error that was reported earlier?
I also have the issue that when I click on any buttons other than the Bold, Italic and so on.

Thanks,
Timmer

lvanderree
6 Apr 2008, 4:39 PM
Thanks for the plugin, it looks really promising.

However at the moment I have the same issues as already been described (if I understood them correctly).

I first need to initialise tinyMCE like this, or else I get lots of errors:



tinyMCE.init({
// General options
docs_language : "en",
language : "en",
mode : "exact",
theme : "advanced",
skin : "o2k7",
plugins : "safari,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 options
theme_advanced_buttons1 : "template,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
width: 534 ,
height: 380
});
besides, I dynamically load the content, which will probably require me to do some tricks with hidden fields which are used to transfer the content into the editor.
And finally when I want to save the content I should again transfer the content form the editor to the hidden field, in order to be able to save it.

Is that correct? Or is there some problem in my code?

You can take a look at the current state of my implementation at:
http://tejohnston.dynora.eu/backend_dev.php/assignmentparcel/edit/assignment_parcel_id/1 (http://tejohnston.dynora.eu/backend_dev.php/assignmentparcel/edit/assignment_parcel_id/1)
admin: admin
I use the plugin at the 'laboratory' tab-page.
Be aware that I use a generator, so the code won't be pretty to read...

xor
7 Apr 2008, 5:07 AM
Leon,

I have to confess that I wasn't thinking about using this control as part of HTML form. I already know that it doesn't work if you instantiate it in the document onReady handler. You have to manually init TinyMCE in this case. I plan to include static initialization function in the control itself. It will just call init() method of the editor and also turn on the internal flag that TinyMCE is already initialized.

As I understand you also experience another problem - included in the HTML form this control doesn't submit the value. Am I getting it right? Actually, control contains <textarea>, but this textarea have "display:none" set. It could be the case in some browsers, AFAIK. I'd also read TinyMCE docs to find out how is it supposed to work w/o ExtJS.

lvanderree
7 Apr 2008, 5:46 AM
Leon,

I have to confess that I wasn't thinking about using this control as part of HTML form. I already know that it doesn't work if you instantiate it in the document onReady handler. You have to manually init TinyMCE in this case. I plan to include static initialization function in the control itself. It will just call init() method of the editor and also turn on the internal flag that TinyMCE is already initialized.


That would be great. At the moment I am content with the 'hack' of initialising tinyMCE manually.



As I understand you also experience another problem - included in the HTML form this control doesn't submit the value. Am I getting it right? Actually, control contains <textarea>, but this textarea have "display:none" set. It could be the case in some browsers, AFAIK. I'd also read TinyMCE docs to find out how is it supposed to work w/o ExtJS.

You are correct that when I submit my form, the value in the tinyMCE editor does not get send in my case. However there is another problem as well; I don't see the any content which gets loaded either. I don't use the value property, since I get the content from my form dynamically, by using a datareader. All fields are shown, except for the tinyMCE-fields.

I had this (dynamic value-loading) working once, when I had implemented tinyMCE myself (without your plugin) and overruled the textfields (as shown here: http://extjs.com/forum/showthread.php?t=19101&highlight=tinymce ). But the strange this was that this was only working when I did not initialised tinyMCE. This would result in a very basic tinyMCE-editor, and I want to make use of tables, and so want to configure tinyMCE.

some code to show what I want:

a form defined by xtypes and using a datareader:


init : function() {

edit_page_laboratory_assignmentparcel1_form = new Ext.FormPanel({
title: 'Laboratory',

labelWidth: 120,
labelAlign: 'left',
frame: true,
bodyStyle: 'padding: 5px 5px 0;',

layoutConfig: {
},

reader: ds_edit_pages_laboratory.reader,
method: 'post',
url: '/backend_dev.php/assignmentparcel/ajaxEdit?assignment_parcel_id=1',
params: {
assignment_parcel_id: '1'
},

items: [
{
xtype: 'tinymce',
fieldLabel: '<span>Laboratory assignment</span>',

name: 'assignment_parcel[laboratory_assignment]',
width: 500,
height: 500,
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:''
,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'
}
}

] //end FormPanel.items
}); //end FormPanel


ds_edit_pages_laboratory.on('load', AssignmentparcelEditPagesLaboratory.data_loaded);
ds_edit_pages_laboratory.load({params: {filter: 1, 'filters[assignment_parcel_id]':1}});

} // end init


If I had other (non tinyMCE) fields, those where filled by this but the tinyMCE field stays empty after loading

lvanderree
8 Apr 2008, 5:48 AM
I found and resolved one issue, although I don't really understand it.

the tinyMCEfield got a property name and a method called getName(), you would expect this method to return the value of the name property, but apparently it does not... I don't know what it does return, but I think it is useless.

I now added the following method:



/** ----------------------------------------------------------
*/
getName : function(){
return this.name;
},


Which fixes the issue of the tinyMCEfield not getting the data from the dataReader when filling the form.

Now one issue remains: saving the data from the tinyMCEfield when submitting the form.

lvanderree
8 Apr 2008, 6:26 AM
Question. Am I the only one who is using this tinyMCEfield in a form? Cause I doubt anyone can submit the content of his field with the use of a form.

A hack can probably be to add an onSubmit event-handler which copies the content of the tinyMCEfield to a hidden field, which in its turn gets submitted with the form, since at the moment the complete field gets ignored when submitting.

The real problem however is why the entire field gets ignored when submitting the form, and at the moment I haven't got a clue. I can see in firebug that when I submit the form, not even the fieldname (without a value) is transmitted. Any help/tips/solutions?? are appreciated.

dddu88
8 Apr 2008, 6:50 AM
Hi, I downloaded the 2 zip files from http://blogs.byte-force.com/files/folders/tinymce/default.aspx, but they both can not be opened because they are not valid archive, any idea about what happened? I like to try them on my machine.

Thanks

Dave

xor
9 Apr 2008, 12:40 AM
Dave,

It's strange. I've just tried to download and unpack files and it went w/o any problem.

xor
9 Apr 2008, 3:20 AM
Leon,

I've updated the component to the v0.3. Hope it can solve your problem.

1. At the start of the page you have to manually call Ext.ux.TinyMCE.initTinyMCE(). Do it instead of your usual tinyMCE initialization, because it sets some internal flags.
2. Specify "name" on the rich-text field. This is the name which will be used during submit.
3. Before submit use either tinyMCE.triggerSave() or syncValue() method of our compoenent.

For working example see: http://blogs.byte-force.com/xor/tinymce/test.onready.html.

lvanderree
9 Apr 2008, 7:09 AM
XOR!!!! You are a hero!

It is working.

Can I ask why the syncValue is necessary? I assume that it transfers the content of the tinyMCE editor to a hiddenField, but can't it be called automagically when the form is submitted, without requirering me to add an submit-event-handler-method which calls this method.

Maybe I can call the syncValue method from the onBlur or onChange event of the tinyMCE editor, I think I would prefere that above calling the method when I submit the form.

I will post my live-demo soon. (need to make some changes to my generator first)

lvanderree
9 Apr 2008, 2:29 PM
I've got my live-demo at:
http://tejohnston.dynora.eu/assignmentparcel/edit/assignment_parcel_id/1
(login admin:admin)

The tinyMCE editor is now only placed in the laboratory-tab, it doesn't really look nice yet, but it works!

However, when you open this parcel-assignment from the overview, things go wrong.
when you visit:
http://tejohnston.dynora.eu/
click on an assignment which has parcels, and then from the menu on the left select a parcel
(sorry it all is work in progress... so it is somewhat cumbersome at the moment)

I often get the error t.win.document is null.

I think it also happens when I look at one editor and open a new window with a second editor.

I can create a smaller test-page if you really want to take a look at it. This current page is very bloated with ugly code... (from generators which aren't finished)

vironitronox
10 Apr 2008, 12:28 AM
Hey,

firts of all I'd like to say that the extension works like a charm. I'v got one little problem in FireFox though. When I save my textarea, I get the following error in firebug:



t.win.document has no properties
_init()tiny_mce.js (line 1)
_init(Object editorId=ext-gen301 id=ext-gen301, Object format=html get=true)tiny_mce.js (line 1)
_init()tiny_mce.js (line 1)
_init(Object format=html get=true)tiny_mce.js (line 1)
getValue()Ext.ux.TinyMCE.js (line 149)
(no name)(Object events=Object transId=false timeout=30000, Object tId=9 status=200 statusText=OK)form_project_edit... (line 628)
fire()ext-all-debug.js (line 1504)
fireEvent()ext-all-debug.js (line 1201)
handleResponse(Object tId=9 status=200 statusText=OK)ext-all-debug.js (line 5205)
getViewWidth(Object conn=XMLHttpRequest tId=9, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] var tinymce={majorVersion:'3',minorVersion:'0.6.2',releaseDate:'2008-04-07',_ini...


In IE this error doesn't show and everything works ok.

Any thoughts on how to resolve this problem?

My code:


var prj_desc = new Ext.ux.TinyMCE({
fieldLabel: 'Beschrijving',
name: 'prj_desc',
id: 'prj_desc',
width: 540,
height: 200,
labelStyle: 'font-weight:bold;',
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,|,search,replace,|,bullist,numlist,|,link,unlink,code,|,sub,sup,|,charmap",
theme_advanced_buttons2 : "",
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"
}

});

xor
10 Apr 2008, 1:42 AM
Can I ask why the syncValue is necessary? I assume that it transfers the content of the tinyMCE editor to a hiddenField, but can't it be called automagically when the form is submitted, without requirering me to add an submit-event-handler-method which calls this method.

Maybe I can call the syncValue method from the onBlur or onChange event of the tinyMCE editor, I think I would prefere that above calling the method when I submit the form.

Well, this is how tinyMCE works. Being in the same situation Ext's html editor syncs on every operation. I think that tinyMCE guys decided that this could be a performance impact.

I was thinking yesterday if we could do it automatically at some point. I don't see a way to sync it on form submit, because it's not clear that component belongs to a form that would be submitted somday.

onBlur is good idea, though i'm not sure it would be bullet-proof reliable. I would appreciate if you can try in your app and see if it's working good or not.

lvanderree
10 Apr 2008, 1:48 AM
No problem, I can do some testing, but i wasn't 100% sure either if this will be bullet proof. I can see that using the onChange event can have a performance impact, but we can try that as well.

I've implemented onBlur event handlers for comboboxes in forms, to check if the user-defined-data which has been inserted, really exists at the server-side before submitting the form (so if the value in the combo-field is a value from the drop-down list). If not it stops submitting the form and first pops-up a dialog with the ability to add this new value to the list.

So my guess is it will be possible for the tinMCE field as well.

I'll be back ;)

xor
10 Apr 2008, 3:02 AM
Guys, you have similar problems, but now I don't know the reason. Only idea I have for a moment is that you call getValue() or syncValue() before the editor fully initializes. Could this be the case?

I would like to resolve this, and this would be great if you can make smaller testbed (with all scripts in debug flavor, including tinyMCE).

lvanderree
10 Apr 2008, 4:12 AM
I will make a smaller test case soon (inc. dev-versions), with the onblur-test included.
I first have to finish some other issues regarding my application at the moment, but it can be expected today/tonight...


I don't think I am calling the syncValue method before there is an instance of the tinyMCEeditor, since the syncValue method is called from inside my submit-button.click method. However it is defined in the extjs-config style, so maybe because this is parced it is called by extjs somehow... We'll see when the dev-version is there.

lvanderree
10 Apr 2008, 3:42 PM
Unfortunately I am not going to make it this night, tomorrow will be another busy day, I'll do my best and try to make it in the morning, but can't promise anything...

uros
14 Apr 2008, 4:24 AM
First let me say: Great Ext-ension!
It works fine with TinyMCE 3.01, as it's used in the demo. But recently tinyMCE got as far as 3.06 and has some issues with this extension:

- i need to add tinyMCE.init({}) call before anything else (before Ext.onReady() with included call to Ext.ux.TinyMCE.initTinyMCE();

- popups are standalone windows (not Ext's inline popups)

- many config options in tinymceSettings break the code

There were some minor but important changes in tinyMCE 3.02 and later (http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10384), I hope next version of this extension could support later versions of tinyMCE 3.

xor
14 Apr 2008, 4:38 AM
Uros, thank you for pointing me out. I'll try to hack with it as soon as possible. (Though it's hard to say when).

lvanderree
14 Apr 2008, 5:42 AM
I can agree on that (it is hard to say when),

I finally had some time to create a simple example page (with full-debug includes), you can see it at:
http://tejohnston.dynora.eu/tiny-panel.html
It uses a datastore,
can save the data (if I had implemented it at the server-side as well)
and shows several extjs possibilities.

It also shows a new error:


t.select("td.mceStatusbar > div").first() has no properties
onResize()Ext.ux.TinyMCE.js (line 206)
apply()ext-base.js (line 9)

chrome://firebug/content/blank.gif var sbar = t.select( "td.mceStatusbar > div" ).first().first();


However this does not result in the original error reported, by me and vironitronox
I think I know how to reproduce that as well in a simple overview, and this will be the beginning of that i will try to post a new version with our error probably tomorrow... (see first line)

xor
15 Apr 2008, 12:34 AM
I think error happens because your editor doesn't have status bar. I was already told that my code has this bug, but I completely forgot.

lvanderree
15 Apr 2008, 2:00 AM
Sorry could have figured that out myself as well :S

I fixed it like this:



var mceStatusbar = t.select( "td.mceStatusbar > div" );
if ( mceStatusbar )
{
var mceStatusbar_first = mceStatusbar.first();
if ( mceStatusbar_first )
{
var sbar = mceStatusbar_first.first();
if( sbar ) {
h += sbar.getHeight() + 5;
sbar.setWidth( aw - 2 );
}
}
}


I will commit the other bug-proof today

lvanderree
15 Apr 2008, 5:29 AM
As you can see here, the bug related to not having a statusbar has been resolved:

http://tejohnston.dynora.eu/tiny-panel.html

Now for the bug mentioned before, take a look at:

http://tejohnston.dynora.eu/tiny-loader.html

This page loads all tineMCE scripts, but does not show a tinyMCE-editor. You can press the add-panel-text to dynamically load a tinyMCE editor (actually the page mentioned at the top, but now in a tab-panel) et voila: all kind of errors appear.

Ps the error which shows up is:



Ext.EventObject has no properties
http://tejohnston.dynora.eu/sfExtjs2Plugin/extjs/ext-all-debug.js
Line 1605
Ext.EventObject has no properties
http://tejohnston.dynora.eu/sfExtjs2Plugin/extjs/ext-all-debug.js
Line 1605
Ext.DomQuery has no properties
http://tejohnston.dynora.eu/sfExtjsThemePlugin/js/ext.ux.tinymce/Ext.ux.TinyMCE.js
Line 100

joao_candido
15 Apr 2008, 5:44 AM
Hi Andrew.

I

joao_candido
15 Apr 2008, 6:16 AM
Ok, I made it works fine, but I

xor
16 Apr 2008, 6:43 AM
Hi!



http://tejohnston.dynora.eu/tiny-loader.html

This page loads all tineMCE scripts, but does not show a tinyMCE-editor. You can press the add-panel-text to dynamically load a tinyMCE editor (actually the page mentioned at the top, but now in a tab-panel) et voila: all kind of errors appear.


I could be wrong here, because I haven't used panel with autoloader yet, but I afraid you have too much extra stuff in file being loaded. Actually, this is normal HTML file with scripts, css files and even Ext.onReady. Browser reaction on inserting this as innerHTML is simply unpredictable.

I think you don't need any HTML here - only JS to configure your form. So load the script, get config object and render to the form.

lvanderree
16 Apr 2008, 6:51 AM
Hi!

I could be wrong here, because I haven't used panel with autoloader yet, but I afraid you have too much extra stuff in file being loaded. Actually, this is normal HTML file with scripts, css files and even Ext.onReady. Browser reaction on inserting this as innerHTML is simply unpredictable.

I think you don't need any HTML here - only JS to configure your form. So load the script, get config object and render to the form.

That is definitely one of my goals for the future, but at the moment that will take to much time to implement in my generator. What you describe is exactly what I have to figure out though, loading a script dynamically and getting its config-object so it can be rendered. If you have found examples of this, please tell me.

However the only problem I currently have in my current set-up is the error which shows up when I use a tinyMCE editor in a field. Everything else (all other fields) work fine.

xor
16 Apr 2008, 7:30 AM
I used to load scripts with jQuery's getJSON method (http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback). It's very convenient to use.

There is also different "using" approaches to script loading, but I think it isn't your case. You can find kind of discussion here (http://blogs.byte-force.com/xor/archive/2008/04/16/1758.aspx).

lvanderree
16 Apr 2008, 9:23 AM
Actually this second url, with the article from your blog, looks just like the thing I wanted to know! Thanks.

This isn't the entire story, since I still need to figure out a way to make the main-page aware of the content in the loaded js and at the moment I am too busy to figure that out right now, but this definitely is going to help me.

Thanks.

kai5263499
17 Apr 2008, 5:52 AM
I love this editor but when I'm having a problem when submitting a second instance of it, I get a t.win.document error. Any ideas on how I can completely reset the editor to be used in multiple instances?

genius3k
20 Apr 2008, 4:39 PM
It is nice~!:D:">

lvanderree
23 Apr 2008, 5:29 PM
I used to load scripts with jQuery's getJSON method (http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback). It's very convenient to use.

There is also different "using" approaches to script loading, but I think it isn't your case. You can find kind of discussion here (http://blogs.byte-force.com/xor/archive/2008/04/16/1758.aspx).

Off topic, but Thanks for your work on this as well, the second url, was exactly what I needed! I included using.js in my project and can now lazy load javascripts! if you want more info please ask, but don't wanna ruin this thread...

xor
25 Apr 2008, 12:59 AM
I love this editor but when I'm having a problem when submitting a second instance of it, I get a t.win.document error. Any ideas on how I can completely reset the editor to be used in multiple instances?

In my application I have two editors on two different tabs of tabbed dialog window. Works quite well. There could be differences with your scenario though:
1. I don't use form submit. Instead I read values from fields with getValue().
2. I don't create fields in onReady handler.

ludoo
29 Apr 2008, 3:49 AM
About your post http://extjs.com/forum/showthread.php?p=134811#post134811

Can you explain why the classic test.onready.html works in a local url (file:///...)
and the window demo (index.html) NOT ?

thanks

cmarin
30 Apr 2008, 2:59 PM
I'd really appreciate any help I can get with a problem I'm facing. The issue is that the bottom of the TinyMCE editor is getting cutoff in Firefox 2 and 3 (but not, strangely enough, in IE 7). I've tried modifying the height in both tinymceSettings and in the field itself but nothing seems to work. Also tried adding and removing both TinyMCE and EXT based resizers but that didn't work. Finally, I tried playing with the padding but that didn't seem to help either. When I try entering content and it exceed the height of the surrounding fieldset it keeps going down into the lower fieldset and goes on top of it. For some reason that height doesn't seem to be calculated correctly. Anyone have any ideas?



{
xtype:'fieldset',
collapsible:true,
autoHeight:true,
defaults: {width: 310},
defaultType:'textfield',labelSeparator: ' ', items :[
{
xtype:'datefield',
id:'content_field_1_date',
name:'content_field[1][date]',
width:'10',
format:'Y-m-d',
fieldLabel:'Date*',
listeners:{
blur: updateViz,
scope: this },
allowBlank:false
},
{
xtype: "tinymce",
fieldLabel: "Details*",
id: "content_field_2_text",
name: "content_field[2][text]",
width: 600,
height: 280,
cls:'tinymce',
value: 'test',
tinymceSettings: {
onchange_callback : "tinyMCEChange",
skin : "o2k7",
theme : "advanced",
plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,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,|,formatselect,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",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons4 : "moveforward,movebackward,absolute,|,styleprops,|,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,|,print,|,ltr,rtl,|,styleselect,fullscreen",
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"
}
} ]
},
{
xtype:'fieldset',
collapsible:true,
autoHeight:true,
defaults: {width: 310},
defaultType:'textfield',labelSeparator: ' ', title: 'Contact 1',
items :[
{
id:'content_field_3_string',
name:'content_field[3][string]',
width:420,
fieldLabel:'Heading',
allowBlank:true,
listeners:{
blur: updateViz,
scope: this },
value: 'test'
}

cmarin
30 Apr 2008, 3:07 PM
Not sure if this will help anybody but I was running into an issue that others seem to have in that I needed to automatically sync the value of the TinyMCE editor with the hidden field, and at the same time use that value elsewhere. In my case I needed to dynamically update another part of the application with the text that had been entered into TinyMCE. The catch for me was that my app will have lots of these editors, with dynamically generated ids, and I needed a way to figure them out at runtime. This is the code that helped solve both those issues:


function tinyMCEChange(instance) {
tinyMCE.triggerSave();
console.debug(document.getElementById(instance.id).parentNode.id);
console.debug(instance.getContent());
}

xtype: "tinymce",
fieldLabel: "Details*",
id: "content_field_2_text",
name: "content_field[2][text]",
width: 600,
height: 280,
cls:'tinymce',
value: 'test',
tinymceSettings: {
onchange_callback : "tinyMCEChange",
skin : "o2k7",
theme : "advanced",

marco76
5 May 2008, 2:57 AM
This editor is very excellent but I get an error in thi situation.
I have a formpanel with TinyMCE.
I submit the formpanel and destroy it.All works well
The error is when I create a new formpanel with another TinyMCE and I try to submit it.
I get a t.win.document error. Any ideas on how I can solve this error?
Many Thanks

xor
5 May 2008, 2:57 AM
About your post http://extjs.com/forum/showthread.php?p=134811#post134811

Can you explain why the classic test.onready.html works in a local url (file:///...)
and the window demo (index.html) NOT ?

thanks

I afraid, I can't explain it. :) I think it's somehow related to the tinyMCE script loading mechanism. It just don't work and I didn't had time to dig for the reason.

xor
5 May 2008, 8:27 AM
Guys, please check newer version available here:
http://blogs.byte-force.com/media/g/tinymce/default.aspx

lvanderree
8 May 2008, 10:43 AM
Currently a little busy, with other parts of my project, but will give my feedback very soon. Great to see you continue to improve this plugin! Thanks

w011117
12 May 2008, 9:46 AM
Xor,
This is a great plugin, but I am having a problem when I scroll in a form window.
I have attached a image to show the results of scrolling in the editor whether I use a scroll-wheel or down arrow I get the same results....

Any ideas?

Thanks
Timmer

xor
13 May 2008, 12:11 AM
Timmer,

IMHO, it looks more like a browser glitch. Have you tried this in other browsers?

Best,
XOR

cybertaz
18 May 2008, 10:56 PM
Hello,
Great extension ... but I have some problems with the new version, I get the following error:

this.ed.theme.resizeTo is not a function

I have a FormPanel where the editor has the anchor: "100% -50" and I get this error when the form is displayed.

I do have the advanced theme in the themes folder, I'm not sure what is going on. Please help.

Thank you for your time.

xor
18 May 2008, 11:37 PM
Great extension ... but I have some problems with the new version, I get the following error:

this.ed.theme.resizeTo is not a function

New version requires also version 3.0.7 of TinyMCE itself. This method (resizeTo) was just intrdouced, so if you use older TinyMCE it won't work.

cybertaz
19 May 2008, 1:28 PM
I actually have tinyMCE version 3.0.8 ... I downloaded and installed it yesterday... maybe there are some include files that I'm missing..?? Any other ideas that I could try? Thank you for your time and help.

xor
19 May 2008, 11:43 PM
Hi!

I've just checked my examples with 3.0.8. It works, including test with anchors that you've specified. Please try to make a failing test case on base of one of my examples.

At the same time, I have to admit that first-time resizing works in strange way (though, works w/o errors). I'll hack it when I'd have time.

cnelissen
21 May 2008, 10:58 AM
Looks like the ext popups do not want to work when the field is initialized inside of onready... Even Example #1 on your site does not use the inline popups... Any ideas of why these dont work when initialized this way?

P.s - Great extension, saving me lots of headaches already.

craigharmonic
21 May 2008, 10:52 PM
At line 427 in Ext.ux.TinyMCE.js an attempt is made to access an element with a class name of mceStatusbar:


var sbar = t.select( "td.mceStatusbar > div" ).first().first();

if( sbar ) {
h += sbar.getHeight() + 5;
sbar.setWidth( aw - 2 );
}

Because my editor's configuration disables the status bar I do not have an element with the mceStatusbar class in the generated HTML. This results in a 'no properties' error and an incomplete rendering of the editor.

It is recommended that the return value of select() be checked before attempting to dive deeper into the status bar.

I had a similiar issue when not using a toolbar:

tbar has no properties
/lib/extExtensions/Ext.ux.TinyMCE.js
Line 101

If you do a similar check as the suggestion above all works fine, perhaps this needs adding to the next version?



var tbar = Ext.get( Ext.DomQuery.selectNode( "#" + this.ed.id + "_tbl td.mceToolbar" ));
if (tbar) {
var tbars = tbar.select( "> table.mceToolbar" );
Ext.DomHelper.append(
tbar,
{ tag: "div", style: { overflow: "hidden" }}, true
)
.appendChild( tbars );
}

craigharmonic
22 May 2008, 10:30 PM
I am having a problem getting the HTML Editor to resize in a split frame. When I drag the split frame left or right I want my editor to resize accordingly.

I have set both the width of the editor and the tinyMCE config to 100% and the initial size works fine. Then when I drag the frame splitter the tinyMCE element does not resize. What's the best solution for this?

Is there a resize event for this UX that I can use? (The idea would be to add a listener on the tinymce object that listens for moving of the split and calls resize).

craigharmonic
22 May 2008, 11:03 PM
Also having another issue with the editor.
I load it using metaForm (http://extjs.com/forum/showthread.php?t=25551) which all seems to work great except I get 2 errors:

this.getDoc() has no properties
http://127.0.0.1/Conductor/Conductor/lib/tiny_mce/tiny_mce.js
Line 1

e has no properties
http://127.0.0.1/Conductor/Conductor/lib/tiny_mce/tiny_mce.js
Line 1

I have followed the examples and tried placing the following code before my onReady event:


// Initialise the TinyMCE editor for use by any of the components
Ext.ux.TinyMCE.initTinyMCE();

But this didn't help, possibly because I am using meta form. Any help would be greatly appreciated!

Apart from the 2 errors (and the resize issue above) - which I think has to do with how I am creating the editor, this is a great extension. Thank you!

Dumbledore
26 May 2008, 2:25 AM
i have a problem when rendering components in Ext.onReady...

I call Ext.ux.TinyMCE.initTinyMCE() before Ext.onReady. the Editor will be rendered but with the wrong configuration...

With first call of Ext.ux.TinyMCE.initTinyMCE() the editor(s) will be initialized with the standard configuration. After that tmceInitialized will be true.

Then comes the calls of my xtypes... But tmceInitialized is true from the first call an the editors will not be initialized with the right language...

Next Problem:

When use the Spellchecker-Plugin the misspelled word are marked for a second and will be overwrited when call form.isDirty().

Any ideas?

Bye, Dumbledore

AVerta
26 May 2008, 8:04 PM
Hi,

I

Dumbledore
26 May 2008, 8:40 PM
Hi AVerta,

your must sync the value before submit via syncValue() or tinyMCE.triggerSave();

Bye, Dumbledore

Dumbledore
27 May 2008, 12:09 AM
Hi,

after study the source and the documentation of tinyMCE i modified this extension for my personal requirements.

I implement a isDirty() Funtion:


/**
* own isDirty() Function - maps to the TinyMCE-isDirty()
*/
isDirty : function() {
if(this.disabled) {
return false;
}

return this.ed.isDirty();
}

and i inserted in setValue following to get the isDirty() working:


/** ----------------------------------------------------------
*/
setValue : function( v ){
this.value = v;
if( this.rendered )
this.withEd( function(){
this.ed.undoManager.clear();
this.ed.setContent( v === null || v === undefined ? '' : v );

// rb - patch for handling isDirty()
this.ed.startContent = this.ed.getContent({format : 'raw'});

this.validate();
});
},


perhaps someone find it usefull...


Bye, Dumbledore

xor
27 May 2008, 1:55 AM
Hi!

Sorry, guys, it was a long time since my last reply.


...
If you do a similar check as the suggestion above all works fine, perhaps this needs adding to the next version?

Current version uses native TinyMCE's resize method so all such issues should be gone automatically.

xor
27 May 2008, 2:07 AM
I am having a problem getting the HTML Editor to resize in a split frame. When I drag the split frame left or right I want my editor to resize accordingly.

I have set both the width of the editor and the tinyMCE config to 100% and the initial size works fine. Then when I drag the frame splitter the tinyMCE element does not resize. What's the best solution for this?

Is there a resize event for this UX that I can use? (The idea would be to add a listener on the tinymce object that listens for moving of the split and calls resize).

All resizing is inherited from Ext.BoxComponent, so it should work as other elements. For an instance, standard "resize" event should be fired. I've checked resizing to the "fit" layout (works) and vertical resizing with Ext's resizer. It was working as expected. If this problem still persist, can you provide me with test case on the base of my example files?

Just as a notice, TinyMCE's built-in resizing mechanism is not supported. Use Ext instead.

xor
27 May 2008, 2:31 AM
i have a problem when rendering components in Ext.onReady...

I call Ext.ux.TinyMCE.initTinyMCE() before Ext.onReady. the Editor will be rendered but with the wrong configuration...

With first call of Ext.ux.TinyMCE.initTinyMCE() the editor(s) will be initialized with the standard configuration. After that tmceInitialized will be true.

Then comes the calls of my xtypes... But tmceInitialized is true from the first call an the editors will not be initialized with the right language...
Have you tried to pass right configuration to initTinyMCE() function? It accepts the same settings object as TinyMCE itself.

xor
27 May 2008, 2:35 AM
after study the source and the documentation of tinyMCE i modified this extension for my personal requirements.
...


I've added it to the trunk.

BTW, have you checked - maybe it's enough to simply set startContent to the value of setValue parameter?

xor
27 May 2008, 2:39 AM
Also having another issue with the editor.
I load it using metaForm (http://extjs.com/forum/showthread.php?t=25551) which all seems to work great except I get 2 errors:...

Can you reproduce it on the base of one of my test files?

Dumbledore
27 May 2008, 2:58 AM
I've added it to the trunk.

BTW, have you checked - maybe it's enough to simply set startContent to the value of setValue parameter?

yes i check it, but it won

xor
27 May 2008, 3:11 AM
I've updated the component, grab it here:
http://blogs.byte-force.com/media/g/tinymce/default.aspx

* Fixed issue with [non]inline dialogs when used in onReady().
* Added isDirty().

basti
27 May 2008, 5:58 AM
hi!

anyone used the external toolbar feature?


theme_advanced_toolbar_location : "external",

AVerta
27 May 2008, 7:37 AM
Hi Dumbledore,

Thanks for your help. My code works now.

AVerta

yaroslav
27 May 2008, 11:17 AM
Thanks for this great extension!
I found bug in ИЕ6-7.
When put on layout 2 editors my IE crashes

items: [{
xtype: "tinymce",
fieldLabel: "Rich text",
id: "richText1",
name: "richText1",
width: 600,
height: 200,
tinymceSettings: {
theme : "advanced",
...
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
}, {
xtype: "tinymce",
fieldLabel: "Rich text",
id: "richText2",
name: "richText2",
width: 600,
height: 200,
tinymceSettings: {
theme : "advanced",
...
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
}]
Temporaty I removed this from function Ext.ux.TinyMCE > onRender

this.ed.onActivate.add( this.focus.createDelegate( this, [ false, false ], false ));
How to fix this correctly?

Dumbledore
27 May 2008, 11:55 PM
is here a css-guru? In my opinion we need a custom style for the TinyMCE Dialog-Buttons. The buttons are so different to the Ext.Buttons and a little bit ugly when rendering inside a Dialog...

xor
28 May 2008, 12:57 AM
...
Temporaty I removed this from function Ext.ux.TinyMCE > onRender

this.ed.onActivate.add( this.focus.createDelegate( this, [ false, false ], false ));
How to fix this correctly?

Yaroslav, let's for now proceed with your solution. Focusing on editor activation anyway was working not very well. And I'm not sure if it's necessary at all.

xor
28 May 2008, 1:02 AM
is here a css-guru? In my opinion we need a custom style for the TinyMCE Dialog-Buttons. The buttons are so different to the Ext.Buttons and a little bit ugly when rendering inside a Dialog...

Dumbletore, nothing really "guruish" is necessary for this. Take o2k7 skin as a base and with help of Firebug twik it. Firebug shows even line in css file where specific class resides. So it's very simple to find things to be modified. Most likely, you'll need only to modify toolbar backgrounds. Dialog also could be modified to be more Ext-like.

Pagebaker
30 May 2008, 12:23 AM
First of all, very nice component!

I've made a small addition to the windowmanager which allows me to add regular panels/grids what ever to the popup window, instead of loading content in an iframe.



open : function( s, p ) {

var items = s.items || [{
xtype: "iframepanel",
defaultSrc: s.url || s.file
}];

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;

var win = new Ext.Window(
{
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: items
});

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


Now you can create a window this way


tinyMCE.activeEditor.windowManager.open({
title : 'My File Browser',
width : 420, // Your dimensions may differ - toy around with them!
height : 400,
resizable : "yes",
inline : "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no",
items: [
new Ext.Panel({
field: field_name
})
]
}, {
window : win,
input : field_name
});

xor
30 May 2008, 5:17 AM
Pagebaker,

I glad you like this component. :) Can you explain in more details what are you getting with this scenario? Does it somehow differ from simply creating Ext.Window with your content?

Pagebaker
2 Jun 2008, 4:40 AM
Pagebaker,

I glad you like this component. :) Can you explain in more details what are you getting with this scenario? Does it somehow differ from simply creating Ext.Window with your content?

Well i was building a custom file/image manager callback. Default tiny wants you to load it in an iframe. Since I'm using Ext I don't want my dataview etc be loaded into an iframe.

mschering
3 Jun 2008, 3:49 AM
I like this extension very much, but there are some problems.

The toolbar doesn't update. When you put the cursor into a heading the toolbar isn't set to the heading. Same for fonts, bold italic etc.

The styles combo doesn't work. It generates an error c = not defined. This is all tested in firefox 3.0 beta 5. It all works in the normal tinymce demo but it doesn't work in the Ext.ux demo.

Dumbledore
3 Jun 2008, 11:49 PM
here is a small fix for a z-index problem of contextmenus in TinyMCE when use the IE

in createDropMenu and createColorSplitButton you must change:


Ext.fly( 'menu_' + this.id ).setStyle( "z-index", 12000 );

in


Ext.fly( 'menu_' + this.id ).setStyle( "z-index", 200001);

Without that you can

xor
4 Jun 2008, 1:45 AM
The styles combo doesn't work. It generates an error c = not defined. This is all tested in firefox 3.0 beta 5. It all works in the normal tinymce demo but it doesn't work in the Ext.ux demo.

Thank you for this bug report. Problem is on the line 94 - I chosen the wrong event. It should look like this:

this.ed.onBeforeRenderUI.add( function( ed, controlManager ){
// Replace control manager
ed.controlManager = new ControlManager( this, ed );
// Change window manager
ed.windowManager = new WindowManager( this.ed );
}.createDelegate( this ));

xor
4 Jun 2008, 1:46 AM
here is a small fix for a z-index problem of contextmenus in TinyMCE when use the IE...

Thanks! Integrated it into the trunk.

mschering
4 Jun 2008, 2:42 AM
What about the toolbar that isn't updated?

xor
5 Jun 2008, 12:45 AM
What about the toolbar that isn't updated?

This was caused by the same reason. So change the event and both styles combo would work, and appropriate buttons should be highlighted.

mschering
5 Jun 2008, 4:00 AM
Thank you for this bug report. Problem is on the line 94 - I chosen the wrong event. It should look like this:

this.ed.onBeforeRenderUI.add( function( ed, controlManager ){
// Replace control manager
ed.controlManager = new ControlManager( this, ed );
// Change window manager
ed.windowManager = new WindowManager( this.ed );
}.createDelegate( this ));


Yes this works, only now I don't have Ext windows anymore when I insert a link for example.

mschering
5 Jun 2008, 4:02 AM
I changed it into two events and now it works:


this.ed.onBeforeRenderUI.add( function( ed, controlManager ){
// Replace control manager
ed.controlManager = new ControlManager( this, ed );
// Change window manager
//ed.windowManager = new WindowManager( this.ed );
}.createDelegate( this ));

this.ed.onPostRender.add( function( ed, controlManager ){
// Replace control manager
//ed.controlManager = new ControlManager( this, ed );
// Change window manager
ed.windowManager = new WindowManager( this.ed );
}.createDelegate( this ));

xor
5 Jun 2008, 4:08 AM
It's strange, because i've tested it here and it was working as expected. How do you work with the editor? Is it created in onReady event, or later in separate window. Maybe you can reproduce your situation in a test file (like one of mine)?

mschering
5 Jun 2008, 7:17 AM
It's hard to reduce it to a simple test because it's implemented in a very large application.

I use it in a border layout and it's created in an onReady event.
I work with Firefox 3 beta 5 on Ubuntu linux.

albeva
12 Jun 2008, 8:34 AM
Why are titles for popup windows missing? is there a way set them?

xor
17 Jun 2008, 2:40 AM
Why are titles for popup windows missing? is there a way set them?

Just tried several TinyMCE's windows - tables, html editor. All of them has correct titles. Even localized.

billeatman
18 Jun 2008, 3:06 PM
How do I simply replace textareas in an iframe, but use ext windows instead of popups. I'm very new to using this plugin. I'm not wanting to use it in a panel.

Thanks in advance

xor
19 Jun 2008, 12:29 AM
How do I simply replace textareas in an iframe, but use ext windows instead of popups. I'm very new to using this plugin. I'm not wanting to use it in a panel.

My component currently doesn't support binding to an existing element (textarea). So you can only use TinyMCE itself with window manager from Ext.ux.TinyMCE. Look at the source code it should be pretty simply adapt the code for your needs.

Denny Crane
21 Jun 2008, 4:00 PM
I have the editor working in a popup window. When I click on buttons that activate various dialogs, I _sometimes_ get broken dialogs that look something like this (see attached) insert image dialog. Sometimes it shows the right dialog, see 2nd attachment.

It seems to get in a funky state. Click "insert image" button, and it shows weirdness like in the 1st attachment. But it seems to cycle between the various dialog templates - sometimes it's the insert link dialog (but screwed up) and sometimes it's one of the others. Then it seems to get it right and gets it right from that point on. If I bring up the editor again, it's right from that point on, too.

What I'm doing is just clicking on the insert image button, seeing the bad dialog, closing that, clicking on insert image button again...

TinyMCE version 3.0.7
Ext version 2.1
Ext.ux.TinyMCE version 0.5
Firefox 3 release

xor
23 Jun 2008, 12:34 AM
Hi!

I'm not able to reproduce it on my box, but it looks like that browser sometimes can't get some file (possible script related to localization) from server. Please try to monitor the process with firebug. I've tried opening image insert dialog several times in a line and every time there were 9 files downloaded from server (according to "net" tab of firebug). If my idea is right, then sometimes you should be getting errors for some files.

It could happen if, for example, you have your site served by IIS on XP and you open it from another box (i.t. not local request). In this case IIS allocates very limited number of worker threads and some requests got blocked.

Cravi
23 Jun 2008, 5:31 AM
Hi,
this is really a nice extension. But I have a problem with the "collapsible" function of Ext.
If I collapse the panel and reopen it the textarea and all buttons arent't editable or clickable.
And in firebug I get the Error:

Error: t.win.document is null
Source File: http://localhost:8080/TinyMCE/tiny_mce/tiny_mce.js
Line: 1

Does anyone know this prob?

Greetings Cravi

Denny Crane
23 Jun 2008, 6:53 AM
Hi!

I'm not able to reproduce it on my box, but it looks like that browser sometimes can't get some file (possible script related to localization) from server. Please try to monitor the process with firebug. I've tried opening image insert dialog several times in a line and every time there were 9 files downloaded from server (according to "net" tab of firebug). If my idea is right, then sometimes you should be getting errors for some files.

It could happen if, for example, you have your site served by IIS on XP and you open it from another box (i.t. not local request). In this case IIS allocates very limited number of worker threads and some requests got blocked.

GET en.js 200 OK
GET editor_template.js 200 OK
22x GET editor_template.js 200OK
GET en.js 200 OK

And still have the problem.

The site is served by Apache on Ubuntu 8.04 linux.

albeva
23 Jun 2008, 10:09 AM
Just tried several TinyMCE's windows - tables, html editor. All of them has correct titles. Even localized.
Not for me
http://fbdevzone.com/images/stuff/tinymce-missing-window-titles.jpg

TinyMCE 3.1.0.1
Ext.TinyMCE 0.5
Ext 2.1

albeva
23 Jun 2008, 10:11 AM
Just tried several TinyMCE's windows - tables, html editor. All of them has correct titles. Even localized.
Not for me
http://fbdevzone.com/images/stuff/tinymce-missing-window-titles.jpg

TinyMCE 3.1.0.1
Ext.TinyMCE 0.5
Ext 2.1

cnelissen
24 Jun 2008, 2:03 PM
Found a bug using IE 7. This is even broken in your examples online. If you select text and hit the link button to create a link, (notice that the text is now deselected)... Now type in your link and hit 'Insert', the link popup refreshes, and nothing has happened.

Works fine in FF, and Safari.

Edit - In fact I am getting similar errors when trying to set style and format settings. If you select text in the middle of the document and change the format to h1 as an example, the first line of the document gets changed instead of what was selected. Looks like somehow the cursor positioning is messed up in IE.

Another example, if you create a named anchor, it inserts at the top of the page instead of at the current cursor position. This works fine in FF as well.

lvanderree
26 Jun 2008, 3:43 AM
Hi Andrew,

wanted to thank you for your great work. I didn't used it for a while (left at version 0.2) since I was too busy with other things, but can see everything is working for me at the moment!

So thanks,

Leon

demo at
http://tejohnston.dynora.eu/
admin:admin

ZooKeeper
27 Jun 2008, 12:36 AM
Thanks for the great plugin!
Currently I'm trying to add it to the project. So far so good.
The example config in the first post fails though.
Please try it with latest Ext SVN and Tiny 3.1.0.1

Also is it compatible with both ux.ManagedIFrame 1.05 and 1.1?

Thanks

supawat
30 Jun 2008, 1:17 AM
Found a bug using IE 7. This is even broken in your examples online. If you select text and hit the link button to create a link, (notice that the text is now deselected)... Now type in your link and hit 'Insert', the link popup refreshes, and nothing has happened.

Works fine in FF, and Safari.

Edit - In fact I am getting similar errors when trying to set style and format settings. If you select text in the middle of the document and change the format to h1 as an example, the first line of the document gets changed instead of what was selected. Looks like somehow the cursor positioning is messed up in IE.

Another example, if you create a named anchor, it inserts at the top of the page instead of at the current cursor position. This works fine in FF as well.

Me too.

How to?

xor
30 Jun 2008, 6:34 AM
Hi,
this is really a nice extension. But I have a problem with the "collapsible" function of Ext.
If I collapse the panel and reopen it the textarea and all buttons arent't editable or clickable.
And in firebug I get the Error:

Error: t.win.document is null
Source File: http://localhost:8080/TinyMCE/tiny_mce/tiny_mce.js
Line: 1

Turn off collapse animation for your panel. Looks like it breaks the editor.

xor
1 Jul 2008, 12:13 AM
Guys,

Please check out new version. I've fixed issues with dialog title and link insertion in IE7.

I've also upgraded it to TinyMCE 3.1.0.1 and latest ManagedIFramePanel.

pauleee
2 Jul 2008, 3:39 AM
thanks for this wonderful plugin!! i love it :)

i've added after line 350 a
border: false

i think the window looks then better ;)

xor
2 Jul 2008, 3:49 AM
paulee,

You are right, this way it looks better. Thank you for great mark and advice.

dverkade
2 Jul 2008, 5:13 AM
Hi,

I submit my forms via the basicform, however the value of the TinyMCE editor is not submitted, the field is empty. Anyone have an idea?

Submit code:


formpanel.getForm().submit({
url: '/jsonService/Backoffice/ViewData/Save/?_viewId=10000020',
waitMsg:'Bewaren...'
});


Tiny field:


{
"xtype":"tinymce",
"id":"10000020_text1",
"name":"10000020_text1",
"fieldLabel":"Tekst",
"width":620,
"height":400,
"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",
file_browser_callback : "FileBrowser"
},
"value":""
}

xor
2 Jul 2008, 5:20 AM
dverkade, search this thread by "sync" keyword.

cnelissen
2 Jul 2008, 7:08 AM
Just a quick note. There are some issues with your use of modal windows... For instance, I have implemented custom file and image browsers for tinyMCE which work great, however when the main insert image popup is modal, if someone selects insert image window, the image browser becomes unselectable, and the page has to be refreshed for it to go away.

I have removed the modal config option from the windowmanager and it works great.

xor
2 Jul 2008, 8:30 AM
Just a quick note. There are some issues with your use of modal windows... For instance, I have implemented custom file and image browsers for tinyMCE which work great, however when the main insert image popup is modal, if someone selects insert image window, the image browser becomes unselectable, and the page has to be refreshed for it to go away.

I have removed the modal config option from the windowmanager and it works great.

If I understand you correctly, you can as well make your file and image browsers modal. Or you can take them off standard windows group so they won't be covered by standard modality.

So there are several "correct" approaches here.

cnelissen
2 Jul 2008, 8:42 AM
If I understand you correctly, you can as well make your file and image browsers modal. Or you can take them off standard windows group so they won't be covered by standard modality.

So there are several "correct" approaches here.

Yes I suppose so, though it seems the modal windows are unnecessary and just creates more work for anyone trying to extend your component. It seems most logical to remove the modality from your window manager... Is there a reason for the modal windows other than aesthetics?

xor
3 Jul 2008, 12:12 AM
I'm thinking of the following scenario:
- You have your editor in Ext.Window.
- You open popup for inserting a link and this is not a modal window.
- Then you don't finish link inserting (i.e. nor OK, nor Cancel were clicked) but click editor window again.
- This will move focus to editor window and would probably hide popup with it.

At this point I don't know what would happen if you click "insert link" button again. Or what would happen if you'd change selection and click OK.

alex-t.de
5 Jul 2008, 4:44 AM
Hello Andrew,

your extension is very helpful, thanks a lot!

I've notice a (not so big) problem while using Ext.ux.TinyMCE in a FormPanel and a state manager is activated.

Here is what I mean:


Ext.onReady(function() {

Ext.state.Manager.setProvider( new Ext.state.CookieProvider() );

// a Viewport with a FormPanel where a { xtype: "tinymce", ... } is used

}
The Viewport has a border layout.
I reload the app, resize some views and reload again.

Now I try to use some of the TinyMCE tool windows (insert images, insert tables, ...). The very first window is ok, but all the next windows are looking like this:

http://extjs.com/forum/attachment.php?attachmentid=7942&stc=1&d=1215261307



I don't know where the problem is. Perhaps this is a bit interesting for you and you can help to fix this.

BTW: after commenting the Ext.state.Manager.setProvider line out the tool windows are shown properly. I've testet this several times on FF3 and Safari (sadly) on Windows.


Please keep on working on this extension!

albeva
5 Jul 2008, 7:38 AM
Something very wierd happens when pressing TAB

on the online demo open 2 editor and focus one. Then click tab few times. The toolbar dissapears!

Dumbledore
9 Jul 2008, 2:41 AM
because it is not a must to have a callback-function for alert and confirm this small patch should be implemented:


alert : function( txt, cb, s ) {
Ext.MessageBox.alert( "", txt, function() {
if (!Ext.isEmpty(cb)) {
cb.call(this);
}
}, s );
},

confirm : function( txt, cb, s ) {
Ext.MessageBox.confirm( "", txt, function( btn ) {
if (!Ext.isEmpty(cb)) {
cb.call( this, btn == "yes" );
}
}, s );
},


And i have sometimes a render problem. I use the tinyMCE inside a tabpanel with deferredRender: false but sometimes the editor is not visible. When i switch between tabs the editor appears...

Bye, Dumbledore

xor
9 Jul 2008, 5:02 AM
Dumbledore, thanks for patch!

jwendt@iscinternational.com
11 Jul 2008, 7:16 AM
I'm using the Moxie paid Image Manager plugin and am getting the following;

IE 7.0
WindowManager.superclass.setTitle is null or not an object

FireFox 2.0
The ImageManager opens fine. but after selecting an image, the window does not close.

Ext.ux.TinyMCE v0.6
Ext.ux.ManagedIFrame 1.1
tinymce 3.1.0.1
ImageManager Version 3.0.8

Thanks

xor
14 Jul 2008, 1:30 AM
Hi!

I don't have this paid component, so can't try it by myself. You have to debug methods of my WindowManager and see what's happening. There are sections annotated with "probably not inline" comment. Problem is there.

adamadax
21 Jul 2008, 5:41 AM
Hello, it's my first post:)
Thanks for very good EXTension;]
But i have a similar problem with Ex.ux.TinyMCE like that User:


Hi, thanks 4 ux!
Editor show correctly, but when i click on `image` button, i have error:

types[config.xtype || defaultType] is not a constructor
[Break on this error] Ext.ComponentMgr=function(){var all=new Ext.util.MixedCollection();var types={};...Bold, italic etc working good.


Could someone knows how resolve that issue?

________
Adam

lvanderree
21 Jul 2008, 6:59 AM
Did you install the managed IFrame library (which is required)

adamadax
21 Jul 2008, 10:22 PM
God damn it :]
Thank You lvanderree, i included miframe plugin into head section but the name of the file
was wrong he he. (Ex.ux.miframe.js)
Everything is fine;]

Regards :)

dayext
24 Jul 2008, 4:06 AM
Thanks for your plugin. Just wanted to let you know about the following (don't know if or how it relates to other problems with StatusProviders mentioned before):

We have run into a problem when using a StateProvider: When calling a TinyMCE command that opens a dialog a second (third, ...) time, it will always show the content of the first dialog that was displayed. For example, invoke the find/replace dialog, close it, select a text, choose the link item -> it will display the contents of the find/replace dialog, with unresolved text placeholders.

We could track this down to Ext.ux.ManagedIFrame: It uses a modified getState method that includes the currently set URL into the state. The URL specified in WindowManager.open's config for creating the ManagedIFrame gets overriden later by the previously saved state.

As a solution/workaround, we now override ManagedIFrame's getState method by using the config object:


var win = new Ext.Window(
{
// ...
items: [
{
xtype: "iframepanel",
// override getState()
getState: function() {
return Ext.apply(Ext.ux.ManagedIframePanel.superclass.getState.call(this));
},
defaultSrc: s.url || s.file,
border: false
}
]
// ...
This did the trick for us.

xor
24 Jul 2008, 4:14 AM
dayext, you are right, the problem is here. It's already fixed by alex-t.de. Sorry for not sharing this information with community:

Hi!



var win = new Ext.Window(
{
stateful: false, // FIX FOR THE STATE MANAGER
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: [
{
xtype: "iframepanel",
stateful: false, // FIX FOR THE STATE MANAGER
defaultSrc: s.url || s.file
}
]
});


Can you please check this fix for the state manager.

I've just followed my last idea and read your code and read the API for Ext.Window. After adding "stateful: false" twice, the state manager worked well and the dialogs are shown correctly!

Do you think this is a good solution?

Best regards

Alex

For now patch your copy of the extension. I can't tell when will I publish new version. Will try to do it faster.

iLoLo21
28 Jul 2008, 4:53 AM
Hello

I have an issue with extsjs desktop and this plugins TinyMce.
All formats actions (samples : color, size, align...) are operational but all actions who open a dialbox (samples : image, html, link...) don't working. the dialbox don't open.

I don't know if extsjs desktop is the problem.

My code :


formField.push(new Ext.ux.TinyMCE({
fieldLabel: dataStore.fieldInfo[i].fieldLabel,
name: dataStore.fieldInfo[i].name,
id: dataStore.fieldInfo[i].name,
width: 530,
height: 300,
value: dataStore.fieldInfo[i].value,
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,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo",
theme_advanced_buttons3 : "link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
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"
}
})
);Onclick Firebug print in ext-all-debug.js:

types[config.xtype || defaultType] is not a constructor :

return new types[config.xtype || defaultType](config);


IE print :

Line: 12087
Character: 13
Code: 0
Error Message: Objet attendu

But this don't help me.

thanks

EDIT :

If I delete this line in my template :

<script type="text/javascript" src="/ext/ext-all-debug.js"></script>

the dialbox is open with this message in panel : Invalid controller specified (library)

it's a zend error message. But I don't see why print this.

I have also this in my template : <script type="text/javascript" src="/ext/ext-all.js"></script>

The js files must be include in a specific order ?

EDIT :

I have debug my issue... I don't know how but it's right thanks

Yossi
28 Jul 2008, 2:07 PM
I have problems with multiple instances of TinyMCE. Whenever I try to open a TinyMCE editor in a few tabs, I get an error and it dies.

It's similar to what described here:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=9205

Did anyone have any lucks with that?

I also noticed that I must kill the TinyMCE editor before the destroy of the tab, .. Anyone had luck with destroying the TinyMCE editor? What's the specific command?


I thought of simply opening it in one window.. But I wouldn't want to get there unless I have to..

Yossi
29 Jul 2008, 3:10 AM
The window often gets out of the whole Viewport, and I can't resize or drag it back in.
Here is the solution:

Adding constrain: true to the code.



var win = new Ext.Window(
{
stateful: false, //@mod: FIX FOR THE STATE MANAGER
constrain: true, //@mod: Fixing window getting out of scope
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: [
{
xtype: "iframepanel",
stateful: false, //@mod: FIX FOR THE STATE MANAGER
defaultSrc: s.url || s.file
}
]
});

iLoLo21
29 Jul 2008, 4:59 AM
Hello
I would like to add imanager plugin in TinyMce but I have an issue :


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,imanager",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "link,unlink,image,media,preview,forecolor,bullist,numlist,outdent,indent,blockquote,undo,redo,imanager",
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"
}

When I add imanager plugin, tinymce isn't working...

This Ext.ux.TinyMCE plugin can add imanager plugin ?
Thanks

Yossi
30 Jul 2008, 3:45 AM
When you put the destroy TinyMCE window in the onDestroy, it gives an error in IE7 because this.ed is destroyed, the the close window of the TinyMCE doesn't find it.
In order to fix it, I changed the closing event for 'beforeDestroy'.

Here's the code:


beforeDestroy: function(){
if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.onDestroy.call( this );
},


Please let me know if this was integrated into the core.

xor
31 Jul 2008, 1:06 AM
When you put the destroy TinyMCE window in the onDestroy, it gives an error in IE7 because this.ed is destroyed, the the close window of the TinyMCE doesn't find it.
In order to fix it, I changed the closing event for 'beforeDestroy'.

Here's the code:


beforeDestroy: function(){
if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.onDestroy.call( this );
},


Please let me know if this was integrated into the core.

Yossi, is this solution proven to work correctly in other browsers? If yes, then I'll incorporate it into the code base. BTW, you are calling wrong method of the superclass. I think it should also be "beforeDestroy".

xor
31 Jul 2008, 1:10 AM
The window often gets out of the whole Viewport, and I can't resize or drag it back in.
Here is the solution:

Adding constrain: true to the code.
...

Thank you. Added to the main code.

xor
31 Jul 2008, 1:32 AM
...
When I add imanager plugin, tinymce isn't working...

This Ext.ux.TinyMCE plugin can add imanager plugin ?
...

Can't tell because haven't tried this plugin for myself. Ideally, my component shouldn't mess with TinyMCE plugins, because it doesn't tweak normal TinyMCE behavior. But as we all see it's not always work as I expect. So if you can dig this issue deeper and post your report here, it could help to pinpoint "bad" parts of component's code.

ehask71
31 Jul 2008, 5:35 AM
I don't think this is necessarily a ux.TinyMCE issue as I have also noted it in ext.HtmlEditor, however, I am having an issue where the editors are removing the <html>,<head>, and <body> tags, both opening and closing. I am using this great tool as a means of creating a page editor and have not been able to locate anything within the documentation for Extjs that suggest how to stop this behaviour.

Any Suggestions?

Yossi
31 Jul 2008, 10:04 AM
Yossi, is this solution proven to work correctly in other browsers? If yes, then I'll incorporate it into the code base. BTW, you are calling wrong method of the superclass. I think it should also be "beforeDestroy".

Yeah you're right!
This code works for IE7 + FF2, need other browsers tested.
I also have to say, I use a single window for editing all stuff. I might solve a memory leak problem and get more going.. checking that now.

Fixed code..:


beforeDestroy: function(){ //@mod: added beforeDestroy instead of onDestroy, IE7 fix.
if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.beforeDestroy.call( this );
},

xor
1 Aug 2008, 12:42 AM
I don't think this is necessarily a ux.TinyMCE issue as I have also noted it in ext.HtmlEditor, however, I am having an issue where the editors are removing the <html>,<head>, and <body> tags, both opening and closing. I am using this great tool as a means of creating a page editor and have not been able to locate anything within the documentation for Extjs that suggest how to stop this behaviour.

Any Suggestions?

You'd better read TinyMCE forum. I think you are not the only one who want to edit complete document. If it's possible at all, there should be described steps. ExtJS itself doesn't add anything to the editing behavior of TinyMCE.

ehask71
1 Aug 2008, 4:29 AM
You'd better read TinyMCE forum. I think you are not the only one who want to edit complete document. If it's possible at all, there should be described steps. ExtJS itself doesn't add anything to the editing behavior of TinyMCE.

I thought of that as well, however I observed the same behavior with Ext's internal htmlEditor. If i pass the page to a text area it is intact, when passing it to either the internal htmlEditor or to your extension, those tags are removed. I am under the assumption that it is somewhere in Ext's dom builder, but have not been successful in tracking it down.

I have followed similar procedure's from TinyMCE to add the appropriate functionality, and testing it in just tiny (without Ext) it works as I am expecting.

xor
1 Aug 2008, 6:26 AM
I have followed similar procedure's from TinyMCE to add the appropriate functionality, and testing it in just tiny (without Ext) it works as I am expecting.

You can use "ed" property of Ext.ux.TinyMCE to access underlying TinyMCE editor. Try this directly and see if it would help or not.

marcing
4 Aug 2008, 1:09 AM
Hello Andrew!
First of all I wanted to thank You for this great plugin! I appreciate You shared it with us.

I've encountered a problem when using tinyMCE inside a TabPanel on ... IE7 (suprise :D ).
A tab opens and editor loads up correctly. I can even open many tabs and it works ok.
The problem is that I cannot close the last tab with TinyMCE in it.
IE7 Throws out a following error: 'disabled' is empty or not an object.

I can give You access to online project with this problem so You can examine it for yourself.
Thanks,
Marcin

Edit:

Temporarily solved by commenting out following line:



onDestroy: function(){
//if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.onDestroy.call( this );
},

xor
11 Aug 2008, 2:42 AM
marcing, I think you have the same issue that Yossi was talking about. Here is the fix (http://extjs.com/forum/showthread.php?p=202670#post202670). Please, try his solution. I've already included it into upcoming version, but the more tests we have - the better.

And thank you for good words! :)

Dumbledore
11 Aug 2008, 8:54 PM
Hi,

is there a way to toggle between a normal and a tinyMCE Panel on the fly?

Bye, Dumbledore

xor
13 Aug 2008, 2:30 AM
Dumbledore, how do you think it should work from user perspective? We currently also need a way to display read-only rich-text content and the component doesn't do it very good. Main problem - it doesn't let you scroll disabled editor.

Ext.ux.TinyMCE is not a panel, BTW, it's derived from field class. Not sure though if it's big deal in current question or not.

lvanderree
13 Aug 2008, 4:06 PM
Hi Andrew,

I am still enjoying the integrated tinyMCE editors in my ext-panels, but I think I found a new bug.

I wonder if it is due to my configuration, since I guess other people should have seen this same error. In both FF2 and FF3 I see a scrollbar in my tinyMCE-editor when my content is higher than the field itself, which looks OK, but the bottom of this scrollbar runs al the way down till the bottom of my browser (or the form), see screenshot here http://fun4me.demon.nl/%7Eleon/tinymce-scroll-error.png



You can also see it for yourself when login at http://tejohnston.dynora.eu/ (with admin admin) and open a parcel (double click on a line in the daily-view with a P-filenumber)

in the 4 latest tab-pages you can find tinymce-editors, when providing enough enters you will see the scrollbar appear running all the way till the bottom of the page.

Dumbledore
13 Aug 2008, 10:56 PM
Dumbledore, how do you think it should work from user perspective? We currently also need a way to display read-only rich-text content and the component doesn't do it very good. Main problem - it doesn't let you scroll disabled editor.

Ext.ux.TinyMCE is not a panel, BTW, it's derived from field class. Not sure though if it's big deal in current question or not.

ok, your explanation is clear. It seems there is no really good way for toggling...

Bye, Dumbledore

illuminum
18 Aug 2008, 8:01 AM
thanks for the plugin.

using ux.tinymce 0.6 I get this error, relayed by firebug:


this.ed.theme.resizeTo is not a function Ext.ux.TinyMCE.js (line 217)

any help in debugging this is appreciated. I used this setup as per the default example provided.


var win = new Ext.Window({
width: 500,
height: 300,
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"
}
}]
});
win.show();

lvanderree
18 Aug 2008, 11:03 AM
My initial thoughts/guess is about your setup.

You are adding a (tinymce)field directy to a window. You might want to add a formlayout, or maybe even a formpanel to it.

I have a tinymce editor in my formpanel, which is added to a window, which works out perfectly.

ZooKeeper
20 Aug 2008, 4:46 AM
Are you going to implement form validation for TinyMCE field?

xor
20 Aug 2008, 6:23 AM
Hi Andrew,

I am still enjoying the integrated tinyMCE editors in my ext-panels, but I think I found a new bug.
...

Leon, thanks for the testbed. I've already seen this bug, but still can't find out how to handle this. Looks like it's related to the wrong initial size of the editor inside of my control. If you do a resize after that, editor size returns to normal state. The idea is to fire resize editor at the right point in time. But when? I still don't know.

xor
20 Aug 2008, 6:25 AM
Are you going to implement form validation for TinyMCE field?

Honestly, I haven't thought about it. Like what type of field should it be validated? Like TextField?

lvanderree
20 Aug 2008, 6:27 AM
Leon, thanks for the testbed. I've already seen this bug, but still can't find out how to handle this. Looks like it's related to the wrong initial size of the editor inside of my control. If you do a resize after that, editor size returns to normal state. The idea is to fire resize editor at the right point in time. But when? I still don't know.

Thanks for the info, when I have finished writing my thesis I will take a look at it.

ZooKeeper
21 Aug 2008, 12:22 AM
Honestly, I haven't thought about it. Like what type of field should it be validated? Like TextField?

Textfield or textarea. I think it just checks if there's a value in the field or not, based on the allowblank property.

I think it's a must have feature and everyone using the extention are just implementing home-grown validation which is easy, but still i think it's supposed to be built in.

MarkB
25 Aug 2008, 4:20 PM
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/extjsux/miframe/miframe-min.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/tiny_mce/Ext.ux.TinyMCE.min.js"></script>



Ext.ux.advancedTinyMCE = Ext.extend(Ext.ux.TinyMCE, {
width:500
,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" */
}
,listeners:{
beforeRender: function (){if (this.ownerCt) this.width = this.ownerCt.getSize().width-this.ownerCt.layout.labelAdjust;}
}



I have included all of the necessary header files and verified correct paths.

When I go to make my extended component, it tells me Ext.ux.TinyMCE is undefined. I've read every message in this thread and have only found examples of people using xtype:tinymce and since I will be using MetaForm, I want to pass a predefined component tailored how I know my users will need it. It also helps keep my code really neat.

Help plz? :) Loving the component. Next challenge will be to wrap an Ext.Resizable control around the TinyMCE instance.

xor
26 Aug 2008, 12:14 AM
MarkB, try to debug your code. Set breakpoint before extended component definition and check if Ext.ux.TinyMCE defined or not.

Yossi
26 Aug 2008, 2:51 AM
I get the information from the server when I load the form,
when I submit the form, I use getValue() to get the value from the TinyMCE editor, and setValue() to set it in the form.

When I submit the form, it doesn't show *any* information submitted.

The information sent to the server:


data_CData_content
data_CData_file filename.html
data_CData_name title-one
data_CData_published on
data_CData_section_id 152


The form sets the value right, if I check the values with FireBug it shows the value as set under 'value'.


this.ownerCt.form.setValues([{id:editor_field, value:Ext.getCmp(editor_id).getValue()}]);


Any ideas how to fix that?
Maybe it doesn't accept it, since it was of xtype 'tinymce' and not 'textarea'?

xor
26 Aug 2008, 4:15 AM
Yossi, if you have Ext.ux.TinyMCE as a part of the form, then it should also be submittable in ordinal way. You should only call syncValue method before submit to copy data from editor to underlying textarea field.

MarkB
26 Aug 2008, 8:21 AM
MarkB, try to debug your code. Set breakpoint before extended component definition and check if Ext.ux.TinyMCE defined or not.


<script type="text/javascript" src="/_cms/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/_cms/extjs/ext-all.js"></script>
<script type="text/javascript" src="/_cms/extjsux/miframe/miframe-min.js"></script>
<script type="text/javascript" src="/_cms/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/_cms/tiny_mce/Ext.ux.TinyMCE.js"></script>

<script type='text/javascript'>
<!--//--><![CDATA[//><!--
Ext.ux.TinyMCE.initTinyMCE();
alert(Ext.ux.TinyMCE);
//--><!]]>
</script>

I do this before I try to extend, but now even if I'm using the xtype:'tinymce' it says its undefined ... Even though I can see it initialized in Firebug.

Really appreciate the help.

paulyb263
5 Sep 2008, 2:26 AM
Hello, this is a great plugin, however i am having a slight problem,

What im trying to do is call a function when the TinyMCE sync event fires. The reason for this is that i need to compare this value with the value in another hidden field that has the same initial value (if this makes sense).

So what happens is this:-

1.The TinyMCE is rendered within a form
2. The value for TinyMCE is passed into it from a function
3. This same function passes its value into a hidden field
4. Now when i submit the form i need to do a check to see if the value in the TinyMCE has changed from the value in hidden field, but this doesnt work because the values are different when the TinyMCE is initialised and gets its value from its own hidden field (puts html tags around the text ect)

So what i need to do is detect when the value gets passed into TinyMCE editor so that i can then pass its value into the hidden field. Then any changes after this can be picked up

I know i have rambled a lot here but i hope i have got my general problem across.

Any help would be greatly appreciated

P.S. with the extJS html editor i used the sync event and called a function when this fired:-

Ext.getCmp('htmlEditor').on('sync', function(){
setHtmlValue()}

saJoshua
9 Sep 2008, 2:03 AM
Hi,

Thanks for the great plugin. I've picked up something that might be a bug. In the editor when moving from bolded text to other text or to text with a different style, the 'onNodeChange' event should be fired within the editor, but it seems to be swallowed? If the editor is expanded using the fullscreen plugin, the 'onNodeChange' event fires perfectly, so I can only assume the issue is with the extJs plugin code.

Please let me know if anyone has come across this or if anyone has a solution? :)

Thanks,
Joshua

ZooKeeper
9 Sep 2008, 6:21 AM
Are you going to implement validate any time soon?
It's a much needed feature and it shouldn't be hard to inplement.

Thanks in advance!

Dumbledore
29 Sep 2008, 12:18 AM
Hi there,

it seems there is a small bug in set Height (see Screenshot). In row 81 of the extension the height should be set:


el.setHeight( this.height );

i don

xor
29 Sep 2008, 1:14 AM
Dumbledore,

Yes, I already know about this problem (and there were similar bug reports here), but for the moment I don't know how to fix it. Hope to be able to work on this soon.

Dumbledore
29 Sep 2008, 5:15 AM
xor... perhaps it will help for fix the error. It seems that is a timing problem. When i change to follwing function the layout will be corrected after the timeout.


onResize : function( aw, ah ){
if( this.rendered ){
this.withEd( function() {

if( Ext.type( aw ) != "number" ) aw = this.el.getWidth();
if( Ext.type( ah ) != "number" ) ah = this.el.getHeight();

//this.ed.theme.resizeTo( aw, ah );

var editor = this.ed;
setTimeout(function() {
editor.theme.resizeTo( aw, ah );
}, 1000);
});
}
},

xor
29 Sep 2008, 6:59 AM
Yes, Dumbledore, this looks like a working patch, but it's also interesting to find a reason and fix it right there.

Dumbledore
29 Sep 2008, 9:41 PM
Hi Xor,

the reason is the missing clientHeight from the '_tbl' and '_ifr' elements at this time. When you look at the tinymce function resizeTo() there is a calculating:


resizeTo : function(w, h) {
var ed = this.editor, s = ed.settings, e = DOM.get(ed.id + '_tbl'), ifr = DOM.get(ed.id + '_ifr'), dh;

// Boundery fix box
w = Math.max(s.theme_advanced_resizing_min_width || 100, w);
h = Math.max(s.theme_advanced_resizing_min_height || 100, h);
w = Math.min(s.theme_advanced_resizing_max_width || 0xFFFF, w);
h = Math.min(s.theme_advanced_resizing_max_height || 0xFFFF, h);

// Calc difference between iframe and container
dh = e.clientHeight - ifr.clientHeight;

// Resize iframe and container
DOM.setStyle(ifr, 'height', h - dh);
DOM.setStyles(e, {width : w, height : h});
},

But at calling time e.clientHeight and ifr.clientHeight is undefined. After one second the values are available...

MarkB
13 Nov 2008, 2:12 PM
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=844

Instead of using the expensive MCE Image Uploader I have been playing around with this free version. It has integrated fine BUT I would love if ExtJS' look and feel were to at the very least take over the popup dialog.



if (ib.isMSIE) { // IE
open : function( s, p )
var rArgs = showModalDialog(ib.baseURL, wArgs, 'dialogHeight:500px; dialogWidth:580px; scrollbars: no; menubar: no; toolbar: no; resizable: no; status: no;');
if (rArgs) { // returning from iBrowser (IE) and calling callback function
iBrowser_callback('','',rArgs);
}
} else if (ib.isGecko) { // Gecko
var wnd = window.open(ib.baseURL + '?editor=' + ib.editor + '&callback=iBrowser_callback', 'ibrowser', 'status=no, modal=yes, width=625, height=530');
wnd.dialogArguments = wArgs;
}

I know this is the code that opens the nasty dialog, but I'm not sure how to wrap this in the ExtJS TinyMCE Window Manager.

Any help would be greatly appreciated.

cnelissen
13 Nov 2008, 2:43 PM
Hey Mark,
Take a look at this thread: http://extjs.com/forum/showthread.php?p=179633#post179633. Its pretty easy to do, this should hopefully give you a good start.

MarkB
14 Nov 2008, 6:34 AM
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/

This thing integrates into the TinyMCE extension pretty nicely.

You do have to make a couple of CSS modifications : just grab the font settings from dialog.css of the theme you are using.


body,td, th, input{font: 10px Verdana, Arial, Helvetica, sans-serif;color:#070707;}

fieldset {margin:0; padding:4px; border:1px solid #919B9C; font-family:Verdana, Arial; font-size:10px;}
legend {color:#2B6FB6; font-weight:bold;}
label.msg {display:none;}
label.invalid {color:#EE0000; display:inline;}
input.invalid {border:1px solid #EE0000;}
input, .input, .inputFile {background:#FFF; border:1px solid #CCC;}
input, select, textarea, .input, .inputFile {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
input, select, textarea, .input, .inputFile {border:1px solid #808080;}
input.radio {border:1px none #000000; background:transparent; vertical-align:middle;}
input.checkbox {border:1px none #000000; background:transparent; vertical-align:middle;}
.input_noborder {border:0;}

And remember to copy the javascript functions located in the tinymce_test.php file into either your tinyMCE extension file or another Javascript library. That solves things pretty quickly. Don't waste time with relative paths.


function ajaxfilemanager(field_name, url, type, win) {
var ajaxfilemanagerurl = "/##APP_NAME##/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php";
switch (type) {
case "image":
break;
case "media":
break;
case "flash":
break;
case "file":
break;
default:
return false;
}
tinyMCE.activeEditor.windowManager.open({
url: "/##APP_NAME##/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php",
width: 782,
height: 440,
inline : "yes",
close_previous : "no"
},{
window : win,
input : field_name
});
}

Last point, on the forums at the site, they talk about a TinyMCE3 flag for config.base.php, I just use TinyMCE and it works fine - me thinks there might be version issues as TinyMCE3 doesn't work.

Plugin works great and attaches just like the MCEFile and MCEImage managers do so that is handy AND IT WORKS IN THE EXT FRAME.

This plugin is also FREE which is a nice perk.

kmiyashiro
4 Dec 2008, 1:53 PM
This one took us a long while to figure out. Setting the layout to 'fit' on the panel and adding a Resizable to it did not do the trick. Instead, you must add this to the panel config:


listeners: {
'render': {
fn: function(thisPanel) {
new Ext.Resizable(thisPanel.getEl(), {
pinned: true,
handles: 's',
minHeight: 200
}).on("resize", function(){
thisPanel.syncSize();
if (thisPanel.layout) {
thisPanel.doLayout();
}
});
},
scope: this
}
}

Of course if you don't want the pinned, handle, or minHeight you can change those. The important part is :



new Ext.Resizable(thisPanel.getEl(), {
pinned: true,
handles: 's',
minHeight: 200
}).on("resize", function(){
thisPanel.syncSize();
if (thisPanel.layout) {
thisPanel.doLayout();
}
});


to make the panel truly resizable. This is from Animal here: http://extjs.com/forum/showthread.php?t=18540&highlight=resizable+panel&page=2

Kannabismus
10 Dec 2008, 3:03 AM
So how this example:
http://blogs.byte-force.com/xor/tinymce/test.openclose.html
could be made RESIZABLE IN THE SAME WAY as "Open editor" example on this page:
http://blogs.byte-force.com/xor/tinymce/
?

10 minutes later...
oh, i guess anchor:'100% 100%' do the trick :)

temporary
11 Dec 2008, 6:19 AM
Has anyone got a generic solution for the submit fail? I have a dynamic form that can contain several instances of Ext.ux.TinyMCE, and I don't want to do some workarounds just to get these TinyMCE synced...

The problem is that BasicForm.submit() doesn't call getValue() on each item, but it calls Ext.Ajax.serializeForm(). serializeForm() just takes a look at the elements inside the form, not the form items itself. There is a big switch() inside serializeForm() which determines what to do.

Maybe I just have to implement my own submit() function...

(later) Oops, I was wrong, I don't call BasicForm.submit(), I call BasicForm.getValues().

pablitobs
16 Dec 2008, 7:20 PM
Hi, first, great code, congrats to all the support team...
Secon I have this code



addCable = new Ext.Window({
width:800
,height:700
,minWidth:165
,id:'crearId'
,minHeight:200
,resizable:false
,layout:'fit'
,border:true
,closable:true
,title:'Crear Cable'

items: /*createForm,*/
[new Ext.form.FormPanel({
baseCls: 'x-plain',
layout:'form',
url:'save-form.php' (http://www.extjs.com/forum/'save-form.php'),
border: true,
defaultType: 'textfield',
monitorValid:true,
buttonAlign: 'right',
bodyStyle: 'padding:5px',
items: [{
fieldLabel: 'Tipo de Cable',
id: 'cableType',
name: 'cableType',
anchor:'50%' // anchor width by %
},{
fieldLabel: 'Cable N&uacute;mero',
id: 'cableNumber',
name: 'cableNumber',
anchor: '50%' // anchor width by %
},{
id: 'cableDireccion',
fieldLabel:'Direcci&oacute;n',
name: 'cableDireccion',
value:'DGC',
allowBlank:false,
blankText: 'Debe ingresar la direcci&oacute;n del cable, puede usar el bot&oacute;n de direcciones en la barra',
anchor: '50%' // anchor width by %
},{
id:'cableTitulo',
name: 'cableTitulo',
fieldLabel: 'T&iacute;tulo',
allowBlank:false,
blankText: 'Debe ingresar un t&iacute;tulo v&aacute;lido',
anchor: '95%', // anchor width by %
enableKeyEvents:true,
listeners:{
'keyup':{ fn: function(field, e){addCable.setTitle('Crear Cable: '+field.getValue())}
}
}
},{
fieldLabel: 'Referencia Lima',
id: 'cableRefLima',
name: 'cableRefLima',
anchor: '95%' // anchor width by %
},{
fieldLabel: 'Referencia Tokio',
id: 'cableRefTokio',
name: 'cableRefTokio',
anchor: '95%' // anchor width by %
},{
xtype: "tinymce",
hideLabel:true,
width: "768",
height: "440",
id: "cableBodyValue",
name: "cableBodyValue",
tinymceSettings: {
theme : "advanced",
content_css : "/includes/styles/cable_template.css",
plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,help,code,insertdate,inserttime",
theme_advanced_buttons2 : "forecolor,backcolor,tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,advhr,|,print,|,ltr,rtl,moveforward,movebackward,absolute,styleprops,cite",
theme_advanced_buttons3 : "abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_source_editor_width: 768,
theme_advanced_source_editor_height:440,
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
theme_advanced_fonts : "Arial=arial",
theme_advanced_font_sizes : "MyText=11px",

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"
},
value: ""
}],
buttons:[
{
text:'Guardar',
formBind:true,
handler: function() {
// Sync value for specific editor
Ext.getCmp("cableBodyValue").syncValue();
// Submit the form
frm.getForm().submit({
url: "/",
method: "GET"
});
}

},{
text: 'Cerrar',
handler: function(){
addCable.close();
}
}]
})]
});


so it is a window with a form and a tinyMCE inside, everything is fine, but when I close the window, IE7 screams the error..... "Permission Denied" , FF works fine.... I really don't know what to do..
I saw some post refering to onDestroy..... but on my tiny_mce_src.js, there is not such method... thanks for you help

pablitobs
16 Dec 2008, 8:38 PM
Hi, from the above post, the debuger points to this code section on tiny_mce_src.js:

getBody : function() {
return this.bodyElement || this.getDoc().body;
},
IE7 blames that function for the perimission denied error.

any Ideas?
thanks

xor
17 Dec 2008, 2:51 AM
pablitobs, do you open this page from web server, as it should be done, or just from local file? It matters. Don't have other ideas for now.

If you already use server, please try to comment out different parts of your form. Also it would be helpful to see whole stack trace, not only the failing method.

pablitobs
17 Dec 2008, 10:55 PM
pablitobs, do you open this page from web server, as it should be done, or just from local file? It matters. Don't have other ideas for now.

If you already use server, please try to comment out different parts of your form. Also it would be helpful to see whole stack trace, not only the failing method.

Hi, yes, it is loaded on a web server... what I did is follow a not fancy solution, instead of using the hide() function I reload the page with location.href=location.href so it renders all and no errors, this while I figure what's the problem

Dumbledore
21 Dec 2008, 1:28 AM
Hi,

i have the same here with IE6... Currently i try to figure out whats going wrong. I use latest tinyMCE...

[edit]
i have a form with 3 tinyMCEs. When i close the dialog the onDestroy-function in Ext.ux.TinyMCE.j will call 6 times!
That means that every editor will be destroy twice?
Any ideas why?



Hi, from the above post, the debuger points to this code section on tiny_mce_src.js:

getBody : function() {
return this.bodyElement || this.getDoc().body;
},
IE7 blames that function for the perimission denied error.

any Ideas?
thanks

EMP
2 Jan 2009, 12:24 PM
Changing the onDestroy listener to beforeDestroy fixed it for me.

(line 154 in Ext.ux.TinyMCE.js)
change:



onDestroy: function(){
if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.onDestroy.call( this );
},


to



beforeDestroy: function(){
if( this.ed ) tinyMCE.remove( this.ed );
Ext.ux.TinyMCE.superclass.beforeDestroy.call( this );
},


and see if that does it.

don't forget to update the minified version too

hjf1223
14 Jan 2009, 10:25 PM
:)
That's good ,I resolve it.

pablitobs
14 Jan 2009, 10:32 PM
quite enough, but I found that even I did not get the error any more, when I tried to save the data from the text on the tinyMCE to my database using and ajaxrequest, only certain number of characters where saved, something like 128 so so.. the rest was ignored, so I always ended with truncated text on my databse (the field on the database is large enough to handle large data), till now I haven't be able to address this issue...

xor
16 Jan 2009, 7:16 AM
quite enough, but I found that even I did not get the error any more, when I tried to save the data from the text on the tinyMCE to my database using and ajaxrequest, only certain number of characters where saved, something like 128 so so.. the rest was ignored, so I always ended with truncated text on my databse (the field on the database is large enough to handle large data), till now I haven't be able to address this issue...

Check how the save request is performed. Is it done with correct POST request?

mstroeve
25 Jan 2009, 6:41 AM
I'am trying to get the Tinymce plugin to work properly in a tabpanel.
When i add the Tinymce as a item to a certain tab i want it to fit for %100 width en 100% height. But i can't seem to get it to work.

Does anyone have working examplecode (IE and Firefox) of a tinymce field in a tabpanel that while fit the whole area and also show the scrollbar properly when adding more text than het height of the Tinymce field?

xor
26 Jan 2009, 1:27 AM
mstroeve,

Generally, it should work w/o any special actions from your side. There could be two glitches in the current public version though:
1. It doesn't shrink the editor to be narrower than its toolbars. So your vertical scrollbar could be just behind right side of the control.
2. It has problem with vertical size of the editor also, so editor's status bar happes to be lower than bottom edge of a control.

emmadi
23 Feb 2009, 12:51 AM
Thanks xor i am searching for the same functionality
and i have tried to implement it and also a small integration of what i want...
My requirement is in a page i have few fields along with the Editor and a button so called preview and now if i press preview i need to get the complete page preview along with the field and a readonly editor...

for this what i did is when i click on the button a window will be opened and i wrote a form in that window and i thought of collecting the information and display it in the window but
Here i am facing problems...
1. the editor is not readonly
2. I am not able to remove the Toolbar
3. Not able to collect the data from first Editor....

here i am attaching the images please check it and give me some idea...

emmadi
23 Feb 2009, 2:48 AM
hi
Now i am able to collect the information and place it in side the editor which is inside the window but i dont want this editor as editable... i want this as readonly... and also i dont want toolbar for the second editor
This is my code


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Areas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="">
<link rel="stylesheet" type="text/css" href="lib/ext//resources/css/ext-all.css" />
<style>
body { padding: 10px; font-family: Arial; font-size: 12pt;}
h1 { margin-bottom: 0.3em; }
h2 { margin-top: 1em }
ul { list-style: disc outside; padding-left: 1.5em; }
</style>
<script type="text/javascript" src="lib/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/ux/miframe.js"></script>
<script type="text/javascript" src="lib/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="Ext.ux.TinyMCE.js"></script>

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
skin : "o2k7",
theme : "advanced",
editor_selector : "mceEditor",
//editor_deselector : "mceNoEditor",
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,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
width: 534 ,
height: 380
});
</script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

var preview = function(){
var nm_1 = Ext.getCmp('nm').getValue();
var pl_1 = Ext.getCmp('pl').getValue();
var bio_1 = Ext.getCmp('richText').getValue();
// alert(Ext.getCmp('richText').getValue());
alert(bio_1);

var form1 = new Ext.form.FormPanel({

width: 800,
bodyStyle:'padding:5px 5px 0',
autoScroll:true,
frame:true,
defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
name: 'name1',
id:'name1',
value:nm_1,
width:200,
readOnly:true

},{
fieldLabel: 'Place',
name: 'place',
id:'place1',
value:pl_1,
width:200,
readOnly:true
},{
xtype: 'tinymce',
fieldLabel: "Rich text",
id:'textarea1',
name:'textarea1',
width: 200,
height: 200,
value: bio_1,
tinymceSettings: {
theme : "advanced",
plugins: " "//,
//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_toolbar:false,
//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"

}


}

]
});

if(!win){
var win = new Ext.Window({
el:'win',
layout:'fit',
width:400,
height:400,
closable: true,
closeAction:'hide',
minimizable:true,
resizable:true,
plain: true,
items: [form1]
});

}
win.show();
};


var form = new Ext.form.FormPanel({
width: 800,
//height:500,
bodyStyle:'padding:5px 5px 0',
autoScroll:true,
frame:true,
defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
name: 'nm',
id:'nm',
width:200,
value: 'Jack',
readOnly:true
},{
fieldLabel: 'Place',
name: 'pl',
id:'pl',
width:200,
value: 'India',
readOnly:true
},{
xtype: 'tinymce',
fieldLabel: "Rich text",
id: "richText",
name: "richText",
width: 600,
height: 400,
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"
}
}
],
buttonAlign :'center',
buttons: [{
text:'PreView',
handler:preview
}]
});
form.render(document.body);
});



</script>

</head>
<body>
<!--<script type="text/javascript" src="js/examples.js"></script>-->
<h2>Editor</h2>
<div id="win" class="x-hidden"></div>

</body>
</html>

xor
24 Feb 2009, 6:50 AM
emmadi, you should look at the TinyMCE documentation to find out how to make it read only. It should be possible, but I'm not sure that you can remove buttons also.

From other hand, why you ever need TinyMCE for this? Why not simply insert an HTML code you took from editor to a DIV? Yes, it may be not that easy as switching on a "read only" flag, but it at least looks like a correct solution.

emmadi
25 Feb 2009, 2:51 AM
Thankyou for the reply xor...
now i have removed the window and redirected the form to an other jsp page which contain non editable editor and displaying the data... but i am getting an empty row in the bottom indicates the tool bar...Is it possible to remove that row

please check the attached images and even u can check my code from
http://extjs.com/forum/showthread.php?p=294005#post294005

emmadi
25 Feb 2009, 3:52 AM
Why not simply insert an HTML code you took from editor to a DIV?

can you please tell me how to insert an HTML code to a DIV dynamically

mschwartz
2 Mar 2009, 11:24 AM
Any way to get more events from this?

I mean, it'd be nice to know when the content of the editor changes or when the editor blurs and focuses (for example).

mjh
11 Mar 2009, 5:38 PM
Hey xor,

Great plugin. However I've noticed that the styleselect button isn't working. This appears to be the case on your demo pages as well - in particular, here (http://blogs.byte-force.com/xor/tinymce/test.onready.html). It isn't working for me on ff/mac or safari/mac, nor for my colleague with ie7/win. I peeked at the source code but couldn't make any headway on the issue. I didn't notice any errors being thrown in firebug either. Would really appreciate it if you could take a peek at that code again.

Thanks,
matt

xor
12 Mar 2009, 1:18 AM
Great plugin. However I've noticed that the styleselect button isn't working. This appears to be the case on your demo pages as well - in particular, here (http://blogs.byte-force.com/xor/tinymce/test.onready.html). It isn't working for me on ff/mac or safari/mac, nor for my colleague with ie7/win. I peeked at the source code but couldn't make any headway on the issue. I didn't notice any errors being thrown in firebug either. Would really appreciate it if you could take a peek at that code again.


I believe this select should contain names of CSS classes that TinyMCE found in the stylesheet specified in TinyMCE configuration. In my example there is no stylesheet specified, so this select should not work. I recall that in some project were getting some CSS classes in this list. Please, look at their documentation for more details, because I don't remember how exactly does it work.

mjh
12 Mar 2009, 10:00 AM
I believe this select should contain names of CSS classes that TinyMCE found in the stylesheet specified in TinyMCE configuration. In my example there is no stylesheet specified, so this select should not work. I recall that in some project were getting some CSS classes in this list. Please, look at their documentation for more details, because I don't remember how exactly does it work.

Yes sir, you are correct. I simply overlooked adding the css declaration for the styles in the underlying tiny_mce config. Silly me.

Thanks for your help and the great plugin.

matt

ahwin
31 Mar 2009, 3:35 AM
Hi All,

I am using the second example 'test.openclose.html' from the Ext.ux.TinyMCE demo package to render components of an ext modal window. But every time when the modal window is opened up, the tinymce editor eats up a lot of browser memory. Is there any way to free up the memory when we close the modal window?

Iam testing the app using google chrome - task manager.

thanks
ahwin

ahwin
31 Mar 2009, 9:22 PM
Hi All,

Iam still struggling to find a solution.

thanks

queej
1 Apr 2009, 5:22 AM
I wanted to set the readonly feature of the TinyMCE based on the permissions of my users. I was looking through the code, but I can't quite figure out how to do that. If I set it that way in the initial configuration the content does not appear, so I am thinking I may have to make the call after it is rendered. What call would I use? Something like Ext.getCmp("myEd").set({readonly:true})?

ahwin
2 Apr 2009, 2:11 AM
Hi XOR,

also when we load tinymce on ext modal it takes some time to load. How can we minimize the load time?

thanks
ahwin

xor
2 Apr 2009, 4:14 AM
Hi All,

Iam still struggling to find a solution.

thanks

Sorry, haven't noticed your message. Honestly, I don't know what's happening. Will try to look at it.

xor
2 Apr 2009, 4:23 AM
I wanted to set the readonly feature of the TinyMCE based on the permissions of my users. I was looking through the code, but I can't quite figure out how to do that. If I set it that way in the initial configuration the content does not appear, so I am thinking I may have to make the call after it is rendered. What call would I use? Something like Ext.getCmp("myEd").set({readonly:true})?

Public version became quite outdated already. I have to clean up our development version and release it. For a while you can add these two methods to the component:

/** ----------------------------------------------------------
*/
disable: function() {
this.withEd(function() {
var bodyEl = this.ed.getBody();
bodyEl = Ext.get(bodyEl);

if (bodyEl.hasClass('mceContentBody')) {
bodyEl.removeClass('mceContentBody');
bodyEl.addClass('mceNonEditable');
}
});
},

/** ----------------------------------------------------------
*/
enable: function() {
this.withEd(function() {
var bodyEl = this.ed.getBody();
bodyEl = Ext.get(bodyEl);

if (bodyEl.hasClass('mceNonEditable')) {
bodyEl.removeClass('mceNonEditable');
bodyEl.addClass('mceContentBody');
}
});
},

xor
2 Apr 2009, 5:19 AM
Hi XOR,

also when we load tinymce on ext modal it takes some time to load. How can we minimize the load time?

thanks
ahwin

About this question you'd better consult TinyMCE website. My control is not more than wrapper around it, so almost all of original behavior is here.

ahwin
5 Apr 2009, 9:33 PM
Hi XOR,

To reproduce the memory issue.. try the test.openclose.html example on google chrome.. so every time when the tinymce editor opens up the task manager will show some increase in the memory.. I should be able to free up that memory..

thanks

sergiu079
6 Apr 2009, 4:50 AM
Hello,
I want to capture the "blur" event but it doesn't trigger at all. Did anyone had the same problem till now? Any suggestion is welcomed.

xor
6 Apr 2009, 6:25 AM
Hello,
I want to capture the "blur" event but it doesn't trigger at all. Did anyone had the same problem till now? Any suggestion is welcomed.
You are right, it doesn't fire "blur". I've tried several approaches that seemed logical, but they don't work. Advices are highly appreciated.

scottco
7 Apr 2009, 9:42 AM
Hi all,

I hope this is the right place to be posting this.

I was using the plugin and all was good until I tried the Image Manager (the paid for plugin from moxiecode). A couple of modifications were required. Now I'm not suggesting this the is the best answer but it works. I am using TinyMCE 3.2.2.1 and Image Manager 3.0.6.1 (not the latest version) and Ext.ux.TinyMCE 0.6.

At the setTitle method of WindowManager add at the top:

if ( win == 'Moxiecode Image Manager') {
var w = Ext.getCmp( ti );
if( w ) w.setTitle( 'Image Manager');
return;
};

At the close method of WindowManager add at the top:

// ImageManager
if( win.mcImageManager ) {
var w = Ext.getCmp( this.params.mce_window_id );
if( w ) {
this.onClose.dispatch( this );
w.close();
}
}
[ using this.params.mce_window_id doesn't seem ideal - but I couldn't find a more sensible reference to the Ext component anywhere]

The Image Manager isn't the same as a regular TinyMCE inline window hence the current code doesn't work. It may be that this is fixed with the latest version of the Image Manager but i'm not using that - so I can't test. It may also be the the fix could be at a lower level - but I'm not sure how right now, and a fix is required :)

It also just occurred to me that window resize might not work - haven't checked this.

Hope this helps someone. Scott

queej
8 Apr 2009, 11:01 AM
Thanks for the great extension!

I am having one problem. When I check for isDirty() I am getting a message in Firebug from TinyMCE:

this.getDoc() is null
_init()()tiny_mce.js (line 1)
_init()()tiny_mce.js (line 1)
_init()()tiny_mce.js (line 1)
isDirty()()Ext.ux.TinyMCE.js (line 196)
isDirty()()elms.all.js (line 29772)
each()(function(), undefined)elms.all.js (line 6835)
isDirty()()

but only if I have made a change in the content. (The "elms.all.js" file is an amalgamation of a bunch of js files, including Ext.)

I tried a suggestion by EMP above, viz. changing the onDestroy to beforeDestroy in the extension, but that seems to have no effect.

I am regularly creating and destroying instances of the editor, which I believe is related to this. I wouldn't need to destroy and re-create if I could change params to the editor (like readonly and the document_base_url) on the fly.

Any idea what could be causing the getDoc() is null error? Also, is there a way to change the params to the existing editor on the fly?

Thanks,
-dqj

queej
8 Apr 2009, 12:57 PM
Another option for me would be to respond to an onChange event from the editor. I saw something in postings in this thread about that, but I didn't see an implementation. Would that be a possibility, and if so, does someone have the code for that method?

Thanks,
-dqj

xor
13 Apr 2009, 6:07 AM
I am having one problem. When I check for isDirty() I am getting a message in Firebug from TinyMCE:

this.getDoc() is null
_init()()tiny_mce.js (line 1)
_init()()tiny_mce.js (line 1)
_init()()tiny_mce.js (line 1)
isDirty()()Ext.ux.TinyMCE.js (line 196)
isDirty()()elms.all.js (line 29772)
each()(function(), undefined)elms.all.js (line 6835)
isDirty()()

...

I am regularly creating and destroying instances of the editor, which I believe is related to this. I wouldn't need to destroy and re-create if I could change params to the editor (like readonly and the document_base_url) on the fly.

Any idea what could be causing the getDoc() is null error? Also, is there a way to change the params to the existing editor on the fly?


Interesting, looks like TinyMCE thinks that editor is not initialized at the isDirty() call. Please try to modify isDirty in Ext.ux.TinyMCE like this:

isDirty: function() {
if (this.disabled || !this.rendered) {
return false;
}
this.withEd(function() {
return this.ed.isDirty();
}
},

To make editor readonly and back you can use the following methods:

/** ----------------------------------------------------------
*/
disable: function() {
this.withEd(function() {
var bodyEl = this.ed.getBody();
bodyEl = Ext.get(bodyEl);

if (bodyEl.hasClass('mceContentBody')) {
bodyEl.removeClass('mceContentBody');
bodyEl.addClass('mceNonEditable');
}
});
},

/** ----------------------------------------------------------
*/
enable: function() {
this.withEd(function() {
var bodyEl = this.ed.getBody();
bodyEl = Ext.get(bodyEl);

if (bodyEl.hasClass('mceNonEditable')) {
bodyEl.removeClass('mceNonEditable');
bodyEl.addClass('mceContentBody');
}
});
},

mschwartz
13 Apr 2009, 6:32 AM
FWIW, tinyMCE's isDirty() method is incredibly slow for big files.

emmadi
23 Apr 2009, 11:05 PM
Hi xor
I am using the Tiny MCE in my application and i have an issue in adding a image to the editor....
My issue is If user adds an image which is in the project inside a folder then the image is not appearing because the user know only the image name but not the folder name where it is present so in the popup he writes only image name but not the path .... ...but if i add a image which is there in the project directly then it works fine
i know i need to change the default path ... but not able to understand Where should i change the path which specifies the folder name
Give me some idea about the path setting....

Thank you..

xor
24 Apr 2009, 12:21 AM
Hi xor
I am using the Tiny MCE in my application and i have an issue in adding a image to the editor....
My issue is If user adds an image which is in the project inside a folder then the image is not appearing because the user know only the image name but not the folder name where it is present so in the popup he writes only image name but not the path .... ...but if i add a image which is there in the project directly then it works fine
i know i need to change the default path ... but not able to understand Where should i change the path which specifies the folder name
Give me some idea about the path setting....

Emmadi, you have to consult TinyMCE documentation with such questions. Most likely, it's in configuration section - http://wiki.moxiecode.com/index.php/TinyMCE:Configuration. My component is merely a tiny wrapper around the editor.

ZooKeeper
27 Apr 2009, 11:10 PM
Waiting for the new release :((

nikatwork
4 May 2009, 7:58 PM
Has anyone got this to work with drag and drop?

Using the default config, the following error is thrown after dnd:
"t.win.document is null" tiny_mce_src.js (line 5187)

I'm pretty sure this is because the underlying TinyMCE textarea is being moved in the DOM, which is freaking out the editor.

There's probably a way to update the "textareaEl" property to point at the new DOM element, but I haven't worked it out yet.

Has anybody already done this?

nikatwork
4 May 2009, 10:49 PM
I have kludged a solution by .remove() ing the TinyMCE item, creating a new one and then .insert() ing it and re-setting the value after notifyDrop has finished DOM manipulation.

Updating TinyMCE's DOM reference to the underlying textarea would be a lot quicker, so I'm curious to know if anyone has developed a technique for this. :-/

xor
4 May 2009, 11:43 PM
nikatwork, can you please explain your situation in more details? You dragging the control itself, which results in reposition of control's DOM elements in the document, right? And this breaks it down? Why should it? How it should be done to avoid?

Sorry, if I'm asking things that you've explained already, but I just didn't grock it in its fullness.

ahwin
5 May 2009, 3:49 AM
Hi All,

I want to remove modal for 'Find/Replace' function only i.e. set the modal property to false for Ext.window. How can I do that?

thanks

nikatwork
5 May 2009, 4:31 PM
xor, firstly thanks for a great ux - it's allowed me to ditch FCK editor! :D

I don't have time to post a simple test case now, but basically I have a "master" panel that contains bunch of subpanels, holding TinyMCE editors. Drag and dropping the subpanels reorders them in the master panel's item list, as per the portal example (http://extjs.com/deploy/dev/examples/portal/portal.html).

As I understand it, TinyMCE relies on a hidden textarea. If that gets moved in the DOM, it breaks the editor. So ideally there would be a way to update or refresh the editor's textarea reference. (I briefly tried doing this using the tinyMCE API with no luck.)

My workaround is doing the trick anyway, instead of moving the subpanel, I destroy it and create a new one at the desired position.

Cipher
5 May 2009, 10:10 PM
Hi, guys,

I have a simple form with Ext.TinyMCE. I found when I setup some css advantage options, the html value of Ext.tinyMCE field won't be sync after setup form submit, but the setup effect is display currently.

my source code:



Ext.namespace('my');
my.winFormCUDoc = function(config){
...
this.form = new Ext.FormPanel({
......
{
fieldLabel: '內文',
name: 'HtmlBody',
xtype: "tinymce",
anchor:'95%',
height: 300,
tinymceSettings: {
theme : "advanced",
plugins: oz.siteConfig.userPlugins,
theme_advanced_buttons1 : oz.siteConfig.userButtons1,
theme_advanced_buttons2 : oz.siteConfig.userButtons2,
theme_advanced_buttons3 : "",
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]",
file_browser_callback: 'oz.fileBrowser',
content_css: '/css/oz/tinyMCE.css',
relative_urls : false
}
},
....
//constructor
my.winFormCUDoc.superclass.constructor.call(this, {
......
autoHeight: true,
modal: true,
autoScroll: true,
buttons: [{
text: dlg.btnSubmitSave,
handler: this.onSubmit,
scope: this
},
......
],
items: this.form
});
};
Ext.extend(my.winFormCUDoc, Ext.Window, {
...
onSubmit: function(){
var form = this.form.form;
tinyMCE.triggerSave();

form.submit({
.......
},
......
});
},
......
});


My question is how to sync the tinyMCE html value after setup the css value of image or table?

P.S: By the way, I submit a ticket to Ext Support team before I post here, they say Ext.form.textarea class won't do any clear html or css tag before the form submited.

xor
6 May 2009, 9:10 AM
Hi, guys,

I have a simple form with Ext.TinyMCE. I found when I setup some css advantage options, the html value of Ext.tinyMCE field won't be sync after setup form submit, but the setup effect is display currently.



Cipher, just use syncValue() at the editor field before submit and everything should work good.

xor
6 May 2009, 9:17 AM
xor, firstly thanks for a great ux - it's allowed me to ditch FCK editor! :D

I don't have time to post a simple test case now, but basically I have a "master" panel that contains bunch of subpanels, holding TinyMCE editors. Drag and dropping the subpanels reorders them in the master panel's item list, as per the portal example (http://extjs.com/deploy/dev/examples/portal/portal.html).

As I understand it, TinyMCE relies on a hidden textarea. If that gets moved in the DOM, it breaks the editor. So ideally there would be a way to update or refresh the editor's textarea reference. (I briefly tried doing this using the tinyMCE API with no luck.)

My workaround is doing the trick anyway, instead of moving the subpanel, I destroy it and create a new one at the desired position.

Thanks for great mark, though in such cases I always feel myself guilty that I'm not updating it for ages. :)

I see a kind of dilemma in your case. Moving of textarea breaks TinyMCE, but if we'll left it where it is, it will produce garbage on the page. What is better (or what is worse)?

I remember that in TinyMCE there were the ability to switch rich editing off falling back to textarea. Maybe it will work for your if you'd switch it back before dragging and forth again after?

Cipher
6 May 2009, 6:23 PM
Cipher, just use syncValue() at the editor field before submit and everything should work good.

I did it, but the field value didn't sync. my code is below:



...
Ext.extend(oz.doc.winFormCUDoc, Ext.Window, {
onSubmit: function(){
var form = this.form.form;
a = Ext.getCmp('tinymceHtmlEditor');
a.syncValue(); // add this line before submit
tinyMCE.triggerSave();

form.submit({
....
I made a little test from TinyMCE official website,
http://tinymce.moxiecode.com/examples/full.php
I found a different result between Ext.TinyMCE and TinyMCE.

Please see the attached files.

TinyMCE will sync the html value after any change, but Ext.TinyMCE didn't.

So, I think that is why even sync the value before submit won't get work.

xor
6 May 2009, 11:41 PM
Cipher, I don't know what is your problem really. Some facts:
1. syncValue() method just calls save() method of corresponding editor. So you don't need to call triggerSave() after it, because it's basically the same operation, but for all editors on the page.
2. In the full example you pointed me out, TinyMCE patches form to perfrom saving on submit. Read docs on submit_patch configuration parameter.
3. It should either sync always or never. It's inlogical if it syncs some edits and doesn't sync other.
4. TinyMCE itself can filter elements and attributes of resulting HTML. Maybe your custom formatting just falls out of set of allowed attributes?

treadmill
7 May 2009, 2:03 AM
Is this going to be fixed in Ext.ux.TinyMCE or is this a problem with Image Manager? I have the exact same problem.


Hi all,

I hope this is the right place to be posting this.

I was using the plugin and all was good until I tried the Image Manager (the paid for plugin from moxiecode). A couple of modifications were required. Now I'm not suggesting this the is the best answer but it works. I am using TinyMCE 3.2.2.1 and Image Manager 3.0.6.1 (not the latest version) and Ext.ux.TinyMCE 0.6.

At the setTitle method of WindowManager add at the top:

if ( win == 'Moxiecode Image Manager') {
var w = Ext.getCmp( ti );
if( w ) w.setTitle( 'Image Manager');
return;
};At the close method of WindowManager add at the top:

// ImageManager
if( win.mcImageManager ) {
var w = Ext.getCmp( this.params.mce_window_id );
if( w ) {
this.onClose.dispatch( this );
w.close();
}
}[ using this.params.mce_window_id doesn't seem ideal - but I couldn't find a more sensible reference to the Ext component anywhere]

The Image Manager isn't the same as a regular TinyMCE inline window hence the current code doesn't work. It may be that this is fixed with the latest version of the Image Manager but i'm not using that - so I can't test. It may also be the the fix could be at a lower level - but I'm not sure how right now, and a fix is required :)

It also just occurred to me that window resize might not work - haven't checked this.

Hope this helps someone. Scott