Fork me on GitHub
Current releases are 2.1.1 (2 Aug 2014) and 2.0.18.13 (5 Aug 2014)
Ready for 2.1? Find out if your favorite plugins are compatible.
The 2.0 branch will no longer receive updates after Dec 2014.

Mixup between textareas

edited August 2011 in Vanilla 2.0 Help
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
Tagged:

Answers

  • SS
    edited August 2011
    Yeah, I get it.
    I'll dive deeper in TinyMCE api, and I'll try to fix bug this later.
  • 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.
  • 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);


    grep is your friend.

  • 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.

    grep is your friend.

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

    grep is your friend.

  • my solution works well with (modded) quotes.

    grep is your friend.

  • 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...

    grep is your friend.

  • 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.

Sign In or Register to comment.