multiple editors in tbody grey out under jQuery 1.7.1 after hide()

timsassen · 2012-04-03T13:31:07Z

I've got a table with numerous tbody elements in it. These tbody elements represent a product in my application. I need to hide() and show() these tbody elements so that one tbody is visible at a given time. Each tbody can contain 0 or more cleditors.

When my application loads the cleditors on the first tbody (init), all cleditors are rendered fine. But when I start using hide() and show() on the tbody elements (which are basically their containers) only the first cleditor is rendered as it should. All other cleditors in the tbody are greyed out. See the image for an example of a greyed out cleditor.

This is the code that initializes a collection of textarea's. This function is run each time a tbody is shown using show()

jqObjectCollection is the jquery collection of textarea-elements
The change function at the end is to trigger the change event bound to the textarea element.

function initCLE(jqObjectCollection){  
    $editors = null;
    $editors = $(jqObjectCollection).cleditor({
      width:        500, // width not including margins, borders or padding
      height:       200, // height not including margins, borders or padding
      controls:     // controls to add to the toolbar
                    "bold italic underline strikethrough subscript superscript | font size " +
                    "style | color highlight removeformat | bullets numbering | outdent " +
                    "indent | alignleft center alignright justify | undo redo | " +
                    "rule image link unlink | cut copy paste pastetext | print source",
      sizes:        // sizes in the font size popup
                    "1,2,3,4,5,6,7",
      styles:       // styles in the style popup
                    [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                    ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                    ["Header 6","<h6>"]],
      useCSS:       false, // use CSS to style HTML when possible (not supported in ie)
      docType:      // Document type contained within the editor
                    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
      docCSSFile:   // CSS file used to style the document contained within the editor
                    "", 
      bodyStyle:    // style to assign to document body contained within the editor
                    "margin:4px; font:10pt Arial,Verdana; cursor:text"

    }).change(function(){ 
        $(this.$area[0]).change();
    });
}

This code works fine when using jquery 1.6.4, but fails under 1.7.1

funivan · 2012-05-28T07:22:10Z

Hi. I find solution fot this bug.

jquery.cleditor.css line 4:

.cleditorToolbar {background: url('images/toolbar.gif') repeat; float: left;position:relative;width:100%;}

And comment this lines
jquery.cleditor.js lint 895 and 896:

//var hgt = $group.offset().top + $group.outerHeight() - $toolbar.offset().top + 1;
//$toolbar.height(hgt);

Please test it. In Google Chrome 19.0 all works fine.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

multiple editors in tbody grey out under jQuery 1.7.1 after hide() #20

multiple editors in tbody grey out under jQuery 1.7.1 after hide() #20

Uh oh!

multiple editors in tbody grey out under jQuery 1.7.1 after hide() #20

multiple editors in tbody grey out under jQuery 1.7.1 after hide() #20

Comments

Uh oh!