Mixup between textareas

chdh

This discussion is related to the TinyMCE addon.

Steps to reproduce:
1. Open an existing discussion that contains comments from you.
2. Click "Edit" on one of the existing comments.
3. Click WYSIWYG above the bottom textarea.
Effect: The TinyMCE window is opened for the upper textarea.

Second version:
1. Open an existing discussion that contains comments from you.
2. Click WYSIWYG above the bottom textarea and enter some text.
3. Click "Edit" on one of the existing comments.
4. Click the red "x" symbol ("Disable WYSIWYG") on the TinyMCE header.
Effect: The text entered in TinyMCE is stored in the upper textarea of the old comment.

The reason for this bug is probably that all textareas have the same ID "Form_Body".
see https://github.com/vanillaforums/Garden/issues/647

S

Yeah, I get it.
I'll dive deeper in TinyMCE api, and I'll try to fix bug this later.

chdh

I tried to fix this problem and made some patches which solve it partially:

Just before TinyMCE is opened, change the ID of the textarea:

var textbox = $(self);
if (!hidden && textbox.attr("id") == "Form_Body") {
   textbox.attr("id", "Form_Body_" + (new Date().getTime())); }

Register the fadein/fadeout routines that display the WYSIWYG button for all textareas:

$('textarea.TextBox').live("mouseenter", handlerIn);
$('textarea.TextBox').live("mouseleave", handlerOut);

Add z-index to the CSS of the WYSIWYG button, so that it is visible when old messages are edited:

z-index:999

The fadein/fadeout is not optimal with this version and there is still the problem with the textarea that remains visible after the comment is posted.

UnderDog

You mean this one : Textarea displayed when switching back from "preview" to "write" mode

x00

I completely modded this to get it to work the way I want . I load from a init.js instead of inline. The only in line bit is the path variable. I load the the editors using livequery e.g.

(function($){
$(document).ready(function() {
function loadMCE(that){
$('.TextBox').not(that).parents('div.Comment').each(function(){
$(this).parent().removeClass('Editing');
$(this).children('.Message').show();
if(typeof tinyMCE!='undefined'){
for (var i=0; i<tinymce.editors.length; i++) {
if($(this).eq(tinymce.editors[i])){
tinyMCE.execCommand('mceRemoveControl',false, tinymce.editors[i].id);
}
}
}
$(this).children('.CommentForm').remove();
});


$(that).tinymce({
script_url : tny_path,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft"+
",justifycenter,justifyright,justifyfull,|,formatselect,|,sub,sup",
theme_advanced_buttons2 : "bullist,numlist,|,blockquote,|,undo,redo,|,cut,copy,"+
"paste,pastetext,pasteword,|,link,unlink,|,image,media,|,cleanup,code,|preview,|,removeformat,|,help",
theme_advanced_buttons3 :"",
remove_linebreaks : true,
theme : "advanced",
plugins : "media"
});
}
$('.TextBox,.MessageBox').livequery(function(){
var that = this;
if($(that).parents('form').is('.Activity'))
return;
$(that).ready(function(){loadMCE(that);});
$(that).bind('loadMCE',function(){loadMCE(that);});
});
});
})(jQuery);

x00

I omit activity from dynamic loading, as it is text only.

The submission needs to be handled. There an event handlers triggered is in post.js and discussion.js that you could put in the init code. Although I just put the code in directly.

Removal of newlines that result in erroneous <br />'s
var postValues = $(frm).serialize();
postValues= postValues.replace(/\%0A/g,'');


removal of editor, (this should be automatic)

if(typeof tinyMCE!='undefined'){
for (var i=0; i<tinymce.editors.length; i++) {
if($(textbox).eq(tinymce.editors[i])){
tinyMCE.execCommand('mceRemoveControl',false, tinymce.editors[i].id);
}
}
}


The discussion.js code is the most interesting. I had no problem with the comments dynamically loading. As you can see in init.js it make sure that only one comment is edited at time. The problem lies after editing a comment, the new comment editor despite being associated with a textarea get dis-coupled (it is not through not unloading correctly). I tried all the obvious. The solution is a little odd but the hack works with no quirks.

var newImput = $('#Content > .MessageForm .TextBox:last').clone();

if(typeof tinyMCE!='undefined'){
for (var i=0; i<tinymce.editors.length; i++) {
tinyMCE.execCommand('mceRemoveControl',false, tinymce.editors[i].id);
}
}
$('#Content > .MessageForm .TextBox:last').replaceWith(newImput);
$('#Content > .MessageForm .mceEditor:last').remove();


The old textarea is replaced, triggering an init. The dis-coupled editor is removed, leaving a working editor.

x00

So in short, it is best not to have too many active editors at one time, due to the way tinyMCE is coupled.

x00

my solution works well with (modded) quotes.

x00

I should point out to development. that duplicate IDs are illegal anyway. If there is ajax snippets that are going to be inserted in multiple places, best stick to classes and random ids. I know it doesn't always matter, but side effects...

chdh

> You mean this one : Textarea displayed when switching back from "preview" to "write" mode

Yes, and some other incorrect behavior that you see immediately when you write a new comment in WYSIWYG mode or edit an existing comment in WYSIWYG mode and play around with the "Post Comment", "Preview", "Write Comment", "Edit" and "WYSIWYG" buttons. The patch that I wrote in the other question thread solves the problem partially.