two tinyMCE editors in the same page

It sure wasn’t easy but here it comes.

(1)I couldn’t get the media button to work in any other way with the editors, while excluding the media buttons from one of the editors, but not from all of them, so i had to use the the_editor();

the JS is conflicting while implementing multi instance of tinyMCE with the_editor();
while trying to implement more the one the_editor(); you’ll see that the “HTML” and “VISUAL” tabs are conflicting and although i didn’t got deep in the JS, i’m gussing that the cause is the use of an ID selectors for the “edButtonHTML” and “edButtonPreview” buttons.

in my case i didn’t mind to hack the core, so i just removed, in wp-includes/general-template.php the content between the lines 1828-1831:

<div id="quicktags"><?php
wp_print_scripts( 'quicktags' ); ?>
<script type="text/javascript"> edToolbar()</script>
</div>

(2) and hid the “edButtonHTML” and “edButtonPreview” buttons, in functions.php (this annoying WYSIWYG is not letting me to show you the whole “<“style”>” function snipt, but you got the picture:

edButtonPreview {display:none}

edButtonHTML {display:none}

(3) And as the final punch, the media-buttons are also conflicting because here also we’re using ID as selectors:

<div id="media-buttons" class="hide-if-no-js">
Upload/Insert 
    <a href="media-upload.php?post_id=0&amp;type=image&amp;TB_iframe=1" id="add_image" class="thickbox" title="Add an Image"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-image.gif?ver=20100531" alt="Add an Image" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=video&amp;TB_iframe=1" id="add_video" class="thickbox" title="Add Video"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-video.gif?ver=20100531" alt="Add Video" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;type=audio&amp;TB_iframe=1" id="add_audio" class="thickbox" title="Add Audio"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-music.gif?ver=20100531" alt="Add Audio" onclick="return false;"></a>
    <a href="media-upload.php?post_id=0&amp;TB_iframe=1" id="add_media" class="thickbox" title="Add Media"><img src="http://testit.yuvalaloni.co.il/wp-admin/images/media-button-other.gif?ver=20100531" alt="Add Media" onclick="return false;"></a>       
</div>

The problem is when you aren’t focusing on the editor by click, the media button is acting on the last editor only. the magic to solve this is by adding a Jquery listener that uses the tinyMCE API for focusing on each of the editors as you hover them.
The first argument of the “tinyMCE.execInstanceCommand” is the ID of the editor, AKA the ID that you’ve used in the_editor() functions:

<script type="text/javascript">
    jQuery(document).ready(function($) {

        jQuery('#editor-one').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText", "mceFocus"); 
        });

        jQuery('#editor-two').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText2", "mceFocus");
        });

        jQuery('#editor-three').mouseover(function() {
            tinyMCE.execInstanceCommand("MoobWelcomeText3", "mceFocus"); 
        });
    });

That’s it. tell me how it goes. does some one know how to declare a bug in TRAC? i never did it and i think this is a bug, as it won’t let wordpress developers use more then one tinyMCE editor, otherwise… unless i missed something.

Related Posts:

  1. Snippet: Use classes instead of inline styles for text alignment
  2. Multiple TinyMCE Editors in one Admin Page
  3. Tiny MCE custom styles, and preview in the backend
  4. How to store widget fields data as an array?
  5. How To Add New Option Types To Option Tree?
  6. Any alternate TinyMCE4 themes / subthemes?
  7. Modular theme settings
  8. How can I stop TinyMCE from converting my HTML entities to characters?
  9. How does WordPress decide what template to use as frontpage
  10. get_option function
  11. Get category slug and display it on a query_post
  12. Override Current Theme Setting in wp_config.php
  13. Adding Content Areas to Custom Page Template
  14. Why might $input (Settings API) be coming through empty?
  15. Multiple Custom_Background, is it possible?
  16. Static Front Page problem
  17. WordPress theme (or plugin) that uses Contenteditable property
  18. Cannot update WordPress General Settings Site Title and Tagline
  19. Add tinymce to widget textareas
  20. Wysiwyg editor for P2 theme
  21. WYSIWYG editor in WP 3.2 plugin
  22. Add WYSIWYG to Image Description field
  23. How to upload images using Settings API
  24. Theme settings keep getting reset/erased
  25. How to make content editable from admin page?
  26. Custom settings page TinyMce: no formatting when echoing value of editor
  27. Where should I update_options in a theme?
  28. Can Rich Text features be configured per user?
  29. How can I display/hide certain content based on a Theme Option field?
  30. How can I make my options in an array and store theme in WP options one DB row?
  31. How to dynamically generate wordpress editor on frontend?
  32. HTML added to editor when deleting shortcodes in Chrome browser
  33. How to Call pages from a Options Panel
  34. Efficiency of wp_options vs a new table
  35. How to i style the elements from the TinyMCE
  36. How to set wp_options in functions.php for removeing the Default Front Page
  37. Override plugin option by with a custom theme
  38. Insert Rich Text Editor in theme?
  39. not getting API setting saved confirmation message after update on option page
  40. tiny_mce_before_init: ‘exact’ => true has no effect
  41. How to add custom page elements to the WYSIWYG editor?
  42. Update Specific Key Value in Complex `wp_options` object
  43. How to remove permalinks links presents in each page of my site?
  44. Tabbed theme options query about add_settings_section callback function
  45. More HTML elements variety in visual editor
  46. Unable to delete option
  47. Text View (Code View) in WordPress Customizer TinyMCE Editor
  48. wp_editor some functionality not working on custom theme
  49. TinyMCE strips content while pasting. Possibly a bug
  50. Theme Option’s Save Button is not working
  51. Any Cool WordPress Theme Editor? [closed]
  52. Problem with Line spacing in wysiwyg editor in WP 3.5.1
  53. What WP folder can I use to write files to?
  54. How to add default images for custom backgrounds?
  55. How to call the_excerpt() with tags or the_content() as an excerpt?
  56. Display a different theme for not logged-in users
  57. how to test a theme upgrade
  58. Apply custom style to single word in WordPress
  59. How to set path with WP_Filesystem and ftp base / chroot
  60. How to Modify a Widgets UL and/or LI Classes
  61. WooCommerce: VAT on grouped products
  62. Why is unfiltered html allowed in custom fields for author / contributor roles?
  63. Theme change only in CSS and a few images
  64. Metadata Query when storing data as array possible?
  65. Excluding Pages not working
  66. How to use different assets if local or live
  67. get_option() returning empty
  68. How can I add a custom button to the post editor toolbar?
  69. How to make the excerpt_more filter apply to the actual post excerpt?
  70. Default image size not working
  71. Changing Header Image Every N Minutes/Seconds
  72. Can I add an icon & function to the “Upload/Insert” toolbar at the top of the content editor?
  73. underscores use of the article element on the page template
  74. Ideal inline dynamic CSS injection
  75. How to create and populate with few links a menu in child theme functions.php?
  76. Plugin does not work in custom theme
  77. How to Manually Code Shortcode?
  78. Making custom woo themes
  79. Previous and Next links not populating, have I missed something?
  80. Single.php the_excerpt loads same as the_content not loading read more line
  81. Where to put custom page templates in theme?
  82. How to fix WordPress images not showing up in local hosted XAMPP server?
  83. Send data to Editor before saving the post
  84. .current_page_ancestor broken in Twenty Eleven
  85. Remove the preview link box since 6.0 update
  86. WordPress theme header.php should I add title meta?
  87. Problems with cart and pages on _s theme
  88. Creating a Single Page Theme correctly
  89. Custom post type query with pagination doesn’t work
  90. Edit Product Archive design for Woo theme
  91. How do I remove header/page-title image in farvis theme? [closed]
  92. Which theme PHP file should be edited in order to change Posts appearance
  93. Necessary css classes to be included in theme stylesheet
  94. How to link post image to post link?
  95. jQuery conflict in WordPress, works fine in HTML
  96. Including some variables in function.php and echo them is several place of theme is not working
  97. How to create multiple sidebar areas with a forloop and register_sidebars?
  98. Bootstrap isn’t called into my WordPress theme
  99. Adding a new layout for genesis
  100. Which function(s) to build a paged HTML table

Leave a Comment