[wp-trac] [WordPress Trac] #26295: wp_editor() from inside javascript

[WordPress Trac]

#26295: wp_editor() from inside javascript
-------------------------+-----------------------------
 Reporter:  josh401      |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  TinyMCE      |    Version:  3.7.1
 Severity:  normal       |   Keywords:
-------------------------+-----------------------------
 I noticed a small issue when attempting to use the `wp_editor()` function
 from within a script tag.  The issue has to do with single and double
 quotes on the output.

 To replicate, create any textarea with ID of `my_test` on the frontend of
 a post/page.  Then, add this custom function (may need to add `is_page()`
 conditional):



 {{{
 function my_wp_head() {
         wp_enqueue_script('jquery');
         ?>
         <script type="text/javascript">
         jQuery(document).ready(function($){
                 $('#my_test').replaceWith('<?php wp_editor('my_editor',
 'my_editor'); ?>');
         });
         </script>
         <?php
 }
 add_action('wp_head','my_wp_head');
 }}}

 The code attempts to render the editor.. but results in a js error because
 the output mixes single and double quotes.. breaking the js.

 Here is the rendered output in the browser:

 {{{
 <script type="text/javascript">
 jQuery(document).ready(function($){
 $('#my_test').replaceWith('<div id="wp-my_editor-wrap" class="wp-core-ui
 wp-editor-wrap tmce-active"><link rel='stylesheet' id='editor-buttons-css'
 href='http://joshlobe.com/testsite/wp-
 includes/css/editor.min.css?ver=3.7.1' type='text/css' media='all' />
 <div id="wp-my_editor-editor-tools" class="wp-editor-tools hide-if-no-
 js"><a id="my_editor-html" class="wp-switch-editor switch-html"
 onclick="switchEditors.switchto(this);">Text</a>
 <a id="my_editor-tmce" class="wp-switch-editor switch-tmce"
 onclick="switchEditors.switchto(this);">Visual</a>
 </div>
 <div id="wp-my_editor-editor-container" class="wp-editor-
 container"><textarea class="wp-editor-area" rows="20" cols="40"
 name="my_editor" id="my_editor"><p>my_editor</p>
 </textarea></div>
 </div>
 ');
 });
 </script>
 }}}

 See how it mixes single and double quotes?  This causes the single quote
 at the beginning of the js to be closed prematurely.  All outputted lines
 use double quotes with the exception of this one:

 {{{
 <link rel='stylesheet' id='editor-buttons-css'
 href='http://joshlobe.com/testsite/wp-
 includes/css/editor.min.css?ver=3.7.1' type='text/css' media='all' />
 }}}

 Is there perhaps a quick fix for this?  Maybe I am overlooking something..
 or even doing something incorrectly?

 Thank you for everyones time!

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26295>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software