PDA

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



Pages : 1 [2]

xor
7 May 2009, 2:51 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.

For now patch your copy of Ext.ux.TinyMCE.

treadmill
7 May 2009, 3:25 AM
That fix does not work for me.

I am calling the Image Manager from a toolbar on the TinyMCE toolbar. I then click the browse button, which opens the Image Manager, when I get the usual error.



WindowManager.superclass.setTitle is undefined
WindowManager.superclass.setTitle.call( this, win, ti );


The code to add at the top of SetTitle, does not work:

The win actually equals: Window index.html, when I do a; console.debug(win);


if ( win == 'Moxiecode Image Manager') {
var w = Ext.getCmp( ti );
if( w ) w.setTitle( 'Image Manager');
return;
};Any ideas how I can fix this?

xor
7 May 2009, 11:46 PM
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

Try tweaking WindowManager.open method.

kavih7
3 Jun 2009, 11:28 AM
Was having an issue with SQL erroring out because of some crappy stuff Microsoft Word pastes put into the tinyCME editor. The issue had to do with <link> tags containing local paths to resources that have URIs that go nuts with forward and backward slashes.

Example:
<link rel="File-List" href="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\02\clip_filelist.xml" />

My solution is to just strip out any <link> tags. I know the solution only covers <link> tags and can probably be integrated much better than the way I did it, but it works for the implementation I need it for. Only tested in FF3+:



getValue : function()
{
if (this.editor && this.editor_rendered) {
this.editor.save();
}

//-------------- MY NEW CODE -----------------------------//
//Remove any link tags from the content, as microsoft may add these in and they have weird URI syntax that breaks
//our ExtJS Ajax implementation
var value = Ext.ux.form.TinyMCE.superclass.getValue.call(this);
var msRegex = new RegExp("<link\\s.+?/>", "gi");

if (msRegex.test(value))
{
value = value.replace(msRegex, '');
}

return value;
//-------------- END MY NEW CODE -----------------------------//
},


Hope this helps others that may have run into this obscure problem.

EDIT: See my post a few posts down for the real solution

mystix
3 Jun 2009, 7:11 PM
Was having an issue with SQL erroring out because of some crappy stuff Microsoft Word pastes put into the tinyCME editor. The issue had to do with <link> tags containing local paths to resources that have URIs that go nuts with forward and backward slashes.

shouldn't you be escaping your SQL string on the server before stuffing it into your database?
you're begging for an SQL-injection attack if you haven't done so already.

xor
5 Jun 2009, 3:06 AM
Was having an issue with SQL erroring out because of some crappy stuff Microsoft Word pastes put into the tinyCME editor. The issue had to do with <link> tags containing local paths to resources that have URIs that go nuts with forward and backward slashes.

kavih7, I'd say getValue is not the best place for this cleanup. Yes, pasting from Work produces a lot of crap. But it happens during pasting. You paste, then edit text with all that crap and only then gets value. getValue is supposed to return "exact" (cleaned up) value of the rich text field. So it's better if editor would contain correct data during editing process. AFAIK, it is possible to clean it up after paste. Look at TinyMCE dox.

xor
5 Jun 2009, 3:08 AM
shouldn't you be escaping your SQL string on the server before stuffing it into your database?
you're begging for an SQL-injection attack if you haven't done so already.
Mystix, TinyMCE itself has good clean up procedure. It produces correct xhtml which contains only elements and attributes that you allowed. But you are right - it's anyway necessary to protect yourself from possible code injection on server side.

kavih7
5 Jun 2009, 7:40 AM
kavih7, I'd say getValue is not the best place for this cleanup. Yes, pasting from Work produces a lot of crap. But it happens during pasting. You paste, then edit text with all that crap and only then gets value. getValue is supposed to return "exact" (cleaned up) value of the rich text field. So it's better if editor would contain correct data during editing process. AFAIK, it is possible to clean it up after paste. Look at TinyMCE dox.

Hi xor,

I actually tested my previous solution with incorrect content, so that is why I "thought" it worked. After further testing, I found it best to just add an onSaveContent handler:



onSaveContent : function(ed, o)
{
var value = Ext.ux.form.TinyMCE.superclass.getValue.call(this);
var msRegex = new RegExp("<link\\s.+?/>", "gi");

if (msRegex.test(o.content))
{
o.content = o.content.replace(msRegex, '');
}

return o.content;
}


So, anyone reading this, DON'T use the previous solution I proposed in an earlier post as that is not working code. Maybe I'll go try to delete that post...?

thesilentman
10 Jun 2009, 12:20 PM
@Treadmill
Got the same messages and imagemanager does not display folders or files as it seams that it stops processing further. Do you get folders and images displayed after the error?
BTW, same thing happens with filemanager.
All versions are current and imagemanager and filemanager examples work perfectly standalone.

Have you found any solution to that?

Thanks,
Frank


That fix does not work for me.

I am calling the Image Manager from a toolbar on the TinyMCE toolbar. I then click the browse button, which opens the Image Manager, when I get the usual error.



WindowManager.superclass.setTitle is undefined
WindowManager.superclass.setTitle.call( this, win, ti );


The code to add at the top of SetTitle, does not work:

The win actually equals: Window index.html, when I do a; console.debug(win);


if ( win == 'Moxiecode Image Manager') {
var w = Ext.getCmp( ti );
if( w ) w.setTitle( 'Image Manager');
return;
};Any ideas how I can fix this?

Aniruddha
25 Jun 2009, 2:22 AM
Hi
I am using ext-js 3.0 RC1 and tinyMCE 3.2.4.1 with your plugin v0.6 it does work as part of a tab panel however whenever I try saving the data the form element returns empty value
I tried calling tinyMCE.triggerSave() or tinyMCE.syncValue() both gives one error as below
any help will be appreciated.

Error:
u is undefined
http://localhost:8080/wsm/lib/tiny_mce/tiny_mce.js
Line 1



regards
Aniruddha

mjh
3 Jul 2009, 3:06 PM
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 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]



I had to change


if( win.mcImageManager )to


if( win.ImageManager ) {To get the image manager window to close automatically after selection of the image.

vishee
7 Jul 2009, 3:51 AM
Hi,

After downloading the French language pack for TinyMCE and integrating it under my project I tried to change the language via the plugin Ext.ux.TinyMCE.js but was not able to get the french text on tooltip.


I tried adding some codes in Ext.ux.TinyMCE.js :

the method initTinyMCE was changed as follows:

var s = {
mode : "none",
plugins : Ext.ux.TinyMCE.tinymcePlugins,
theme: "advanced",
language: "fr"
};

But this did not work.

Any idea what is wrong?

Using ExtJS 2.2 and the latest version of the Ext.ux.TinyMCE.js (V0.6)
Note that I have no issues when using the default English language.

xor
7 Jul 2009, 4:26 AM
Vishee, it should work when you simply pass necessary language in tinymceSettings.language config parameter. At least it is working well with russian locale.

vishee
7 Jul 2009, 5:16 AM
xor, thanks for your prompt reply.

As per your advice, I have changed the language setting - removed if from initTinyMCE method and added it in the constructor as follows

var config = {
tinymceSettings: {
accessibility_focus : false,
language: "fr"

}
};

When testing with this code, it gives me the English text.

The French language pack for TinyMCE works well when there is no integration with ExtJS. However I have noted that the code in the earlier post (#262) gave me the text key values like 'advanced.bold_desc' etc. I don't know whether tinyMCE does find the proper path for the fr files. How can I test this?

Thanks in advance.

xor
7 Jul 2009, 6:41 AM
Vishee, try to initialize TinyMCE using Ext.ux.TinyMCE.initTinyMCE method. Do it onLoad() of the page. And don't forget to specify language in the call to this method. Parameters are the same as in call to tinyMCE.init().

thesilentman
7 Jul 2009, 9:07 AM
Finally got some time to take a look at the extension and do a little testing.


The problem with opening a plugin's window (in my case image manager and file manager) and getting error messages like:


WindowManager.superclass.setTitle is undefined
WindowManager.superclass.setTitle.call( this, win, ti );

... can be fixed by adding in the 'open' function, after :



this.params = p;




the following:




if (p.handle=='file'){
s.name='File Manager';
}
if (p.handle=='image,media'){
s.name='Image Manager';
}




and after




setTitle : function( win, ti ) {


the following:


if ( ti == 'Moxiecode Image Manager' || ti == 'Moxiecode File Manager') {
return;
};





The first part checks if we're using the file or image manager and sets the title accordingly.

The second part again checks for usage of one of the above and returns to the caller. (This way it doesn't go further down the script, which causes the error).

If you have any other plugins you can just change the check for the p.handle to check for your plugin's handle.
Don't forget to change the second part, too, according to your plugin's title.

Hope I helped.

Greetings,
Frank

vishee
8 Jul 2009, 12:41 AM
Vishee, try to initialize TinyMCE using Ext.ux.TinyMCE.initTinyMCE method. Do it onLoad() of the page. And don't forget to specify language in the call to this method. Parameters are the same as in call to tinyMCE.init().

Xor, I think that your solution here is the right one. I have applied it and now instead of showing the french text it shows 'advanced.underline_desc' etc. I think that the problem is that it is trying to look for the fr.js file but does not find it though I have the fr.js file under the 'langs' folder. I have all the fr files under the 'langs' folder.

When I changed the language to 'en' with
Ext.ux.TinyMCE.initTinyMCE({ language: "en"});

all the stuffs was working as before which means that it can see all the en files and the corresponding keys.

So I can conclude that it may be something to do with the French language pack. Will try to check and keep you updated.

Thanks

vishee
8 Jul 2009, 1:20 AM
Xor, I think that your solution here is the right one. I have applied it and now instead of showing the french text it shows 'advanced.underline_desc' etc. I think that the problem is that it is trying to look for the fr.js file but does not find it though I have the fr.js file under the 'langs' folder. I have all the fr files under the 'langs' folder.

When I changed the language to 'en' with
Ext.ux.TinyMCE.initTinyMCE({ language: "en"});

all the stuffs was working as before which means that it can see all the en files and the corresponding keys.

So I can conclude that it may be something to do with the French language pack. Will try to check and keep you updated.

Thanks

Xor, I finally got it to work :D.

As I was using tinymce inside a Window, I just added the language to the tinymceSettings and it is working now. I do feel that your solution should have done the trick. I still have kept the changes that you suggested previously. Thanks for your help and patience.

Please find below extract of the solution:


myEditorWin = new Ext.Window({
applyTo : 'layer-win',
layout : 'fit',
width : 650,
height : 400,
closeAction :'hide',
closable : true,
plain : true,
bodyStyle : 'top: 200px;',
region: 'center',
autoScroll: true,
items:
[{
xtype: 'tinymce',
id:'editor',
fieldLabel:'Ins&eacute;rer texte',
height:200,
width:200,
anchor:'98%',
tinymceSettings: {
language : 'fr',
theme : 'advanced',
plugins: 'example,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,|,bullist,numlist,|,fontselect,fontsizeselect,|,mylistbox', /*add bullist and numlist on the menu tollbar*/
theme_advanced_buttons2 : 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor',
theme_advanced_buttons3: '',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align : 'left',
//theme_advanced_statusbar_location : 'bottom',
theme_advanced_resizing : true
//content_css : 'css/myEditorContent.css'
}
}
],...

xor
31 Jul 2009, 9:42 AM
Hi!

Guys, I've just finished v0.7-b1. Works with ExtJS 3.0 and latest TinyMCE. Let's altogether test it.

thesilentman
2 Aug 2009, 6:25 AM
Andrew,

seems to work fine with a few tests. Though not thoroughly tested yet.
However I had to redo the additions, I posted in a previous post, to get the image and filemanager plugins running.

Thanks for the great plugin!

xor
2 Aug 2009, 11:27 PM
Andrew,

seems to work fine with a few tests. Though not thoroughly tested yet.
However I had to redo the additions, I posted in a previous post, to get the image and filemanager plugins running.

Thanks for the great plugin!
Thank you for testing.

Sorry, I didn't take your proposed patch, because in the branch I'd like to have more robust solution thad doesn't rely on comparing string values. It's too fragile when you think about localization, for example.

thesilentman
2 Aug 2009, 11:44 PM
Thank you for testing.

Sorry, I didn't take your proposed patch, because in the branch I'd like to have more robust solution thad doesn't rely on comparing string values. It's too fragile then you think about localization, for example.

Andrew,
No issue. I know it's more complicated than this. However, for me it's just a patch to make it run with the plugins.
I didn't think you would include the patch it as it is. I remember reading that you don't use those plugins so I just presented the workaround that works with those plugins ;). Maybe knowing what's happening points you to some direction.

Greets,
Frank

armagedon
6 Aug 2009, 8:05 AM
I have applied it and now instead of showing the french text it shows 'advanced.underline_desc' etc.

I have the same problem as vishee. Instead of text it displays 'advanced.underline_desc' etc. I am using german language pack. If I instantiate TinyMCE outside of Ext JS with the language property set to "de" it displays all correct.

Using the Extension it goes worng. But some buttons have correct titles in german.
I cleared the cache, I used init on load, also the lang property in tinymceSettings and as a parameter for init Fn. It didn't help.
Thanks for any suggsetions!

scipio
13 Aug 2009, 12:29 AM
Great extension.

Wanted to mention that sometimes the onResize method passes incorrect values for adjustedWIdth & adjustedHeight. For example, if I add buttons to the bottom chrome of a Ext.Window, for some reason it passes a height that ignores the button height and screws up the tinyMCE sizing.

I lookup the component height & width on each resize event



onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
this.tinyMCE.theme.resizeTo(this.getWidth(), this.getHeight());
}

Thanks again for the extension.

xor
17 Aug 2009, 3:21 AM
I have the same problem as vishee. ...
I thought Vishee already solved it - http://extjs.com/forum/showthread.php?p=354407#post354407

xor
17 Aug 2009, 3:34 AM
Great extension.

Wanted to mention that sometimes the onResize method passes incorrect values for adjustedWIdth & adjustedHeight. For example, if I add buttons to the bottom chrome of a Ext.Window, for some reason it passes a height that ignores the button height and screws up the tinyMCE sizing.

I lookup the component height & width on each resize event



onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
this.tinyMCE.theme.resizeTo(this.getWidth(), this.getHeight());
}

Thanks again for the extension.

Scipio, thank you for feedback. Can you try to make a test page for this issue? You solution is simple, of course, but looks a bit too radical. :)

Dumbledore
20 Aug 2009, 2:45 AM
Hi,

there is a small bug when using Ext.uxTinyMCE inside a Ext.Editor. All runs fine expect that the tinyMCE-Windows are opened behind the Editor.

Currently i try to figure out how to fix it. Perhaps we need a new Ext.Windowgroup with a z-index greater then the editor...

To get the min z-index i must simple get the value in onRender():


onRender: function(ct, position) {
Ext.ux.TinyMCE.superclass.onRender.call(this, ct, position);

[...]
// Create TinyMCE editor.
this.ed = new tinymce.Editor(id, this.tinymceSettings);
this.ed.win_min_zIndex = this.container.zindex;


any ideas?


[update]

i fix this with add a listener for the windows


/** ----------------------------------------------------------
WindowManager
*/
open: function(s, p) {

s = s || {};
p = p || {};

if (!s.type)
this.bookmark = this.editor.selection.getBookmark('simple');

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 = true;
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,
minimizable: s.minimizable,
modal: true,
stateful: false,
constrain: true,
layout: "fit",
items: [
{
xtype: "iframepanel",
border: false,
defaultSrc: s.url || s.file,
stateful: false
}
],
listeners : {
show : function(win){
win.el.setZIndex(this.editor.win_min_zIndex + 10);
},
scope : this
}
});

xor
20 Aug 2009, 2:52 AM
To get the min z-index i must simple get the value in onRender():


Looks logical, but as I recall, there were some problems in getting container's zindex. But I don't remember it in details.

Dumbledore
20 Aug 2009, 3:27 AM
ok, the better solution:

in onRender:


// Create TinyMCE editor.
this.ed = new tinymce.Editor(id, this.tinymceSettings);

this.ed.windowmanager = new Ext.WindowGroup();
this.ed.windowmanager.zseed = 20000;

and in WindowManager open:


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,
minimizable: s.minimizable,
modal: true,
stateful: false,
constrain: true,
layout: "fit",
manager : this.editor.windowmanager,
items: [
{
xtype: "iframepanel",
border: false,
defaultSrc: s.url || s.file,
stateful: false
}
]
});


now searching for a solution for the alerts...

davidbuzatto
21 Aug 2009, 4:11 AM
Hello everybody.

First, I want to thank xor for the plugin because its very useful!

Well, lets see my problem. I building a interface that will be a learning material editor, and I choose TinyMCE to be the html editor. I'm creating the interface using a ext viewport.

The code is:

Application.viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'panel',
height: 54,
items: [
Application.menu,
Application.barraFerramentas
]
}, {
region: 'west',
xtype: 'panel',
layout: 'border',
split: true,
collapsible: true,
collapseMode: 'mini',
width: 250,
maxSize: 250,
items: [{
region: 'north',
xtype: 'panel',
layout: 'border',
title: 'Estrutura',
height: 450,
items: [{
region: 'west',
xtype: 'panel',
border: false,
bodyStyle: 'padding: 4px;',
width: 30,
items: [
Application.btnConceito,
{ xtype: 'panel', height: 12, border: false },
Application.btnNovaPagina,
{ xtype: 'panel', height: 4, border: false },
Application.btnNovoGrupo,
{ xtype: 'panel', height: 4, border: false },
Application.btnExcluirNo,
{ xtype: 'panel', height: 12, border: false },
Application.btnMoverNoDireita,
{ xtype: 'panel', height: 4, border: false },
Application.btnMoverNoEsquerda,
{ xtype: 'panel', height: 4, border: false },
Application.btnMoverNoCima,
{ xtype: 'panel', height: 4, border: false },
Application.btnMoverNoBaixo
]
},
Application.estrutura
]
}, {
region: 'center',
xtype: 'panel',
title: 'Objetos da Página'
}]
}, {
region: 'center',
xtype: 'panel',
items: [{
xtype: 'tinymce',
id: "richText",
name: "richText",
width: "100%",
height: "100%",
tinymceSettings: {
theme : "advanced",
plugins: "safari,pagebreak,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "fontselect,fontsizeselect,|,bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,backcolor,forecolor",
theme_advanced_buttons2 : "print,|,cut,copy,paste,|,search,replace,|,undo,redo,|,link,unlink,anchor,image,|,charmap,media,advhr",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid",
theme_advanced_buttons4 : "",
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]"
},
value: ""
}]
}, {
region: 'south',
xtype: 'panel',
height: 27,
items: [
Application.barraStatus
]
}]
});I having some problems:
First, the interface shows well, but I cant open any dialog of TinyMCE. When I first click in one of the buttons that opens dialogs, this erro pop in firebug:

Ext.DomHelper=function(){var s=null,j=/^...b.stopEvent();this.completeEdit()}}}});\nAnd the dialog don't open.
How can I fix it?

Second problem, how can I instantiate an tinymce object instead of insert it throught xtype: 'tinymce'?

P.S. The head of my html is:

<link rel="stylesheet" type="text/css" href="javascript/ext-3.0.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="css/estilosPrincipal.css">
<script type="text/javascript" src="javascript/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="javascript/ext-3.0.0/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="javascript/ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="javascript/tinymce-3.2.6/tiny_mce.js"></script>
<script type="text/javascript" src="javascript/ext-tinymce/Ext.ux.TinyMCE.js"></script>
<script type="text/javascript" src="javascript/application.js"></script>Im sending a screen shot too.
Thank you very much.
Regards

xor
23 Aug 2009, 11:56 PM
1. Instead of using xtype, you can instantiate control explicitly with "new Ext.ux.TinyMCE()".
2. Looks like you forgot to include managed iframe library. It's required. And please note that some of their last versions has problems with jQuery adapter. So if you see strange errors, try to switch to ext-base.

davidbuzatto
24 Aug 2009, 8:04 AM
Hi xor,

Thans for yor reply!

The library that you said (managed iframe library) is part of ext or tinymce? How can I add it?

Thank you!

Regards

davidbuzatto
24 Aug 2009, 8:34 AM
Hi again xor,

I already found the miframe package. Now everything is working fine!

Thank you very much!

Regards!

Stju
8 Sep 2009, 8:28 PM
Hello!
First of all, thanks for a great piece of software!
Secondly backk to my problem.. Hopefully someone else had experienced something similar and got workaround or some solution. Maybe there should be changed something in Ext.ux.TinyMCE ..
Using latest version 0.7b1 and Ext 3.
After adding tiny_mce_popup.js, to have filebrowser in tinyMCE, firebug gives


tinymce is null
tinymce.WindowManager,\r\n Ext.ux.TinyMCE.js (line 494)
tinymce is null
if (!tinymce.dom.Event.domLoaded)\r\n Ext.ux.TinyMCE.js (line 473)
Without this code filebrowser wont work properly...
Any solutions ?
Regards,
Stju

thesilentman
9 Sep 2009, 12:00 AM
Hello Stju,

Hello!
First of all, thanks for a great piece of software!
Secondly backk to my problem.. Hopefully someone else had experienced something similar and got workaround or some solution. Maybe there should be changed something in Ext.ux.TinyMCE ..
Using latest version 0.7b1 and Ext 3.
After adding tiny_mce_popup.js, to have filebrowser in tinyMCE, firebug gives


tinymce is null
tinymce.WindowManager,\r\n Ext.ux.TinyMCE.js (line 494)
tinymce is null
if (!tinymce.dom.Event.domLoaded)\r\n Ext.ux.TinyMCE.js (line 473)
Without this code filebrowser wont work properly...
Any solutions ?
Regards,
Stju
it seems like you had trouble like me with filemanager and imagamanager for tinymce.
Take a look at post 266 of this thread (a few pages back).

Greets,
Frank

albeva
19 Sep 2009, 8:56 PM
the isDirty doesn't work because no value is ever returned. here is a small fix for anyone who has trouble getting isDirty to work
isDirty: function() {
if (this.disabled || !this.rendered) {
return false;
}
/* this.withEd(function() {
return this.ed.isDirty();
}); */
return this.ed && this.ed.initialized && this.ed.isDirty();
}

xor
20 Sep 2009, 11:42 PM
Thank you Albeva! Certainly it was quite stupid from my side to code this method like this.

joejernst
21 Sep 2009, 11:01 AM
Using the v0.7b1 version of this extension, If I do a form.items.each( function (field) {alert(field.name + ": " + field.getValue())}) I can see the values from the tinyMCE fields, but if I do a form.getValues(), then the tinyMCE field values are blank.

I did not have this problem on v 0.6.

Has anyone else seen this?

joejernst
21 Sep 2009, 12:13 PM
Using the v0.7b1 version of this extension, If I do a form.items.each( function (field) {alert(field.name + ": " + field.getValue())}) I can see the values from the tinyMCE fields, but if I do a form.getValues(), then the tinyMCE field values are blank.

I did not have this problem on v 0.6.

Has anyone else seen this?

I was able to workaround this issue by using form.getFieldValues() instead.

albeva
21 Sep 2009, 3:47 PM
try calling syncValue() on tinymce field before hand

skunk
22 Sep 2009, 4:59 AM
With .7b, (and .6 as well by the way) an odd offset appears when using the plugin in a popup window.

http://i33.tinypic.com/59wlk0.png

This happens on your demo page as well, the second example. (http://blogs.byte-force.com/xor/tinymce/test.openclose.html).

Then a .7b specific thing, when I test the function with Firebug open (in firefox 3.5.3), all works well. When I close Firebug and refresh the page though, nothing pops up. I seriously have no clue whether this is me or the code...

I'm using ExtJs 3.0, miframe _05 and tinyMCE 3.2.6.

xor
22 Sep 2009, 5:11 AM
With .7b, (and .6 as well by the way) an odd offset appears when using the plugin in a popup window.
...
This happens on your demo page as well, the second example. (http://blogs.byte-force.com/xor/tinymce/test.openclose.html).

Offset is caused by FormLayout. There should be field label to the left.


Then a .7b specific thing, when I test the function with Firebug open (in firefox 3.5.3), all works well. When I close Firebug and refresh the page though, nothing pops up. I seriously have no clue whether this is me or the code...

I'm using ExtJs 3.0, miframe _05 and tinyMCE 3.2.6.

Not sure what code are you talking about. Considering it is your code. Check if you have any "console." references in it. When firebug is deactivated it doesn't work.

skunk
22 Sep 2009, 5:16 AM
Offset is caused by FormLayout. There should be field label to the left.



Not sure what code are you talking about. Considering it is your code. Check if you have any "console." references in it. When firebug is deactivated it doesn't work.
Epic failure on my part. Didn't know that console.log breaks code when Firebug is not used... Thanks.

Fieldlabel, I should be able to fix that then. Thanks again!

tfrugia
1 Oct 2009, 10:24 AM
Ux: 0.7-b1
TinyMCE: 3.2.7

I am getting this error:

this.ed.theme.resizeTo is not a function - Line 365

Also, the TinyMCE toolbar is rendering below the typing area. Should I try an older version of tinyMCE?

tfrugia
1 Oct 2009, 10:47 AM
I was able to get it worked out with 3.2.7. There was an additional override I applied that was the culprit.

sirioz10
8 Oct 2009, 2:56 AM
Hi,
seems that isDirty function always return false.


//Your code

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

//My fix:

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

I hope this help...

xor
8 Oct 2009, 3:06 AM
Hi!

Hi,
seems that isDirty function always return false.
...
//My fix:
...
Yes, it's known bug that was already discusses here. Your fix is also not fully correct. It should look like this:


/** ----------------------------------------------------------
*/
isDirty: function() {
if (this.disabled || !this.rendered) {
return false;
}
return this.ed && this.ed.initialized && this.ed.isDirty();
},

sirioz10
8 Oct 2009, 4:57 AM
Yes, it's known bug that was already discusses here. Your fix is also not fully correct. It should look like this:


/** ----------------------------------------------------------
*/
isDirty: function() {
if (this.disabled || !this.rendered) {
return false;
}
return this.ed && this.ed.initialized && this.ed.isDirty();
},
[/QUOTE]

Tanks a lot and sorry for repetition.

jenner
21 Oct 2009, 12:39 AM
Hi there,

I'm adding/removing Ext.ux.TinyMCE fields dynamically, turning a div (with a hidden textarea) into a tinymce field on demand. Now the latest version introduced a weird behavior - after I destroy() the field I still see some spurious DIVs left behind, here's a patch to make sure they're gone too:


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

mrjoltcola
25 Oct 2009, 12:08 PM
Hi!

Guys, I've just finished v0.7-b1. Works with ExtJS 3.0 and latest TinyMCE. Let's altogether test it.


Hi, the zip attachment is not valid for me. Am I missing something? Your website still includes only 0.6, but I am using ExtJS 3.0.

Thanks,
-mjc

sirioz10
4 Nov 2009, 9:50 AM
Hi,

I run tinymce 3.2.7, Ext.ux.TinyMCE v0.7b1 , ManagedIFrame 2.0 RC3 and Ext 3.0 on FF 3.5.

After render any plugin, the iframe always has width = 300px and height= 150px and It won't to resize itself.
in onRender of ManagedIFrame, something goes wrong.

Any idea?

http://arcadia-web.eu/Portals/11/tiny.JPG

sirioz10
5 Nov 2009, 4:53 AM
Perhaps the problem is related to the EventManager.js

I have changed it with this version (http://www.extjs.com/forum/showthread.php?t=72159) and now plugins windows are rendered correctly.

ZooKeeper
9 Nov 2009, 4:52 AM
Is there any solution to the problem of TinyMCE control not reinitializing after Layout, where it's located collapses/expands?

vanadium
1 Dec 2009, 8:03 AM
Hi,
i'm trying this extension and i find it very useful; now i'm encountering a problem.

I have this form panel inside a window, when i submit the php script recieves only "title" and "descr" as post data but not the "text" data even if i write inside the tinymce field.

I debugged it in php and the value of $_POST['text'] is empty.



var fp = new Ext.form.FormPanel({
width : 400,
height : 400,
frame : true,
items: [
{
xtype:'textfield'
,fieldLabel: 'Titolo'
,name: 'title'
,anchor:'100%'
},{
xtype:'textfield'
,fieldLabel:'Descrizione'
,name:'descr',
ancor: '100%'
},{
fieldLabel:'Testo'
,name:'text'
,anchor:'100%'
,height:300,
width: 600,
xtype: "tinymce",
tinymceSettings: {
theme : "advanced",
plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,preview,searchreplace,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,code,|,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]",value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"

}

}],
buttons: [{
text: 'Save',
handler: function()
{
fp.getForm().submit({
url: 'news.php',
params: {task: 'insert'},
waitMsg: 'Saving...',
success: function(f,a) {
NewsStore.reload();
//Ext.Msg.alert('Success', 'It worked');
PresidentCreateWindow.hide();
},
failure: function(f,a) {
Ext.Msg.alert('Warning', 'Error');
}
});


}},{
text: 'Cancel',
handler: function()
{
PresidentCreateWindow.hide();
}

}
],
anchor:'95%',
height:100

});



could anyne help me, please.

Thanks in advance

ahwin
10 Dec 2009, 3:18 AM
Hi All,

I want to tiny mce compressor from the url given below:
http://wiki.moxiecode.com/index.php/TinyMCE:Compressor/PHP
Please let me know if I can use it with the wrapper.

thanks
ashwin

liuliming
15 Dec 2009, 3:09 AM
Hello,xor,
which version of ManagedIFrame should v0.7-b1 work with?

Does it work well with ManagedIFrame 2.0/2.01 and extjs3.03? I get some problems.

Thanks


Hi!

Guys, I've just finished v0.7-b1. Works with ExtJS 3.0 and latest TinyMCE. Let's altogether test it.

xor
15 Dec 2009, 3:42 AM
Hello,xor,
which version of ManagedIFrame should v0.7-b1 work with?

Does it work well with ManagedIFrame 2.0/2.01 and extjs3.03? I get some problems.

Thanks

In our project it is working with ManagedIFrame 2.0 RC3. Only problem that occurs sometimes - is too small viewport in popup dialogs. It was discussed on this thread already.

Dumbledore
22 Dec 2009, 11:21 PM
Hi,

after some debugging a have a question about the special handler for the Gecko-Browser:


Ext.Element.fly(s.content_editable ? ed.getBody() : (tinymce.isGecko ? ed.getDoc() : ed.getWin()))
.on("focus", this.onFocus, this);

// Event of blur body
Ext.Element.fly(s.content_editable ? ed.getBody() : (tinymce.isGecko ? ed.getDoc() : ed.getWin()))
.on("blur", this.onBlur, this,
this.inEditor && Ext.isWindows && Ext.isGecko ? { buffer: 10} : null
);

Why is there a special handling for the Gecko-Browser? I have resize problems when use this. When i remove the special handling, all runs fine.


Ext.Element.fly(s.content_editable ? ed.getBody() : ed.getWin())
.on("focus", this.onFocus, this);

// Event of blur body
Ext.Element.fly(s.content_editable ? ed.getBody() : ed.getWin())
.on("blur", this.onBlur, this,
this.inEditor && Ext.isWindows && Ext.isGecko ? { buffer: 10} : null
);


Bye, Dumbledore

xor
24 Dec 2009, 5:16 AM
Hi!


...
Why is there a special handling for the Gecko-Browser? I have resize problems when use this. When i remove the special handling, all runs fine.


Honestly, I don't remember why do we need such browser sniffing here. Most likely this is a result of battle with focus events. Unsuccessful anyway. So let's remove this.

Fredric Berling
29 Dec 2009, 3:22 AM
All the links on the first post links to a 0.6 version , but everyone is saying they are running 0.7b1 ...where do i download that version?

xor
29 Dec 2009, 3:48 AM
All the links on the first post links to a 0.6 version , but everyone is saying they are running 0.7b1 ...where do i download that version?
Guys are taking version 0.7b1 from the forum post: Version 0.7b1 (http://www.extjs.com/forum/attachment.php?attachmentid=15365&d=1249062119). Please also review several last pages of this thread to find necessary fixes to this version.

Sorry for being such a slow developer. I already had to release it, but just can't find enough time.

Fredric Berling
29 Dec 2009, 4:16 AM
Great.. Im trying to get the demo to work with Ext 3.1 and MIF 2.1.. All i end up with is blank Ext window when i click the button, and no errormessages in firebug. Is there anyone else who tried this with success?

Loading form looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--Ext and ux styles -->
<link type="text/css" rel="stylesheet" href="Ext/resources/css/ext-all.css"/>

<!--Ext 3.1 official release-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="Ext/ext-all-debug.js"></script>

<!--MIF 2.1 build from trunk (2009-12-21)-->
<script type="text/javascript" src="mif/miframe.js"></script>

<!--tiny mce 3.2.7-->
<script type="text/javascript" src="tiny_mce/tiny_MCE_src.js"></script>

<!--Ext.ux.TinyMCE v0.7-b1 -->
<script type="text/javascript" src="UX/ext.ux.tinyMCE.js"></script>

<!--Application files-->
<script src="app.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<button id="cmdOpen">Open editor</button>
</body>
</html>


app.js look slike this (stolen from demo):

Ext.onReady( function() {

Ext.get( "cmdOpen" ).on( "click", function() {

var dlg = new Ext.Window({
title: "TinyMCE",
width: 600,
height: 500,
minWidth: 100,
minHeight: 100,
layout: "fit",
modal: false,
resizable: true,
maximizable: true,
closeAction: "hide",
hideMode: "offsets",
constrainHeader: true,
items: [
{
layout: "fit",
autoScroll: true,
bodyStyle: 'padding: 10px',
border: false,
bodyBorder: false,
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"
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
}
]
}
]
});

dlg.show( Ext.get( "cmdOpen" ) );
})
});

juste_millieu
10 Jan 2010, 10:42 PM
textfield is disable when I re-open the form. First time is fine but not after that. Please help :)



var text_subject = new Ext.form.TextField({
fieldLabel : "Subject",
name : "text_subject",
id : 'text_subject',
width : 700,
//allowBlank : false
})

var text_description =
[{
xtype: "tinymce",
id:'text_description',
name:'text_description',
width: 534 ,
height: 380,
tinymceSettings:
{
theme : "simple",
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"
},
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works CMS data ...</p>"
}]

var datevalue_start = new Ext.form.DateField({
format: 'Y-m-d',
name : "datevalue_start",
id : 'datevalue_start',
width: 150,
editable: false,
})

var timevalue_start = new Ext.form.TimeField({
name : "timevalue_start",
id : 'timevalue_start',
width: 100,
editable: false,
})

var datevalue_end = new Ext.form.DateField({
format: 'Y-m-d',
name : "datevalue_end",
id : 'datevalue_end',
width: 150,
editable: false,
})

var timevalue_end = new Ext.form.TimeField({
name : "timevalue_end",
id : 'timevalue_end',
width: 100,
editable: false,
})

function createRecord()
{
var text_description = Ext.getCmp('text_description');

Ext.Ajax.request
({
waitMsg: 'Please wait...',
url: 'newPlan-update.php',
params:
{
action: "insert",
db_subject: formPanel.getForm().getValues().text_subject,
db_description:text_description.getValue(),
db_startdate: formPanel.getForm().getValues().datevalue_start,
db_enddate: formPanel.getForm().getValues().datevalue_end,
//db_finished: formPanel.getForm().setValues('0'),
//db_parent: formPanel.getForm().setValues('0'),
//db_priority: formPanel.getForm().setValues('0')
},
success: function(response)
{
var result=eval(response.responseText);
switch(result)
{
case 1:
Ext.MessageBox.alert('Creation OK','Created successfully.');
win.hide();
resetFormValue();
break;
default:
Ext.MessageBox.alert('Warning','Could not create.');
resetFormValue();
break;
}
},
failure: function(response)
{
var result=response.responseText;
Ext.MessageBox.alert('Error','could not connect to the database. retry later');
}
});
}

var formPanel = new Ext.FormPanel
({
name: 'formPanel',
id: 'formPanel',
frame : true,
layout: 'form',
bodyStyle:'padding:5px 5px 0',
items :
[{
xtype : "fieldset",
title : "Basic",
autoHeight : true,
items : [text_subject,
{
layout: 'column',
fieldLabel : "Start Date/Time",
items: [datevalue_start, timevalue_start]
},{
layout: 'column',
fieldLabel: 'End Date/Time',
items: [datevalue_end, timevalue_end]
}]
},{
autoHeight : true,
title : "Details",
xtype : "fieldset",
items: text_description,
}],
buttons: [{
text: 'Save & Close',
//iconCls: 'print',
handler: function()
{
createRecord()
resetFormValue()
win.hide()
}
},{
text: 'Cancel',
handler: function()
{
resetFormValue()
win.hide()
}
}]
})

function resetFormValue()
{
text_subject.setValue('');
datevalue_start.setValue('');
datevalue_end.setValue('');
}

// Form creation
function createPanel()
{
win = new Ext.Window
({
title: 'Create New Plan',
width: 900,
height: 650,
items: formPanel,
closable: false,
})
win.show();
}

walldorff
14 Jan 2010, 7:02 AM
Thanks Andrew, for this wonderful plugin!

It occurred to me that maybe there's a little bug when opening the HTML Source Editor. Style markup is missing there.

For instance when inserting an image (see attached) and I explicitely want to apply some css style to the image, then the markup for that style is not in the HTML Source Editor. It is definitvely present in the HTML of the body, but when I click the Update button all style info is lost (both in IE and FF).

- This is not the case in the examples on moxiecode.com.
- I simply used your original sources.

Do you know the fix for that?

xor
14 Jan 2010, 7:27 AM
For instance when inserting an image (see attached) and I explicitely want to apply some css style to the image, then the markup for that style is not in the HTML Source Editor. It is definitvely present in the HTML of the body, but when I click the Update button all style info is lost (both in IE and FF).

Please check what elements and attributes are allowed for the editor. It is possible, that style attribute is not turned on, so it got stripped by TinyMCE.

walldorff
14 Jan 2010, 9:15 AM
Please check what elements and attributes are allowed for the editor. It is possible, that style attribute is not turned on, so it got stripped by TinyMCE.

Yes! That's it.

extended_valid_elements: 'img[class|style|src| ...|onmouseover|onmouseout|name]'

Thanks!

ivanatora
27 Jan 2010, 3:04 AM
Hello,
I have couple of questions about Ext.ux.TinyMCE 0.6:

1) How to add listeners for Ext.ux.TinyMCE and what events does it provide? It seems I can't catch 'sync' nor 'change' event. Is this normal behaviour?
2) Is there an easy way to change the style of the buttons to use the default ExtJS style and colors? They look like a cracked ceramic surface now.
3) How to close all TinyMCE helper windows (color picker, find and replace, etc) when the editor is closed?
4) Opening helper window is slow. For example the color picker loads for about 20 seconds. Do somebody else experience such behaviour?
5) The color pallete remains opened and it overlaps the color picker after the color picker has been opened. Anyone?

asagala
27 Jan 2010, 1:50 PM
Hello,
I have couple of questions about Ext.ux.TinyMCE 0.6:

1) How to add listeners for Ext.ux.TinyMCE and what events does it provide? It seems I can't catch 'sync' nor 'change' event. Is this normal behaviour?
2) Is there an easy way to change the style of the buttons to use the default ExtJS style and colors? They look like a cracked ceramic surface now.
3) How to close all TinyMCE helper windows (color picker, find and replace, etc) when the editor is closed?
4) Opening helper window is slow. For example the color picker loads for about 20 seconds. Do somebody else experience such behaviour?
5) The color pallete remains opened and it overlaps the color picker after the color picker has been opened. Anyone?

#2 answer

set the skin to this skin : "o2k7"

asagala
27 Jan 2010, 8:10 PM
I am getting a weird behavior. Running this plugin on 3.1. The TinyMCE editor loads and all its functionnality works. However once it has loaded all my other window are broken (white background and sizing is off). Anyone ever experienced this?

asagala
28 Jan 2010, 6:11 AM
Seems to be caused by the iframepanel. I am using MIF 2.1 for Extjs 3.1.1

asagala
28 Jan 2010, 6:32 AM
Downgraded to Extjs3.0.3 and MIF 2.01 and everything works fine. Must be an issue with MIF2.1 and ExtJS 3.1.1beta compatibility.

ivanatora
28 Jan 2010, 7:18 AM
#2 answer

set the skin to this skin : "o2k7"
It appears to change only the skin of the toolbars. The popup boxes are still with the old style and the buttons still look cracked.

Btw I'm using ExtJS 2.3, ManagedIframe 1.2.7, Ext.ux.TinyMCE 0.6 and TinyMCE 3.3b1. Is there any problem with that combination of versions?

asagala
28 Jan 2010, 7:26 AM
It appears to change only the skin of the toolbars. The popup boxes are still with the old style and the buttons still look cracked.

Btw I'm using ExtJS 2.3, ManagedIframe 1.2.7, Ext.ux.TinyMCE 0.6 and TinyMCE 3.3b1. Is there any problem with that combination of versions?

Dont know how to change the look of the dialog boxes. Sorry

ivanatora
28 Jan 2010, 7:32 AM
Just tried with TinyMCE 3.1.0.1 as it is the requirements mentioned in the first post, but ran into all of the same issues.
BTW it seems it doesn't matter if MIF is installed or not. I've included Ext.ux.ManagedIframePanel to the page code. Do I have to do something else with MIF or it is just a prerequest for Ext.ux.TinyMCE?

ben_dog
2 Feb 2010, 4:07 PM
So awesome. Worked like a charm. Saved me so much time!

Thank you XOR. =D>

You need a beer donation button somewhere.

Ben

xor
3 Feb 2010, 5:50 AM
Just tried with TinyMCE 3.1.0.1 as it is the requirements mentioned in the first post, but ran into all of the same issues.
BTW it seems it doesn't matter if MIF is installed or not. I've included Ext.ux.ManagedIframePanel to the page code. Do I have to do something else with MIF or it is just a prerequest for Ext.ux.TinyMCE?

Yes, MIF is required. But if you'd take latest version of everything (TinyMCE, ExtJS and MIF) you should be able to start it up w/o big issues. At least, it is working in my environment. I just can't find time to repackage it for external use.

xor
3 Feb 2010, 5:52 AM
So awesome. Worked like a charm. Saved me so much time!

Thank you XOR. =D>

You need a beer donation button somewhere.

Ben

Thank you, Ben! Beer would be great, but PayPal doesn't allow to make "donate" button for Russian users. Discrimination as it is.

ben_dog
4 Feb 2010, 12:25 AM
PayPal doesn't allow to make "donate" button for Russian users. Discrimination as it is.That is very unfair.

Well thanks again for your generous contribution to the ext community ;)

Ben

damo
5 Feb 2010, 5:21 AM
I'm having an issue with setValue() or even setRawValue().

On load of the plugin I am making an AJAX call to the server to get the latest contents, I'm then setting the content using the above methods. The problem is it is removing all style="" attributes from spans which was originally created by tinyMCE and successfully submitted to the database.

I've had set extended_valid_elements to "span[style]" but this has no effect it still removes the style from the spans.

Any idea what could be causing this?

I'm using 3b1 of TinyMCE and 3.0 of Ext. I'm gonna try downgrade the TinyMCE version to see if it helps the issue.

Thanks,
Damo

asagala
5 Feb 2010, 6:21 AM
I am using it the same way as you and having no issues. Using latest TinyMCE and ExtJS 3.0.3

xor
5 Feb 2010, 6:43 AM
I'm having an issue with setValue() or even setRawValue().

On load of the plugin I am making an AJAX call to the server to get the latest contents, I'm then setting the content using the above methods. The problem is it is removing all style="" attributes from spans which was originally created by tinyMCE and successfully submitted to the database.
...

I'm not modifying content in any way during setValue(). So it is TinyMCE issue.

asagala
5 Feb 2010, 6:48 AM
I'm having an issue with setValue() or even setRawValue().

On load of the plugin I am making an AJAX call to the server to get the latest contents, I'm then setting the content using the above methods. The problem is it is removing all style="" attributes from spans which was originally created by tinyMCE and successfully submitted to the database.

I've had set extended_valid_elements to "span[style]" but this has no effect it still removes the style from the spans.

Any idea what could be causing this?

I'm using 3b1 of TinyMCE and 3.0 of Ext. I'm gonna try downgrade the TinyMCE version to see if it helps the issue.

Thanks,
Damo


Make sure "style" is in this list extended_valid_elements.

Like this
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|style|
onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

damo
5 Feb 2010, 7:44 AM
Thanks for looking at this guys!

I've managed to fix the issue which was me not correctly replacing all &#34; with " DOH!

Thanks,
Damo

slsmithtx
10 Feb 2010, 7:30 AM
Has anyone had trouble get tinyMCE to render properly in IE using Ext.ux.TinyMCE? This is Ext 3.0.1, Ext.ux.TinyMCE 0.7b1 and IE 8. It renders allright on a relatively simple page. But when I have it in a more complex object, it doesn't get fully rendered.

asagala
10 Feb 2010, 8:22 AM
Has anyone had trouble get tinyMCE to render properly in IE using Ext.ux.TinyMCE? This is Ext 3.0.1, Ext.ux.TinyMCE 0.7b1 and IE 8. It renders allright on a relatively simple page. But when I have it in a more complex object, it doesn't get fully rendered.

I use the same setup as you and it works fine. Are you sure you have your layouts setup correctly? Its probably a layout issue more then a TinyMCE issue

uwolfer
12 Feb 2010, 2:55 AM
I have a "fix" for anyone who does not want a dependency on Ext.ux.ManagedIframe (probably because of it's licencing).

Replace:

{
xtype: "iframepanel",
border: false,
defaultSrc: s.url || s.file,
stateful: false
}

with:


new Ext.BoxComponent({
autoEl: {
tag: 'iframe',
src: s.url || s.file
},
style : 'border-width: 0px;'
})

asagala
12 Feb 2010, 6:49 AM
I have a "fix" for anyone who does not want a dependency on Ext.ux.ManagedIframe (probably because of it's licencing).

Replace:

{
xtype: "iframepanel",
border: false,
defaultSrc: s.url || s.file,
stateful: false
}with:


new Ext.BoxComponent({
autoEl: {
tag: 'iframe',
src: s.url || s.file
},
style : 'border-width: 0px;'
})

Perfect. Works as advertised.

albeva
13 Feb 2010, 5:01 AM
are there any downsides to getting rid of dependency on iframepanel ? I tried it out and seems to be working without any hitch :)

elderotaku
17 Feb 2010, 12:21 PM
has anyone else had trouble with anchor and this wrapper. Whenever I use anchor the bottom part of the editor gets hidden by one of its containing objects. So it will scroll. However when I resize the panel it fixes itself. We have to call a special resize method in order to insure the editor is the same size as the panel.

On this note, in 0.7b1 I have an issue where I set the size of the editor, then the defered fix size method gets called and sets my editor to 100 X 100 pixels.

Any body have any idea why this happens?

Thanks

mjbohn
23 Feb 2010, 3:02 PM
Hi all

as I had the need to insert text at random cursor positions, I did a small extension.



/** ----------------------------------------------------------
*/
setValue : function( v ){

// Andrew's code

},

/** ----------------------------------------------------------
*/

// ******* New function *******

insertValueAtCursor : function( v ){
this.value = v;
if( this.rendered )
this.withEd( function(){
this.ed.execCommand('mceInsertContent',false,v);
this.validate();
});
},

/** ----------------------------------------------------------
*/
isDirty : function() {
// Andrew's code
},
Might be also helpful for somebody else.

best regards
Michel

mich3l.de (http://mich3l.de)

mjbohn
24 Feb 2010, 12:19 AM
I have a "fix" for anyone who does not want a dependency on Ext.ux.ManagedIframe (probably because of it's licencing).
[...]

Works great. I had a big problem with treePanel when I included Ext.ux.ManagedIframe.
Treenodes didn't collapse correctly. The nodes got hidden when collapsing but there was still space left between the former expanded node and the next node.
With your "fix" all works fine.

best regards
Michael
___________
mich3l.de (http://mich3l.de)

lucasmarin
5 Mar 2010, 11:22 AM
My Tinymce with Ext.ux.TinyMCE not render correctly in Window Wizard Card in first render, but, if I show Window Wizard Card again, the tinyMCE render correctly.

Chrome 4/5 and FF 3.5.6

Any Idea?

Tks;

http://img46.imageshack.us/img46/5899/correct.jpg
http://img689.imageshack.us/img689/2563/notcorrect.jpg

xor
18 Mar 2010, 4:22 AM
Great, uwolfer! I think it must be included in the official release. :)

JeanNiBee
23 Mar 2010, 11:10 AM
Hi

I can see / edit and use this plugin, but whenever I submit my form, (xtype: 'tinymce') is in a fieldset on a formpanel, the value/info I typed is not submitted.

Still searching the forums if there's a fix but after an hour reading and googling I figure I may as well post here.

Thanks.

asagala
23 Mar 2010, 11:14 AM
Hi

I can see / edit and use this plugin, but whenever I submit my form, (xtype: 'tinymce') is in a fieldset on a formpanel, the value/info I typed is not submitted.

Still searching the forums if there's a fix but after an hour reading and googling I figure I may as well post here.

Thanks.

Post code so we can look at what you are doing.

JeanNiBee
24 Mar 2010, 11:31 AM
Hi

I can see / edit and use this plugin, but whenever I submit my form, (xtype: 'tinymce') is in a fieldset on a formpanel, the value/info I typed is not submitted.

Still searching the forums if there's a fix but after an hour reading and googling I figure I may as well post here.

Thanks.


WTB triggerSave().

:)


Adding that to the submit event fixed this... I thought it was in there but I guess I had a bad copy / paste experience.

That being said, what's the difference between triggerSave() and syncValues()?

mjbohn
24 Mar 2010, 11:09 PM
That being said, what's the difference between triggerSave() and syncValues()?

syncValue() is a Ext.ux.TinyMCE fnc which calls TinyMCE Editor.save (http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/save)
tinyMCE.triggerSave() (http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.EditorManager/triggerSave) calls save() on all instances.

mstroeve
3 Apr 2010, 6:29 AM
I also have a problem with this plugin when pressing tab key. The toolbar disappears. Does anyone have any idea what could be causing this problem?

Boxcopter
5 Apr 2010, 8:41 AM
Very awesome component, started using it for the webapp I have been working on, works like a charm. Always liked TinyMCE using PHP by itself, nice to see it integrated into Ext so I can mess with it while working in J2EE.

About to start doing some crazy stuff with it so I will be putting it through the ringer.

Just wanted to say, your work is very appreciated! =D>

Dumbledore
14 Apr 2010, 9:10 AM
Hi,

i use this inside Ext.Editor. When the Ext.Editor is shown, the TinyMCE-Editor will be rendered but the resize event comes to early. So the positioning is wrong. So i need a an event when the TinyMCE-Editor is full layouted to fire then the resize event.

Any ideas?

Dumbledore
15 Apr 2010, 5:00 AM
so, after some debugging i see that the event editorcreated will be fired to early.

I change this:



// Fix editor size when control will be visible
(function fixEditorSize() {

// If element is not visible yet, wait.
if( !this.isVisible() ) {
arguments.callee.defer( 50, this );
return;
}

var size = this.getSize();
this.withEd( function() {
this._setEditorSize( size.width, size.height);

// Indicate that editor is created
this.fireEvent("editorcreated"); // add here
});
}).call( this );

// Indicate that editor is created
//this.fireEvent("editorcreated"); // this i remove and add this above

xor
18 Apr 2010, 2:09 AM
Guys, please check out new version - 0.8.1:
http://blogs.byte-force.com/media/p/40520.aspx

Removed dependency on MIframe. Rewritten is the code for editor resize. Hope, now it will work correctly in all cases.

@Dumbledore
Your change is not incorporated yet. Will do it soon.

walldorff
18 Apr 2010, 8:14 AM
Great! Thank you for sharing, xor.

Dumbledore
18 Apr 2010, 10:34 PM
another small patch for the 0.8.1

add this in onRender:



// Create TinyMCE editor.
this.ed = new tinymce.Editor(id, this.tinymceSettings);

// Create a new Windows Group for the dialogs
this.ed.windowGroup = new Ext.WindowGroup();
this.ed.windowGroup.zseed = 12000;


and this in Window.Manager.open:



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,
minimizable: s.minimizable,
modal: true,
stateful: false,
constrain: true,
layout: "fit",
manager : this.editor.windowGroup,
items: [
new Ext.BoxComponent({
autoEl: {
tag: 'iframe',
src: s.url || s.file
},
style : 'border-width: 0px;'
})
]
});


Then we have a correct zindex of the dialogs when using TinyMCE inside of an Ext.Editor.

uwolfer
19 Apr 2010, 1:42 AM
Why do you put the whole component into "(function() {"? This is not usual for a component. I have removed it and it works fine without.

You could also add the ComponentMgr registration which allows creation by xtype:

Ext.ComponentMgr.registerType("tinymce", Ext.ux.TinyMCE);

xor
19 Apr 2010, 3:49 AM
uwolfer, registerType is there already. It is on the line 512 of my distrubution.

Outer "(function()" is intended to hide some implementation details from polluting global namespace. It allows for making some kind of private variables and functions. Why do you think you should remove it? Is there any objective reason?

xor
19 Apr 2010, 9:07 AM
Hello!

Just released version 0.8.2. It incorporates changes offered by Dumbledore, refactored a bit.

I also redesigned component page. It has a link to download area, so grab release from there:
http://blogs.byte-force.com/xor/tinymce/

Demo package does not include demo page any more. Only test-example files and release notes. I think it is more logical, but tell me if you miss the index page.


Finally, I've made a donation button (http://blogs.byte-force.com/xor/tinymce/) with help of Moneybookers. Some of you wanted to support the component development, so now it is possible. It is there, on the side bar of the component's page. I hope it is working. If not, please let me know.

hansl1963
19 Apr 2010, 3:09 PM
Hello xor,

I'm using tinymce in a window containing a form panel and a tabpanel.
This tabpanel contains tree tabs with a tinymce editor inside.

If I click on each tab everything works ok, but when don't click all tabs and save the form/close the window I get the following errors in FF:

e is null
http://scada/hans/scada2/lib/own/ux/tinyMCE/tiny_mce_src.js?v=ff0d1479053052a24175ebb948cf220b
Line 7537

and

el is undefined
http://scada/hans/scada2/lib/ext/ext-all-debug.js?v=9e57680a3d61cc35c6448bfded73d534
Line 5947

Does this sound familliar to you (or anybody else)?????
What am I doing wrong, I can't find the problem and hope somebody can help me..

I'm using Ext.ux.TinyMCE.js version v0.8.2 (without iframes)

xor
19 Apr 2010, 11:33 PM
hansl1963, can you make little test case based on one of test.*.html files in my distribution? Put there your tab panel configuration and form submit code (no server-side is required, as error occurs immediately as I got from your explanation). I will debug it and see what's wrong.

uwolfer
19 Apr 2010, 11:59 PM
Outer "(function()" is intended to hide some implementation details from polluting global namespace. It allows for making some kind of private variables and functions. Why do you think you should remove it? Is there any objective reason?

I remember I had some issues with the "(function()" wrapping, but I do not really remember what they were exactly. It could be something with loading order (if TinyMCE was loaded after the plugin...) But not sure. The only thing you hide is IMHO "var tmceInitialized" (and some TinyMCE stuff, which is global anyways). That could be done in another way (probably set it on the prototype).

I also have changed the code that it does not break if TinyMCE is not included in a specific page. It also improves loading performance since it does initialization (and override of TinyMCE stuff) in case of usage, not on init.

See the attached patch for some changes and improvements.

hansl1963
20 Apr 2010, 1:34 PM
Xor,

Thanks for your reply. I have created a test (as you recommented) and created a zipfile attached to this reply..
More problem description (to create them) are included into the HTML file..

I hope you can help me..

Thanks

Hans

Dumbledore
21 Apr 2010, 11:16 AM
@hansl1963

I don´t try your code. But you use a tabpanel. When use the tinymce inside a tabpanel which is also inside a form you should use the deferredRender propery of the tabpanel.



items:new Ext.TabPanel({
id: 'tabPanel',
deferredRender : false,
width:635,
height:400,
border: true,

hansl1963
21 Apr 2010, 1:58 PM
Dumbledore,

I have tryed your preposal but this did not work for me..
Also tryed "forceLayout" on the tabpanel without result..

But thanks for your reply..

Hans

xor
22 Apr 2010, 6:04 AM
uwolfer, can you send me full file with your changes? Looks like I already don't have the exact version that you gave patch for. So I'm not fully understand where did you changed.

xor
22 Apr 2010, 6:36 AM
hansl1963, I've tried your test and it is working both in FF and IE on my box. Didn't try other browsers as I understood that you used FF by yourself.

My development version is now very close to recently released 0.8.2. Do you use this one in you application?

hansl1963
22 Apr 2010, 6:55 AM
xor,

I'm using Ext JS version 3.2.0, tinymce version 3.2 (release date 201003-25) and your Ext.ux.TinyMCE version 0.8.2.
Browsers: FireFox 3.5.9 and IE version 6. Other browsers are not used.

The IE version 6 is needed for testing the applications (my company is still using this version 6)...

I changed to the latest release of Ext because of this problem but that did not help
Could you tell me exactly witch versions you use (also Ext enz.)?

treadmill
22 Apr 2010, 10:19 AM
Hi,

I'm trying to use the ImageManager from MoxieCode, but get this error when opening-up from the image dialog box of the TinyMCE editor:-

Error: WindowManager.superclass.setTitle is undefined
Source File: http://admin.foobar.co.uk/js/Ext.ux.TinyMCE.js
Line: 634

Which refers to this code and specifically the line highlighted in red.



setTitle: function(win, ti) {

// Probably not inline
if (!win.tinyMCEPopup || !win.tinyMCEPopup.id) {
WindowManager.superclass.setTitle.call(this, win, ti);
return;
}

var w = Ext.getCmp(win.tinyMCEPopup.id);
if (w) w.setTitle(ti);
},
And get this error message at the same time:-



Error: t.currentWin is undefined
Source File: http://admin.foobar.co.uk/tiny_mce/plugins/imagemanager/js/index.php?type=im&theme=im&package=imagemanager
Line: 1


Any ideas how this can be fix it?

xor
23 Apr 2010, 12:52 AM
I don't have this component, so I can't test it. But I believe this theme was already discussed in this topic. Please review older records.

xor
23 Apr 2010, 12:54 AM
hansl1963, I still use Ext JS 3.1. Maybe this is the root of the problem. I will upgrade and check it out soon.

hansl1963
23 Apr 2010, 1:15 AM
xor,

Ok, I will wait for your update.
In the meantime I replace tinyMCE with HTMLEditor and keep on searching for solutions..

ajlaluan
24 Apr 2010, 8:38 PM
Hi gurus,

I am implementing my own file browser for tinyMCE. I referenced tiny_mce_popup.js to support some functions in returning values in image dialog window but unfortunately I got tinymce is null error when loading my page.

Does anyone from the community who experienced and solved this problem? Or can anyone from the group helped me out in returning values from a custom file browser to the standard image dialog window of tinyMCE?

This is the link where I based the function:
http://wiki.moxiecode.com/index.php/TinyMCE:Custom_filebrowser#How_To_Return_Values

Thanks is advance

uwolfer
26 Apr 2010, 3:42 AM
xor, attached you can find the whole file with all my changes. Thanks for looking into it. Feel free to use any of the changes in your official code.

lj2008
27 Apr 2010, 11:04 PM
it's great,I will use it

xor
28 Apr 2010, 7:01 AM
Ajlaluan, maybe you should also include main tinymce script into your popup? But honestly, I don't know. I believe it will be more productive to ask this question at TinyMCE forum. After all, here we merely binding existing TinyMCE code with Ext JS.

xor
28 Apr 2010, 7:12 AM
uwolfer, can you explain what benefits are you getting by putting WindowManager and ControlManager classes creation into initTinyMCE method? Their code will be anyway executed only after an isntance of a class would be created. I.e. in onRender method.

uwolfer
29 Apr 2010, 4:01 AM
uwolfer, can you explain what benefits are you getting by putting WindowManager and ControlManager classes creation into initTinyMCE method? Their code will be anyway executed only after an isntance of a class would be created. I.e. in onRender method.

Without my change, the plugin overrides the methods / classes at load time of the plugin. That requires loading TinyMCE before loading the plugin. With my changes, the overrides of TinyMCE classes is done of first initialization of a Ext form field (some type of lazy loading). It does also not produce any JS errors if TinyMCE is not included in some pages where it is not required (may be the case in some applications...).

xor
29 Apr 2010, 5:05 AM
OK, I got it. Certainly, I was not thinking of a scenario when TinyMCE could be not loaded at all. In this case I' prefer to lazily load Ext.ux.TinyMCE also. Actually, we use this approach in our applications. If I need Ext.ux.TinyMCE, then it also automatically load all dependencies.

If community doesn't insist, I' prefer not to include this "lazy loading" modification in the trunk. I believe its use case is quite rare.

kavih7
2 May 2010, 3:55 PM
I ran into a problem with the zseed windowgroup managing MessageBox dialogs being too low. Its either that or the declared zseed for the tinyMCE windowgroup is too high. In any case, moving the zseed down by a thousand from where the MessageBox starts (9000) seemed to fix it. So, in this bit of code:


// Create a new Windows Group for the dialogs
var windowGroup = new Ext.WindowGroup();
windowGroup.zseed = 12000;//Another version had 20000 here

change to:


// Create a new Windows Group for the dialogs
var windowGroup = new Ext.WindowGroup();
windowGroup.zseed = 8000;

and then MessageBox's will have the highest z-index.

To see the issue, click on the insert image tool, put in a URL to an image and click "Insert." A MessageBox will appear behind that insert image tool window.

I searched this big thread for a possible solution to this issue, but since I didn't find one, above is mine. Let me know if there is a more supported solution or if the issue was already addressed.

Dumbledore
2 May 2010, 9:57 PM
hmm... 8000 is to low...

I use the TinyMCE inside an Ext.Editor. The rendering is ok, but when use a plugin the new dialogs are behind the Ext.Editor. Perhaps this should be a config parameter?

Bye, Dumbledore

kavih7
3 May 2010, 9:32 PM
Yes, it probably should be a config param. The only app I'm using it in (for now) works with 8000 fortunately.

xor
5 May 2010, 1:35 AM
Guys, maybe it is possible find out what WindowGroup is in effect and specify it to the TinyMCE field? I mean, if you use TinyMCE inside Ext.Editor, then maybe editor has its own WindowGroup, and you can find out what group manager is used and specify it to the TinyMCE field?

In other case, I afraid, your manually selected base z-index sometimes won't fit to given circumstances.

sirioz10
5 May 2010, 8:41 AM
Hi,
may be there is something wrong in fixEditorSize function.

In some case the iframeHeight var is not computed well, as if the toolbar and the statusbar of the editor are not been fully rendered.

I also found this workaround:


(function fixEditorSize() {

// If element is not visible yet, wait.
if( !this.isVisible() ) {
arguments.callee.defer( 50, this );
return;
}

var size = this.getSize();
this.withEd( function() {
this._setEditorSize.defer(150,this,[ size.width, size.height] );

// Indicate that editor is created
this.fireEvent("editorcreated");
});
}).call( this );


morever, I found that the _setEditorSize function, is also called by the onResize event, before the control is fully rendered.



onResize: function(aw, ah) {
if( Ext.type( aw ) != "number" ){
aw = this.getWidth();
}
if( Ext.type(ah) != "number" ){
ah = this.getHeight();
}
if (aw == 0 || ah == 0)
return;

if(this.isVisible() ) { //instead of this.rendered may be a solution?
this.withEd(function() { this._setEditorSize( aw, ah ); });
}
},


any help on this issue will be appreciated ;)

xor
6 May 2010, 5:34 AM
Not sure it is right solution. Actually, withEd method should check that editor is initialized. If not, it binds to onInit event and only then calls a function passed to the method. TinyMCE documentation states that onInit is fired "after the editor has finished all it's initialization i.e. when it's ready to use". So as I guess, it should be fully rendered at this moment, right?

Maybe the problem is with loading of toolbar images? Editor is rendered and ready, but icons are not here yet. So at this moment we are getting wrong toolbar size. After a short delay images would be loaded and size gets fixed. Does it sound logical?

If yes, workaround of setting "defer" to higher numbers is not a real solution. It will backfire when run over slower internet connection.

sirioz10
10 May 2010, 6:41 AM
Hi,
Your reasoning is almost correct.
The problem is with loading of ui.css, that contains rules for toolbar and statusbar.

So that putting something as following line before the fixEditorSize call, partially avoid the wrong behavior,(i doesn't consider the statusbar rules):


Ext.util.CSS.createStyleSheet('.defaultSkin span.mceIcon{display:block;height:20px;width:20px;}','tinymce');



I think that the only exhaustive fix would be handling , in some manner, the onload event of ui.css link, but I don't know if in this case is achievable.

let me know if you found a solution.

Regards Fausto.

xor
13 May 2010, 2:32 AM
sirioz10, nice hack! :) But I don't think we should include in into official version. After all, this is a hack. So if one suffers from this problem, he can go and apply your workaround.

Meanwhile, I filed a bug in TinyMCE tracker. Let's wait for reaction.

asagala
13 May 2010, 7:55 AM
For anyone having this issue. I had a custom image manager implemented in TinyMCE. Using this plugin my image manager would appear behind the other windows... (didnt do this in previous versions of TinyMCE plugin). I fixed it by removing the window group manager

Comment this line (#585 in latest TinyeMCE plugin code)
manager: windowGroup

xor
19 May 2010, 2:07 AM
Yes, asagala, windowGroup appears to be a bad idea. As I understand, it now works only if you put the component in Editor. And in all other cases there are problems with popups.

Dumbledore, this was your proposal, so can you comment on that?

Dumbledore
24 May 2010, 8:42 PM
hmmm... Currently i use the component always inside an editor. I will search another way for better window handling...

[EDIT]

The problem is the Ext.Component default zindex. This starts at 11000, windows starts at 9000. In In Ext.ux.TinyMCE the new windows will be opened in WindowManager.open() with the highest window zindex.
No i will look inside the Ext.HtmlEditor how that component will open another window...

[another EDIT]
When using Ext.HtmlEditor inside an Ext.Editor there is the same problem with the zindex. I will ask for a solution in the Premium Forum.

xor
24 May 2010, 11:11 PM
Dumbledore, just a though: maybe Editor by itself uses special window group that we can get and pass to Ext.ux.TinyMCE instance?

Dumbledore
26 May 2010, 9:04 AM
no Ext.Editor extends Ext.Component so there is no WindowMgr. I ask the problem in the Premium Forum and Condor recommended a new WindowGroup: http://www.extjs.com/forum/showthread.php?100067-Ext.HtmlEditor-inside-an-Ext.Editor-zindex-Probs-when-using-plugins&p=471136#post471136

In the moment i have no idea how to solve this...

xor
1 Jun 2010, 1:07 AM
What if it will be possbile to specify WindowGroup for the instance of Ext.ux.TinyMCE to use?

slsmithtx
1 Jun 2010, 12:11 PM
20727

I'm having problems with getting tinyMCE to display properly in IE. I've got Ext.uxTinyMCE v0.8.2. The attached image shows how it's displaying. In this instance it is an item in a FormPanel object. Any suggestions would be greatly appreciated.

xor
2 Jun 2010, 4:00 AM
Can you make a test case on base of my test.* files?

alumb
4 Jun 2010, 10:49 AM
Hey, just a quick note. I was trying to get the tinyMCE control to render as a tabpanel, but it kept pushing the control off the screen. Turns out the layout engine was moving the tinymce span outside of its wrap element, causing it to flow after the tabpanel and off the screen. The solution was to correctly set the positionEl of the control to the wrap element.

Code: (about line 111 of Ext.ux.TinyMCE.js)


this.wrapEl = this.el.wrap({ style: wrapElStyle });
this.actionMode = "wrapEl"; // Set action element to the new wrapper
this.positionEl = this.wrapEl; //this line added


I added the third line and now it renders perfectly.

Hopefully this helps someone.

Dumbledore
4 Jun 2010, 9:48 PM
@xor

i think that is a great idea - so all things about the z-index will be correct handled.

Did you build a new version for this?

Bye, Dumbledore

Toon
17 Jun 2010, 6:13 AM
Hi,

I have a problem addressing the TinyMCE properties.
Here's a quick description of my problem.

- I added a custom button to the editor
- This button calls a function which displays a window
- In this window you can select a link - these are internal pages in our cms
- If you then insert the link, something as link text has to appear in the editor

Problem is that I don't know how to address the TinyMCE instance to update the content.

If I use for example:

Ext.getCmp("html_editor").setValue('Some text');That works, but it replaces the whole content.

If I try to use:

Ext.getCmp("html_editor").selection.setContent('<strong>Hello world!</strong>');I get an error because "selection.setContent" doesn't exist.

If I use:

ed.selection.setContent('<strong>Hello world!</strong>');Which is commented out in in the function code, that works.
(Which is offcourse logical, because it adresses the object directly)

My code (partial):

xtype: "tinymce",
id: "html_editor",
name: "html_editor",
width: 710,
height: 300,
tinymceSettings: {
theme : "advanced",
// Plugins left out
setup : function(ed) {
// Register example button
ed.addButton('internallink', {
title : 'Interne link',
image : 'gfx/page_link.png',
onclick : function() {
//ed.focus();
//ed.selection.setContent('<strong>Hello world!</strong>');
LinkWindow.show();

}
});
}
}The LinkWindow ultimately uses this function:

function linkLink() {
Ext.getCmp("html_editor").focus()
Ext.getCmp("html_editor").selection.setContent('<strong>Hello world!</strong>');
LinkWindow.hide();
}I think this is a scope problem, but is there any way to address TinyMCE itself.
The object "html_editor" can be adressed of course...

Thanks in advance for your help!

xor
22 Jun 2010, 5:01 AM
Toon, get to component's instance using Ext.getCmp() method. Then go to editor using "ed" property and use its API to do what you want. Editor's API is described in details at TinyMCE site.

mschwartz
22 Jun 2010, 5:37 AM
xor,

would you mind taking a look at this thread?

http://www.sencha.com/forum/showthread.php?101468-Field-focus-issue-looking-for-suggestions

Toon
22 Jun 2010, 6:43 AM
Toon, get to component's instance using Ext.getCmp() method. Then go to editor using "ed" property and use its API to do what you want. Editor's API is described in details at TinyMCE site.
Hmmm, yes indeed xor.
I thought I tried that. I changed the code, and indeed this works.
I now use:

Ext.getCmp("html_editor").ed.setContent('blabla')
Thanks for your advice!

xor
22 Jun 2010, 10:58 PM
@mschwartz
Sorry, can't say anything valuable on this issue. Looks like I never saw such behavior in my applications. Maybe you can build up a test case that shows this problem on base on my test files?

xor
23 Jun 2010, 12:10 AM
@dumbledore, please try the version with windowGroup support. Just specify it in "manager" configuration parameter for the editor.

xor
23 Jun 2010, 12:28 AM
@uwolfer
Please also try this new version. Does it correctly perform lazy definition of WindowManager and ControlManager classes in your case?

Dumbledore
24 Jun 2010, 4:02 AM
@dumbledore, please try the version with windowGroup support. Just specify it in "manager" configuration parameter for the editor.

Hmm... must i define the group or Manager?

When i run this:


var htmlEditor = new Ext.Editor(
new Ext.ux.TinyMCE({
manager : new Ext.WindowGroup({
zseed : 12000
}),
tinymceSettings : {
theme : 'advanced',
language : 'de',


this will not work. The z-Index will not use? Or did i understand something wrong?


SORRY!!!

Ok this runs fine:


var tinyMCE_Manager = new Ext.WindowGroup();
tinyMCE_Manager.zseed = 12000;

var htmlEditor = new Ext.Editor(
new Ext.ux.TinyMCE({
manager : tinyMCE_Manager,
tinymceSettings : {
theme : 'advanced',

xor
24 Jun 2010, 4:15 AM
So, it is working? Great. I'll slo-o-owly prepare the release then.

andynuss
28 Jun 2010, 5:29 AM
Hi,

I have a requirement that I use ManagedIFrame extension. This requires 3.1.1 or 3.2. Is your ux compatible with 3.1.1? Will it soon be compatible with 3.2?

Andy

xor
28 Jun 2010, 7:13 AM
@andynuss
Ext.ux.TinyMCE doesn't depend on ManagedIFrame any more. Thanks to community. So you can have any version of ManagedIFrame, my control shouldn't notice it.

arnab_ghosh
28 Jun 2010, 2:22 PM
Hi Guys,

My application is built in Ext 2.2. I cannot upgrade to the latest at this point. While I am trying to integrate Tiny MCE in a formpanel, i am getting an error in the Ext.ux.TinyMCE.js.

The error I am getting is ::
tinymce is not defined
/js/ux/Ext.ux.TinyMCE.js
Line 301.

Can you guys please help? Any help is much appreciated.

Thanks
Arnab

xor
29 Jun 2010, 12:00 AM
@arnab_ghosh
I afraid, there is no backward compatibility with older Ext versions. So maybe someone still have Ext.ux.TinyMCE version compatible with Ext 2.2.

arnab_ghosh
29 Jun 2010, 7:00 AM
@XOR

Thanks for the reply. I downloaded the 0.6 version which was built on Ext 2.1(Got from the release notes). Its working to some extent.
But the miframe.js file which is one of the dependencies is throwing a javascript error in IE (all versions).
Is this a known problem? Is there a work around?

The error is ::
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Tue, 29 Jun 2010 14:59:38 UTC

Message: Syntax error
Line: 1612
Char: 15
Code: 0
URI: /js/ux/miframe.js (http://localhost/promo.admin/js/ux/miframe.js)


Thanks
Arnab

andynuss
1 Jul 2010, 5:12 PM
Hi,

I installed the 0.8 demo and my first question is why the Styles... menu didn't drop down/work but the other ones did.

The 2nd question is how to start with just the javascript file Ext.ux.TinyMCE.js and what else to add, if anything, in the way of icons and styles. I.e. why does the demo download contain jQuery and so much other stuff.

Andy

andynuss
1 Jul 2010, 5:49 PM
Hi,

I tried inserting an image with the demo, and didn't include a title/description which made no sense to me anyway. (What are they for?) Then I clicked "insert" and a tinymce alert came up behind the form instead of in front. Then I tried selecting image and clicking scissors to cut, and got an alert not supported in firefox. But when I did a cntrl-x, it was deleted!

Andy

xor
1 Jul 2010, 11:15 PM
@andynuss
Styles is populated with CSS classes that TinyMCE finds in CSS file that you specify. If you don't give it such file, or the file doesn't contain standalone classes (i.e. simpliest possible CSS rule) than the menu is empty.

You need everything that is necessary to run ExtJS, plus TinyMCE package, plus my control. Essentially all that is in my demo distribution. I use jQuery as a base library for ExtJS, but you can use ext-base.js as well.

xor
1 Jul 2010, 11:29 PM
@andynuss
Try version 0.8.5 - http://blogs.byte-force.com/media/p/40520.aspx
It should fix the bug with alert popping under the modality shadow.

As for scissors - this is not "delete", this is "cut" operation. And it is really not supported in Firefox. Can't do anything with it. Or better to say, TinyMCE guys can't do anything with it. Because I merely made a wrapper around their powerful text editor. So if you need to delete an image, just press "delete" button.

andynuss
2 Jul 2010, 9:05 AM
Hi Andrew,

I took you demo dist and copied the tiny_mce folder into my webapp, plus your ext.ux.TinyMCE.js file. When I loaded my app, line 395 of tiny_mce.js put up alert("Load jQuery first"). You seem to say above that I don't need jQuery, but I assume tiny_mce.js is not your code. I am using ext-base.js.

Andy

xor
5 Jul 2010, 2:32 AM
Try using TinyMCE variant that is not bound to jQuery.

omerfarooq123
5 Jul 2010, 1:17 PM
Thanks.. will try this

omerfarooq123
5 Jul 2010, 1:18 PM
thanks

andynuss
6 Jul 2010, 4:46 PM
Hi,

I have 2 questions: (1) I don't do a submit at all with my form, I want to getValue() and then I send it with ajax. How would I sync this way? (2) when I load with ext 3.2.2 and latest ManagedIFrame, I have trouble getting the same functionality with setting a font as with your demo. While the cursor is a caret, I set font name and size, but it doesn't take effect for subsequent typing. I can select the typed text, change it, but when I stick the cursor at the end of the changed text, and type again, I'm back to the original font used when the caret first appears in a new form.

Andy

Tpona
12 Sep 2010, 11:55 AM
xor, can you place to examples pack, missing file signalbook_edit.js for test.tabpanel.html
I have trouble with using your plugin for tinymce with tabpanel, while timymce not rendered i can't use getValue method for filed ((

Oh my english ))
In russian: ????? ??????? tinymce ?? tabpanel ? ????? ?? ?? ?????????? (???? ?? ????????????? ?? ???????? ? tinymce) ??? ??????? ??? ???? ?????? ????????? ???????? ????????? ??????: Uncaught TypeError: Cannot call method 'getValue' of undefined
? ??? ? ???????? ???? test.tabpanel.html ?? ? ???? ??? ????? signalbook_edit.js ?? ???? ?????? ??????? ?? ???.
????? ???? ??????? ??????

serff
21 Sep 2010, 12:35 PM
Has anyone had much luck using TinyMCE as an Editor field not part of a form? I have just a block of text that I've added an Editor to and when you click the text, it pops up the TinyMCE editor. I'm having multiple problems with getting it to work nicely if at all. I first had to figure out how to make the editor larger than the text block that was being edited. I think I have that sorted out. So now that I have that, I can bring up the editor and type in it and that works fine.

Where it starts to break down is when I try to use any of the tool buttons. Like if I click the Font Family bar, the editor component goes away. If I want to insert a table, the table dialog pops up but the editor component goes away so inserting the table doesn't work. Has anyone had luck with this? Is there a way to make the editor component stay visible until the user hits a "Done" button or something similar?

zeos
21 Sep 2010, 5:35 PM
Privet,

I am trying to use your very nice plugin Ext.ux.TinyMCE v0.8.5
with Ext JS Library 3.1.0 with ext-base adapter and latest tinyMCE 3.3.8,
it works perfect when I load it first time, but when I try to open another ajax form within the same page containing the Ext.ux.TinyMCE it does load, but does not load the data, also does block the data loading to the rest of the form fields.

Any ideas?

P.S. QUICK(dirty) WORKAROUND without your addon:

xtype:'textarea',
listeners: {
render: function(){
tinyMCE.execCommand('mceAddControl', true, this.id);
ed = tinyMCE.get(this.id);
if(ed) ed.show();
},
beforeDestroy: function(){
var ed = tinyMCE.get(this.id);
if(ed) tinyMCE.remove( ed );
}
}


all the best and
thank you for your efforts!
-- Zeos

Dumbledore
29 Sep 2010, 4:02 AM
Hi,

i use the extension inside an Ext.Editor. My page contains several editors (textfield, tinymce) and i want a consistent handling for all editors.
For a textfield editor i use something like this configuration:



this.inputfieldEditor = new Ext.Editor(new Ext.form.TextField(),{
autoSize : 'both',
allowBlur : true,
ignoreNoChange : true,
updateEl : true,
cls : 'x-inline-editor'
});


When i use tinymce inside i want also complete the edit when the Ext.Editor blurs. But the blur event is also fired when a plugin open a new window. So then i have no more editor but the window with the plugin inside.
I can´t figure out to determine open plugin-windows insode tinymce so i decided to patch the extension. Below the declartion of "WindowManager = Ext.extend( tinymce.WindowManager" i add following:



open: function(s, p) {
this.editor.pluginInUse = true;

s = s || {};
p = p || {};

...


/** ----------------------------------------------------------
*/
close: function(win) {
this.editor.pluginInUse = false;


After that i can determine and canceling the blur event inside the beforecomplete event of the Ext.Editor:



var htmlEditor = new Ext.Editor(
tinymce,
{
autoSize : 'both',
allowBlur : true, // ! Beim TinyMCE wichtig! Sonst schließt der Editor beim Aufruf eines Plugins
ignoreNoChange : true,
updateEl : true,
cls : 'x-inline-editor',
listeners: {
beforecomplete : function(ed, value, startValue ){
if (tinymce.getEd().pluginInUse){
tinymce.getEd().focus();

return false;
}
},...



Perhaps someone find it useful or have a nicer solution?

Bye, Dumbledore

countdown
29 Sep 2010, 6:17 AM
Hi
I use the Ext.ux.TinyMCE and the MCE image and filemanagers.
And they don't seem to mesh very well, if someone could explain the strange behaviours or any help would be much appreciated!

If I run the filemanager it works well! It opens in a new window though (normal behaviour I guess)
Then if the Ext.ux.TinyMCE is rendered the filemanager starts opening in an Ext window!
After closing (destroying) the Ext.ux.TinyMCE, the file and image managers stop working( this.editor.selection is null error on line 555)!

How could I prevent this error and make imagemanager to always open in an Ext window?
Thanks for all help!

cstansbury
13 Oct 2010, 1:07 PM
I'm not sure if it's related to your problem or not, but I found that (when running TinyMCE v3.3.8+ and Ext.ux.TinyMCE v0.8.5) I was getting errors when trying to save after having closed one of the Ext.ux.TinyMCE instances. This problem appears to be due to the fact that the TinyMCE editor is being registered *twice*:
- Once when the Editor instance is created (Ext will auto-register the editor instance in the Editor's "init" function)
- A second time when Ext.ux.TinyMCE adds it (in line 176 of Ext.ux.TinyMCE-v.0.8.5).

What happens is that when you close the instance, the editor is only being unregistered once, and therefore leaves a "stale" editor instance registered with TinyMCE which will cause a lot of trouble for subsequent editors...

I have temporarily fixed this by commenting out line 176 of Ext.ux.TinyMCE... but have to do some more research to make sure that this is the appropriate fix (it seems to work so far).

blow
8 Nov 2010, 4:48 AM
Hi There,


I have a problem with the minified Tinymce source. If i use the minified version no editor is shown. ( no errors also ).

I've tried the minified version also on your demo pages but with the same result.

Any ideas?

jorgelive
16 Nov 2010, 10:16 AM
All my modifications are under comments //Jg
1. Validation was giving problems
2. I need to set initiial size
3. I need to consider lengths with tags.

Working on ext 3.3

So here the code:



/** ************************************************************
Ext.ux.TinyMCE v0.8.5
ExtJS form field containing TinyMCE v3.

Author: Andrew Mayorov et al.
http://blogs.byte-force.com/xor

Copyright (c)2008-2010 BYTE-force
www.byte-force.com

License: LGPLv2.1 or later
*/

(function() {

Ext.namespace("Ext.ux");

var tmceInitialized = false;

// Lazy references to classes. To be filled in the initTinyMCE method.
var WindowManager;
var ControlManager;

// Create a new Windows Group for the dialogs
/*var windowGroup = new Ext.WindowGroup();
windowGroup.zseed = 12000;*/


/** ----------------------------------------------------------
Ext.ux.TinyMCE
*/
Ext.ux.TinyMCE = Ext.extend( Ext.form.Field, {

// TinyMCE Settings specified for this instance of the editor.
tinymceSettings: null,

// Validation properties
//Jg
tagMatters:false,
tagMattersText:'(Los caracteres HTML son considerados)',
//End Jg
allowBlank: true,
invalidText: "El valor en este campo es inválido",
invalidClass: "invalid-content-body",
minLengthText : "El tamaño mínimo para el campo es {0} caracteres",
minLength : 3,
maxLengthText : 'El tamaño mánimo para el campo es {0} caracteres',
maxLength : 8,
blankText : 'Este campo es obligatorio',

// HTML markup for this field
hideMode: 'offsets',
defaultAutoCreate: {
tag: "textarea",
style: "width:1px;height:1px;",
autocomplete: "off"
},

/** ----------------------------------------------------------
*/
constructor: function(cfg) {

var config = {
tinymceSettings: {
accessibility_focus: false
}
};

Ext.apply(config, cfg);

// Add events
this.addEvents({
"editorcreated": true
});

Ext.ux.TinyMCE.superclass.constructor.call(this, config);
},

/** ----------------------------------------------------------
*/
initComponent: function() {
this.tinymceSettings = this.tinymceSettings || {};
Ext.ux.TinyMCE.initTinyMCE({ language: this.tinymceSettings.language });
},

/** ----------------------------------------------------------
*/
initEvents: function() {
this.originalValue = this.getValue();
},

/** ----------------------------------------------------------
*/
onRender: function(ct, position) {
Ext.ux.TinyMCE.superclass.onRender.call(this, ct, position);

// Fix size if it was specified in config
if (Ext.type(this.width) == "number") {
this.tinymceSettings.width = this.width;
}
if (Ext.type(this.height) == "number") {
this.tinymceSettings.height = this.height;
}

//this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');

// Wrap textarea into DIV
this.textareaEl = this.el;
var wrapElStyle = { overflow: "hidden" };
if( Ext.isIE ) { // fix IE 1px bogus margin
wrapElStyle["margin-top"] = "-1px";
wrapElStyle["margin-bottom"] = "-1px";
}
this.wrapEl = this.el.wrap({ style: wrapElStyle });
this.actionMode = "wrapEl"; // Set action element to the new wrapper
this.positionEl = this.wrapEl;

var id = this.getId();

// Create TinyMCE editor.
this.ed = new tinymce.Editor(id, this.tinymceSettings);

// Validate value onKeyPress
var validateContentTask = new Ext.util.DelayedTask( this.validate, this );
this.ed.onKeyPress.add(function(ed, controlManager) {
validateContentTask.delay( 250 );
} .createDelegate(this));

// Set up editor events' handlers
this.ed.onBeforeRenderUI.add(function(ed, controlManager) {
// Replace control manager
ed.controlManager = new ControlManager(this, ed);
} .createDelegate(this));

this.ed.onPostRender.add(function(ed, controlManager) {
var s = ed.settings;

// Modify markup.
var tbar = Ext.get(Ext.DomQuery.selectNode("#" + this.ed.id + "_tbl td.mceToolbar"));
if( tbar != null ) {
// If toolbar is present
var tbars = tbar.select("> table.mceToolbar");
Ext.DomHelper
.append( tbar,
{ tag: "div", id: this.ed.id + "_xtbar", style: { overflow: "hidden"} }
, true )
.appendChild(tbars);
}

// Change window manager
ed.windowManager = new WindowManager({
editor: this.ed,
manager: this.manager
});
// Patch css-style for validation body like ExtJS
Ext.get(ed.getContentAreaContainer()).addClass('patch-content-body');

// Event of focused body
Ext.Element.fly(s.content_editable ? ed.getBody() : ed.getWin())
.on("focus", this.onFocus, this);

// Event of blur body
Ext.Element.fly(s.content_editable ? ed.getBody() : ed.getWin())
.on("blur", this.onBlur, this,
this.inEditor && Ext.isWindows && Ext.isGecko ? { buffer: 10} : null
);

} .createDelegate(this));

// Set event handler on editor init.
//this.ed.onInit.add(function() {
//} .createDelegate(this));

// Wire "change" event
this.ed.onChange.add(function(ed, l) {
this.fireEvent("change", ed, l);
} .createDelegate(this));

// Render the editor
this.ed.render();
tinyMCE.add(this.ed);

// Fix editor size when control will be visible
(function fixEditorSize() {

// If element is not visible yet, wait.
if( !this.isVisible() ) {
arguments.callee.defer( 50, this );
return;
}

var size = this.getSize();
this.withEd( function() {
this._setEditorSize( size.width, size.height );

// Indicate that editor is created
this.fireEvent("editorcreated");
});
}).call( this );
},

/** ----------------------------------------------------------
*/
getResizeEl: function() {
return this.wrapEl;
},

/** ----------------------------------------------------------
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function() {
return this.rendered && this.textareaEl.dom.name
? this.textareaEl.dom.name : (this.name || '');
},

/** ----------------------------------------------------------
*/
initValue: function() {

if (!this.rendered)
Ext.ux.TinyMCE.superclass.initValue.call(this);
else {
if (this.value !== undefined) {
this.setValue(this.value);
}
else {
var v = this.textareaEl.value;
if ( v )
this.setValue( v );
}
}
},

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

/** ----------------------------------------------------------
*/
getRawValue : function(){

if( !this.rendered || !this.ed.initialized )
return Ext.value( this.value, '' );

var v = this.ed.getContent();
if(v === this.emptyText){
v = '';
}
return v;
},

/** ----------------------------------------------------------
*/
getValue: function() {

if( !this.rendered || !this.ed.initialized )
return Ext.value( this.value, '' );

var v = this.ed.getContent();
if( v === this.emptyText || v === undefined ){
v = '';
}
return v;
},

/** ----------------------------------------------------------
*/
setRawValue: function(v) {
this.value = v;
if (this.rendered)
this.withEd(function() {
this.ed.undoManager.clear();
this.ed.setContent(v === null || v === undefined ? '' : v);
this.ed.startContent = this.ed.getContent({ format: 'raw' });
});
},

/** ----------------------------------------------------------
*/
setValue: function(v) {
this.value = v;
if (this.rendered)
this.withEd(function() {
this.ed.undoManager.clear();
this.ed.setContent(v === null || v === undefined ? '' : v);
this.ed.startContent = this.ed.getContent({ format: 'raw' });
this.validate();
//this.ed.resizeToContent();
});
},

/** ----------------------------------------------------------
*/
isDirty: function() {
if (this.disabled || !this.rendered) {
return false;
}
return this.ed && this.ed.initialized && this.ed.isDirty();
},

/** ----------------------------------------------------------
*/
syncValue: function() {
if (this.rendered && this.ed.initialized)
this.ed.save();
},

/** ----------------------------------------------------------
*/
getEd: function() {
return this.ed;
},

/** ----------------------------------------------------------
*/
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');
}
});
},

/** ----------------------------------------------------------
*/
onResize: function(aw, ah) {
if( Ext.type( aw ) != "number" ){
aw = this.getWidth();
}
if( Ext.type(ah) != "number" ){
ah = this.getHeight();
}
if (aw == 0 || ah == 0)
return;

if( this.rendered && this.isVisible() ) {
this.withEd(function() { this._setEditorSize( aw, ah ); });
}
},

/** ----------------------------------------------------------
Sets control size to the given width and height
*/
_setEditorSize: function( width, height ) {

// We currently support only advanced theme resize
if( !this.ed.theme.AdvancedTheme ) return;
//Jg
if (this.iHeight&&this.iWidth){
width=this.iWidth;
height=this.iHeight;
}
//end Jg
// Minimal width and height for advanced theme
if( width < 300 ) width = 300;
if( height < 100 ) height = 100;

// Set toolbar div width
var edTable = Ext.get(this.ed.id + "_tbl"),
edIframe = Ext.get(this.ed.id + "_ifr"),
edToolbar = Ext.get(this.ed.id + "_xtbar");

var toolbarWidth = width;
if( edTable )
toolbarWidth = width - edTable.getFrameWidth( "lr" );
var toolbarHeight = 0;
if( edToolbar ) {
toolbarHeight = edToolbar.getHeight();
var toolbarTd = edToolbar.findParent( "td", 5, true );
toolbarHeight += toolbarTd.getFrameWidth( "tb" );
edToolbar.setWidth( toolbarWidth );
}
var edStatusbarTd = edTable.child( ".mceStatusbar" );
var statusbarHeight = 0;
if( edStatusbarTd ) {
statusbarHeight += edStatusbarTd.getHeight();
}
var iframeHeight = height - toolbarHeight - statusbarHeight;
var iframeTd = edIframe.findParent( "td", 5, true );
if( iframeTd )
iframeHeight -= iframeTd.getFrameWidth( "tb" );
// Resize iframe and container
edTable.setSize( width, height );
edIframe.setSize( toolbarWidth, iframeHeight );
},

/** ----------------------------------------------------------
*/
focus: function(selectText, delay) {
if (delay) {
this.focus.defer(typeof delay == 'number' ? delay : 10, this, [selectText, false]);
return;
}

this.withEd(function() {
this.ed.focus();
/*if (selectText === true) {
// TODO: Select editor's content
}*/
});

return this;
},

/** ----------------------------------------------------------
*/

//Jg
processValue : function( value ){
if (!this.tagMatters==true){
return Ext.util.Format.stripTags( value );
}else{
return value;
}
},
//End Jg

/** ----------------------------------------------------------
*/
//Jg
validateValue: function( value ) {
var valido=false;
if(Ext.isFunction(this.validator)){
var msg = this.validator(value);
if(msg !== true){
this.markInvalid(msg);
return false;
}
}
var afterText='';
if (this.tagMatters==true){
afterText=' '+this.tagMattersText;
}
if(value.length < 1 || value === this.emptyText){ // if it's blank
if(this.allowBlank){
valido=true;
this.minLength=0;
}else{
this.markInvalid(this.blankText);
return false;
}
}
if(this.minLength!=0){
if(value.length < this.minLength){
this.markInvalid(String.format(this.minLengthText+afterText, this.minLength));
return false;
}else{
valido=true;
}
}else{
valido=true;
}
if(this.maxLength!=0){
if(value.length > this.maxLength){
this.markInvalid(String.format(this.maxLengthText+afterText, this.minLength));
return false;
}else{
valido=true;
}
}else{
valido=true;
}
if (valido==true){
this.clearInvalid();
return true;
}else{
this.markInvalid('Invalido por razon desconocida');
return false;
}
},
//End Jg

/** ----------------------------------------------------------
If ed (local editor instance) is already initilized, calls
specified function directly. Otherwise - adds it to ed.onInit event.
*/
withEd: function(func) {

// If editor is not created yet, reschedule this call.
if (!this.ed) this.on(
"editorcreated",
function() { this.withEd(func); },
this);

// Else if editor is created and initialized
else if (this.ed.initialized) func.call(this);

// Else if editor is created but not initialized yet.
else this.ed.onInit.add(function() { func.defer(10, this); } .createDelegate(this));
}
});

// Add static members
Ext.apply(Ext.ux.TinyMCE, {

/**
Static field with all the plugins that should be loaded by TinyMCE.
Should be set before first component would be created.
@static
*/
tinymcePlugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

/** ----------------------------------------------------------
Inits TinyMCE and other necessary dependencies.
*/
initTinyMCE: function(settings) {
if (!tmceInitialized) {

// Create lazy classes
/** ----------------------------------------------------------
WindowManager
*/
WindowManager = Ext.extend( tinymce.WindowManager, {

/** ----------------------------------------------------------
Config parameters:
editor - reference to TinyMCE intstance.
mangager - WindowGroup to use for the popup window. Could be empty.
*/
constructor: function( cfg ) {
WindowManager.superclass.constructor.call(this, cfg.editor);

// Set window group
this.manager = cfg.manager;
},

/** ----------------------------------------------------------
*/
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);
},

/** ----------------------------------------------------------
*/
open: function(s, p) {

s = s || {};
p = p || {};

if (!s.type)
this.bookmark = this.editor.selection.getBookmark('simple');

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 = true;
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,
minimizable: s.minimizable,
modal: true,
stateful: false,
constrain: true,
manager: this.manager,
layout: "fit",
items: [
new Ext.BoxComponent({
autoEl: {
tag: 'iframe',
src: s.url || s.file
},
style : 'border-width: 0px;'
})
]
});

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

/** ----------------------------------------------------------
*/
close: function(win) {

// Probably not inline
if (!win.tinyMCEPopup || !win.tinyMCEPopup.id) {
WindowManager.superclass.close.call(this, win);
return;
}

var w = Ext.getCmp(win.tinyMCEPopup.id);
if (w) {
this.onClose.dispatch(this);
w.close();
}
},

/** ----------------------------------------------------------
*/
setTitle: function(win, ti) {

// Probably not inline
if (!win.tinyMCEPopup || !win.tinyMCEPopup.id) {
WindowManager.superclass.setTitle.call(this, win, ti);
return;
}

var w = Ext.getCmp(win.tinyMCEPopup.id);
if (w) w.setTitle(ti);
},

/** ----------------------------------------------------------
*/
resizeBy: function(dw, dh, id) {

var w = Ext.getCmp(id);
if (w) {
var size = w.getSize();
w.setSize(size.width + dw, size.height + dh);
}
},

/** ----------------------------------------------------------
*/
focus: function(id) {
var w = Ext.getCmp(id);
if (w) w.setActive(true);
}

});

/** ----------------------------------------------------------
ControlManager
*/
ControlManager = Ext.extend( tinymce.ControlManager, {

// Reference to ExtJS control Ext.ux.TinyMCE.
control: null,

/** ----------------------------------------------------------
*/
constructor: function(control, ed, s) {
this.control = control;
ControlManager.superclass.constructor.call(this, ed, s);
},

/** ----------------------------------------------------------
*/
createDropMenu: function(id, s) {
// Call base method
var res = ControlManager.superclass.createDropMenu.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('menu_' + this.id).setStyle("z-index", 200001);
};

return res;
},

/** ----------------------------------------------------------
*/
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", 200001);
};

return res;
}
});

// Init TinyMCE
var s = {
mode: "none",
plugins: Ext.ux.TinyMCE.tinymcePlugins,
theme: "advanced"
};
Ext.apply(s, settings);

if (!tinymce.dom.Event.domLoaded)
tinymce.dom.Event._pageInit();

tinyMCE.init(s);
tmceInitialized = true;
}
}
});

Ext.ComponentMgr.registerType("tinymce", Ext.ux.TinyMCE);

})();

kmiyashiro
29 Nov 2010, 12:26 PM
I have temporarily fixed this by commenting out line 176 of Ext.ux.TinyMCE... but have to do some more research to make sure that this is the appropriate fix (it seems to work so far).

Thanks for your debugging. I actually had to comment out line 177:

tinyMCE.add(this.ed);

Qtx
25 Jan 2011, 12:57 PM
//signalbook_edit.js

Yes, this file is absent. Also in the examples on your page, it is absent. Please give this file.

Is it possible to toggle the wysiwyg editor with text area for html code mode? Like here

http://tinymce.moxiecode.com/tryit/toggle_editor.php

andynuss
16 Mar 2011, 11:19 AM
Hi,

Are there plans for having a version of your extension compatible with extjs 4, or is it already compatible with extjs 4?

Thanks,
Andy

xor
16 Mar 2011, 12:07 PM
@andynuss

It definitely will work with Ext 4. But, I afraid, only after we'll start migrating our application to Ext 4. We didn't try yet.

Best,
Andrew

cstansbury
16 Mar 2011, 7:51 PM
Just a heads-up that I found an issue w/ Ext.ux.TinyMCE v0.8.5 when upgrading to TinyMCE v3.4. This latest version of TinyMCE addresses a lot of IE9 issues *and* adds a lot of Aria functionality. Unfortunately, this breaks the Ext.ux.TinyMCE logic that tries to calculate the height of the TinyMCE toolbar.

To fix this, I changed line 138 from:

var tbars = tbar.select("> table.mceToolbar");
to:

var tbars = tbar.select("> div");

broutard
28 Mar 2011, 5:57 AM
I have a little bug in FF and Chrome (even on the source site).

In _setEditorSize() function, toolbarHeight and statusbarHeight seems to be incorrect (statusbar is invisible ... overflow).

wpoosanguansit
29 Mar 2011, 9:25 AM
I am using the current v 0.85 from the download. I have configured the editor without the third row but it still shows with components like in the screenshot. When I take out the theme_advanced_buttons2, it disappears as well.

theme_advanced_buttons1 : "bold,italic, |, justifyleft, |, formatselect, |, formatselect, fontselect, fontsizeselect, bullist, numlist",

theme_advanced_buttons2 : "blockquote, |, link, unlink, anchor",
theme_advanced_toolbar_location : "top",

Thanks for your help.

Stju
30 Apr 2011, 2:03 AM
alert: function(txt, cb, s) {
var tr = this.editor.getLang(txt, 0);
var msg = tr == '' ? txt : tr;
Ext.MessageBox.alert('Warning!', msg, function() {
if (!Ext.isEmpty(cb)) {
cb.call(this);
}
}, s);
},

/** ----------------------------------------------------------
*/
confirm: function(txt, cb, s) {
var tr = this.editor.getLang(txt, 0);
var msg = tr == '' ? txt : tr;
Ext.MessageBox.confirm('Please confirm!', msg, function(btn) {
if (!Ext.isEmpty(cb)) {
cb.call(this, btn == "yes");
}
}, s);
},

This will show correct i18 text. For example instead of showing 'advanced.newdocument'
it ill be represented as 'Are you sure you want clear all contents?'

Edit: Added some check to test if text have translation, or is already represented as message and have no separate translation. Should now work correctly in most cases!

Cheers!

aa0
3 May 2011, 7:32 AM
Ext.ux.TinyMCE derives from Ext.form.Field and thus should respect the api.
the Ext.form.Field signature for the 'change' event is:
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )

but the 0.8.5 version fires:
this.fireEvent("change", ed, l);
so it passes the inner tinymce instance instead of itself. when passing itself then the listener can still get to the inner tinymce component. i can live without the old/new value params because i can get the current value out from the Ext.ux.TinyMCE instance if it is passed.

the Ext.ux.TinyMCE instance does not fire enough events. for example typing fires the 'valid' event (through the parent). and on blur comes the 'change' event. that's just like ext does it, for example in the text field. it gives a user the possibility to detect changes early through the valid/invalid events. but not all cases are supported: for example hitting the backspace does not fire any event.

also, when modifying html code and then applying the changes, there is no event from Ext.ux.TinyMCE as of now, a user has to wait for the blur.

i have modified this a bit, please consider additions along these lines (around line ~168 in v0.8.5):

// Wire "change" event
this.ed.onChange.add(function(ed, l) {
this.fireEvent("change", this);
} .createDelegate(this));

//wire some more
var updateFunc = function() {
this.fireEvent("change", this);
}.createDelegate(this);
//not this one: this.ed.onKeyDown.add( updateFunc );
this.ed.onKeyUp.add( updateFunc );
this.ed.onKeyPress.add( updateFunc );
this.ed.onReset.add( updateFunc );
this.ed.onSetContent.add( updateFunc );
this.ed.onUndo.add( updateFunc );
this.ed.onRedo.add( updateFunc );

now i can listen for potential changes from the outside, compare the current value .getValue() with what i had before, and do things, without waiting for the blur.

lakilevi
5 May 2011, 2:46 AM
Hello.
In my application I use the standard htmleditor in many places. I would change them now to tinyMCE.
Is there a way to overwrite the Ext.form.HtmlEditor class to the Ext.ux.TinyMCE? In this way I don't have to change the code in every location where I used the native htmleditor.

I have tried this:


Ext.form.HtmlEditor = Ext.extend(Ext.ux.TinyMCE,{
tinymceSettings: {
theme : "advanced",
plugins : "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,inlinepopups,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advcode",
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,advcode,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
content_css : "../includes/style_base.css",
file_browser_callback : 'FileBrowser'/*,
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]"*/
},
initComponent : function(){
Ext.ux.TinyMCE.superclass.initComponent.call(this);
},
});


But this is not working. Got some javascript errors.

Any ideas how to replace in all locations the htmleditor with tinymce editor?

Thanks in advance.

lakilevi
5 May 2011, 5:42 AM
Hi.

I have another problem. I use in my application the miframe v. 2.1.4. And it seems it has a conflict with the tinyMCE plugin.
If I include the miframe then the tinyMCE editor does not fit to the size of the popup window any more. I resize the Ext.Window but the editor does not follow the size of the window.

Any ideas how to fix this?

Thanks.

DaviPresentia
12 May 2011, 4:07 PM
Hi guys,

Do you have plans to migrate this Extension to Ext 4.0?

I've tested the extension into ext4 and I've got this isseu:

Cannot create an instance of unrecognized alias: widget.tinymce

Regards,

Davi

Jangla
19 May 2011, 4:00 AM
Anyone got any idea how to make the control's qtips appear to the right of the control? At the moment mine appear top left of the screen. I have got msgTarget: 'side' set for all form controls already.

wboard
21 May 2011, 5:30 AM
I am using the current v 0.85 from the download. I have configured the editor without the third row but it still shows with components like in the screenshot. When I take out the theme_advanced_buttons2, it disappears as well.

theme_advanced_buttons1 : "bold,italic, |, justifyleft, |, formatselect, |, formatselect, fontselect, fontsizeselect, bullist, numlist",

theme_advanced_buttons2 : "blockquote, |, link, unlink, anchor",
theme_advanced_toolbar_location : "top",

Thanks for your help.



use this when you don't want the second and third row of toolbar items


theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,sub,sup,|,bullist,numlist,|,forecolor,backcolor,|,emotions",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",

wboard
21 May 2011, 5:33 AM
I have a little bug in FF and Chrome (even on the source site).

In _setEditorSize() function, toolbarHeight and statusbarHeight seems to be incorrect (statusbar is invisible ... overflow).

do you have a solution for this already?

asugama
2 Jun 2011, 10:57 PM
I notice some problem with the TinyMCE when I use firefox 4, it's fine if I use IE or Chrome, the scrollbar gets cut when the content in the richtext editor is too long. Please take a look at the attached screenshot. That's taken from TinyMCE website.

andynuss
8 Jun 2011, 1:42 PM
Hi,

I have a set of named bookmarks to different urls in the application (for each user). Is there any way in the 'link' creating dialog of the tinymce form to offer a way to select from one of the bookmarks to populate the link field?

Some kind of custom work I suppose, if at all possible.

Andy

mschwartz
10 Jun 2011, 5:13 AM
Hi,

I have a set of named bookmarks to different urls in the application (for each user). Is there any way in the 'link' creating dialog of the tinymce form to offer a way to select from one of the bookmarks to populate the link field?

Some kind of custom work I suppose, if at all possible.

Andy

There's a file browser option to TinyMCE config that lets you specify a function to call. You can use that to open your own Ext style dialog and let the user choose from the bookmarks.

mschwartz
10 Jun 2011, 5:14 AM
I notice some problem with the TinyMCE when I use firefox 4, it's fine if I use IE or Chrome, the scrollbar gets cut when the content in the richtext editor is too long. Please take a look at the attached screenshot. That's taken from TinyMCE website.

Looks like you have frame: true. You'll need to use anchor: '100% -10' (tweak the -10 to fit proper).

Jangla
22 Jun 2011, 3:55 AM
I get that same issue of the bottom of the tinyMCE control being cut off in all browsers...and I'm not using frame: true (or false for that matter).

Looks like the control is being passed the height which it uses to size the text area of the control...before sticking the header bar on which pushes the text box out the bottom of the control.

asugama
19 Jul 2011, 11:34 PM
I tried the anchor: 99% or something, yet it still doesn't work. I found that there's a similar thread discussing this issue on another forum.

http://stackoverflow.com/questions/6273126/tinymce-pressing-tab-causes-the-toolbar-to-disappear

The thread starter seems to suggest removing the resizing function from TinyMCE itself, however, I couldn't figure out which line to be removed though. Anyone with the solution, please share with us.

ko0kiE
21 Jul 2011, 3:49 AM
I get that same issue of the bottom of the tinyMCE control being cut off in all browsers...and I'm not using frame: true (or false for that matter).

Looks like the control is being passed the height which it uses to size the text area of the control...before sticking the header bar on which pushes the text box out the bottom of the control.


I had the same issue using TinyMCE 3.4.3.2, Ext.ux.TinyMCE 0.8.5 and Ext 3.2.1.
I figured that in the function '_setEditorSize' in Ext.ux.TinyMCE the Toolbar Element of TinyMCE Editor is not selected therefore the iframe height is not correctly calculated..

replacing line 372-375 in Ext.ux.TinyMCE.js with the following code worked fine for me:


// Set toolbar div width
var edTable = Ext.get(this.ed.id + "_tbl"),
edIframe = Ext.get(this.ed.id + "_ifr"),
//edToolbar = Ext.get(this.ed.id + "_xtbar");
edToolbar = this.positionEl.child('.mceToolbar');

I hope this will help you too..

xor
17 Aug 2011, 3:30 AM
aa0
I agree with you about the semanitcs of the form field. And this is definitely my bug, that I fire event with inner editor. But you also break the semantics, when you wire "keypress" and other such events to Ext "change" event. It is clearly stated that "change" occurs before "blur". And if you want to listen for keyboard events, then wire up to those events explicitly.

xor
17 Aug 2011, 7:33 AM
Guys, sorry for being soo slooow, but I finally made an update. You can download it from our site:
http://blogs.byte-force.com/media/p/44074.aspx

Fixed problems, reported by you in this thread. (Most of them, I hope.) I also adapted your suggestions, though some of them were refactored.

Highlights:


FIXED: Size calculation for new version of tinyMCE
Component now doesn't fire "blur" when additional dialogs are opened from editor's toolbar.
FIXED: Component registers two instances of the same editor in the tinyMCE during render.
Added internationalization support to alert and confirm dialogs.
"keypress", "keydown", "keyup" editor events got rerized. "change" rized on change, undo and redo.
function (b){var a=this.indexOf(b);if(a!=-1){this.splice(a,1)}return this}



N.B. This is still for OLD EXT. Sorry, new one will come later.

Jangla
23 Aug 2011, 12:24 AM
Seem to have found another issue; not sure if anyone else has this - we've set up our instance to have the styles drop down with custom class names for each selection.

So the relevant portion of our config looks like this:



...
style_formats : [
{title : 'Heading', block : 'h1', classes: ['xTitle','xHeading']},
{title : 'Byline', block : 'h2', classes: ['xTitle','xByline']},
{title : 'Copy', block : 'p', classes: ['xCopy']}
],
...


The problem is that when you select one style and then change to another, the class names of the old style are left in the html of the control. So selecting Heading and then Byline and then Copy as a style will result in HTML like this:



<p class="xTitle xHeading xByline xCopy">Lorem ipsum...</p>

xor
23 Aug 2011, 1:45 AM
Jangla
Please try how does it work in plain TinyMCE. I doubt that my component alters this behavior.

queej
25 Aug 2011, 6:11 AM
Does anyone have a copy of the 0.8.2 version I can use? I need to be compatible with earlier versions of Ext and TinyMCE.

xor
25 Aug 2011, 6:35 AM
Here you are: version 0.8.2.

queej
25 Aug 2011, 6:39 AM
Thank you so much!

andynuss
8 Sep 2011, 8:52 AM
Hi,

When my tinymce form comes up, there is no font selected. It uses the default browser font.

However, in the form box, you must have css that causes the point size to be much much smaller in the editor frame than when the resulting html is rendered in the browser. I.e. its not really wysiwyg for the no-font-selected case.

Is there a way to overcome this, or to preselect one of the common browser fonts?

Andy

xor
8 Sep 2011, 10:58 PM
When my tinymce form comes up, there is no font selected. It uses the default browser font.

However, in the form box, you must have css that causes the point size to be much much smaller in the editor frame than when the resulting html is rendered in the browser. I.e. its not really wysiwyg for the no-font-selected case.

Is there a way to overcome this, or to preselect one of the common browser fonts?
Actually it is not a browser default font but rather editor's default font, which is specified in the editor's default CSS file. You can find it somewhere in the editor's directory. Currently I don't remember what is the name of it. But it is reflected in TinyMCE docs.

So to change this behavior you have to specify CSS of your own. Again consult TinyMCE docs, there is a special configuration setting for this.

JNason
13 Sep 2011, 9:13 AM
I am having a problem with any split buttons added to tinymce when putting the editor in extjs. The popup the opens is out of alignment with the button. If I close the left panel of the viewport then it works correctly. Any suggestions as to where to look? See images...

2803628037

xor
13 Sep 2011, 10:17 PM
@JNason
Can you make a test page reproducing this bug?

JNason
15 Sep 2011, 8:03 AM
I will see what I can do to create a working example that shows the bug. Thanks.

andynuss
15 Sep 2011, 9:00 AM
Hi Andrew,

I discovered that the skin being used sets the size and family of the <body> tag font, that applies to any typing in the editor window done without selecting a paragraph style and a font.

Now I can control this. However, my bigger concern is that when tinymce comes up, I would like to preselect the paragraph style, and thus probably also preselect the font and size settings. Is this possible?

Andy

JNason
19 Sep 2011, 7:15 AM
If found out what was causing the problem. There is a configuration option in tinymce called constrain_menus. I had this set to true. When I turned that off, problem solved.


Version 3.0.4 (2008-03-07)
Added new option constrain_menus, this enables you to force view port constraints on all menus.

Here was the mockup I had created and was going to post before I realized it was fixed if I commented out that line. BTW I know it is odd to have the form in an accordion, in a tab, in a viewport, but I was trying to mimic how our app works in case it was related to that.


<!DOCTYPE html>
<html>
<head>
<title>Ext.ux.TinyMCE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="">

<link rel="stylesheet" type="text/css" href="lib/ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
body { padding: 10px; font-family: Arial; font-size: 12pt;}
h1 { margin-bottom: 0.3em; }
h2 { margin-top: 1em }
</style>

<script type="text/javascript" src="lib/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/ext-3.4.0/adapter/jquery/ext-jquery-adapter.js" ></script>
<script type="text/javascript" src="lib/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="lib/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="Ext.ux.TinyMCE.min.js"></script>

<script type="text/javascript">

// You have to init TinyMCE manually if you plan to render Ext.ux.TinyMCE in the Ext.onReady handler.
Ext.ux.TinyMCE.initTinyMCE();

Ext.onReady(function() {
var tinymceSettings = {
theme : "advanced",
relative_urls : false,
plugins : "autolink,advhr,advimage,advlink,advlist,contextmenu,iespell,layer,"
+"lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,searchreplace,spellchecker,style"
+",table,template,visualchars,xhtmlxtras",
theme_advanced_buttons1 : "formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,bold"
+ ",italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,"
+ "|,bullist,numlist,outdent,indent,blockquote,sub,sup,|,insertlayer,styleprops",
theme_advanced_buttons2 : "undo,redo,cut,copy,paste,pastetext,pasteword,|,link,unlink,anchor,image,media"
+",|,advhr,nonbreaking,|,search,replace,visualaid,spellchecker,|,removeformat,print,preview",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_path : true,
theme_advanced_resizing : false,
theme_advanced_resize_horizontal : false,
theme_advanced_source_editor_height: 350,
table_default_border:0,
table_inline_editing : false,
spellchecker_languages : "+English=en",
constrain_menus: true,
visual: true,
apply_source_formatting : true,
convert_fonts_to_spans : true,
convert_newlines_to_brs : true,
element_format: 'xhtml',
fix_list_elements : true,
inline_styles : true,
verify_html: true,
gecko_spellcheck : true,
};

var frm = new Ext.form.FormPanel({
autoHeight: true,
border: true,
style: 'padding:10px;',
autoScroll: false,
layout:'fit',
width: 772,
frame: false,
title: 'Editor',
items: [
{
xtype: "tinymce",
hideLabel: true,
width: 750,
height: 380,
border: false,
frame: false,
tinymceSettings: tinymceSettings,
value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
}
]
});

var accordion = new Ext.Panel({
layout: 'accordion',
title: 'test',
closable: true,
defaults: {collapsed:false},
items: [frm]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
width: 245,
autoScroll: 'auto',
split: true,
collapsible: true,
layout: {
type: 'accordion',
animate: true
},
items: [{
title: 'Navigation',
html: '<p>Some navigation stuff in here.</p>',
border: false
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false
}]
},{
xtype:'panel',
region: 'center',
items:
new Ext.TabPanel({
border: false,
activeTab: 0,
tabMargin: 20,
items: [accordion]
})
}]
});


});
</script>

</head>
<body>



</body>
</html>

sraghavachari
25 Apr 2012, 10:56 AM
Does this UX require jQuery?

Stju
25 Apr 2012, 11:06 AM
No, it does not require jQuery.

xor
25 Apr 2012, 10:57 PM
Does this UX require jQuery?
Extension does not require. But if you'd choose jQuery-base TinyMCE version, then it would be of course necessary.

JNason
15 Aug 2012, 6:05 AM
Is there a way to toggle the tinymce editor and the textarea?

xor
24 Oct 2012, 7:48 AM
Guys, I finally published the component at the GitHub. Don't know what prevented me to do it before, so don't ask. :)

N.B. The code there also contains Ext.ux.TinyMCE version for ExtJS 4. Somewhat tested.

The repository is here:
https://github.com/AndrewMayorov/Ext.ux.TinyMCE

Jangla
4 Dec 2012, 6:32 AM
Is it just me or is there a bug in the tinyMCE code base? I'm getting an error on line 196 of tiny_mce_src.js :


t.extend(ns[cn].prototype, p);

Error: Uncaught TypeError: Object #<Object> has no method 'extend'

The error is triggered just by including the scripts in the page. Call me insane, but there is no extend function in tiny_mce_src.js It's in other versions, but not in this one. So how has anyone managed to get this extension working when there appears to be a bug in tinyMCE itself?

odaihatim
18 Aug 2013, 1:38 AM
please i need to integrate extjs 3 to tinymce 4 please can help me

sseema
4 Jul 2014, 3:19 AM
Hi

I am using tinymce with extjs 3.4.
In my Htmleditor, when i want to save the file, page break is not working.

Where i need page break i ll put there, but it wont work like that.
Even page break is also not working.

Please help me.

Thanks

xor
6 Jul 2014, 5:37 AM
sseema, I doubt it is related to Ext.ux.TinyMCE, but rather to TimyMCE itself. So you'd better to ask this question at their support forums.