[wp-trac] [WordPress Trac] #19173: Issues with wp_editor() when used inside of a meta box.

[WordPress Trac]

#19173: Issues with wp_editor() when used inside of a meta box.
--------------------------+-------------------------
 Reporter:  goto10        |       Owner:  azaozz
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  Editor        |     Version:  3.3
 Severity:  normal        |  Resolution:  maybelater
 Keywords:                |
--------------------------+-------------------------

Comment (by bjorsq):

 I've tested this, but have encountered errors when the editor is switched
 to text/html mode using the tabs in the top right. It works great as long
 as the editor is in tinymce mode, but when it is in text/html mode there
 are sometimes problems when dragging the metabox, and tinymce toolbars are
 added when the metabox is dropped (under the bbcode toolbar). I added a
 check for each editor which looks for the tmce-active class on a parent
 first, and it seems to work OK - here is the modified _triggerAllEditors
 function:


 {{{
         var _triggerAllEditors = function(event, creatingEditor) {
                 var postbox, textarea;

                 postbox = $(event.target);
                 textarea = postbox.find('textarea.wp-editor-area');

                 textarea.each(function(index, element) {
                         var editor, is_active;

                         editor = tinyMCE.EditorManager.get(element.id);
                         is_active = $(this).parents('.tmce-
 active').length;

                         if (creatingEditor) {
                                 if (!editor && is_active) {
 tinyMCE.execCommand('mceAddControl', true, element.id);
                                 }
                         }
                         else {
                                 if (editor && is_active) {
                                         editor.save();
 tinyMCE.execCommand('mceRemoveControl', true, element.id);
                                 }
                         }
                 });
         };

 }}}


 Replying to [comment:17 devesine]:
 > Replying to [comment:5 azaozz]:
 > > Another possibility would be to get the content of the editor and then
 destroy the instance on dragstart. Then on dragend initialize it again and
 set the content. Such code should go in postboxes.js inside the
 UI.sortable, will run some tests with that too.
 >
 > (Since we just addressed this, I thought I'd post what information we
 have.)
 >
 > We're using the following code to do this in WP 3.5, and it seems to be
 working well and robustly (with multiple metaboxes containing multiple
 TinyMCE editors).  The selectors could probably be refined a bit.
 >
 > {{{
 > // TinyMCE doesn't handle being moved in the DOM.  Destroy the
 > // editor instances at the start of a sort and recreate
 > // them afterwards.
 > var _triggerAllEditors = function(event, creatingEditor) {
 >       var postbox, textarea;
 >
 >       postbox = $(event.target);
 >       textarea = postbox.find('textarea.wp-editor-area');
 >
 >       textarea.each(function(index, element) {
 >               var editor;
 >               editor = tinyMCE.EditorManager.get(element.id);
 >               if (creatingEditor) {
 >                       if (!editor) {
 >                               tinyMCE.execCommand('mceAddControl', true,
 element.id);
 >                       }
 >               }
 >               else {
 >                       if (editor) {
 >                               editor.save();
 >                               tinyMCE.execCommand('mceRemoveControl',
 true, element.id);
 >                       }
 >               }
 >       });
 > };
 > $('#poststuff').on('sortstart', function(event) {
 >       _triggerAllEditors(event, false);
 > }).on('sortstop', function(event) {
 >       _triggerAllEditors(event, true);
 > });
 > }}}

--
Ticket URL: <http://core.trac.wordpress.org/ticket/19173#comment:20>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software