#26295 closed enhancement (wontfix)
wp_editor() from inside javascript
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 3.7.1 |
Component: | TinyMCE | Keywords: | close |
Focuses: | Cc: |
Description
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!
Change History (6)
#2
@
11 years ago
Thank you.
I tried that, as well as str_replace( "'", '"', wp_editor('my_editor', 'my_editor'));
; neither of which were successful (although not entirely sure why).
#3
@
11 years ago
Ahh, I forgot that the wp_editor()
function only echos the value, so this will have no affect. You will have to use output buffering:
ob_start(); wp_editor( 'my_editor', 'my_editor' ); echo addslashes( ob_get_clean() );
#4
@
11 years ago
Ahhh... I was afraid of that. I really need to learn output buffering. I am always reluctant to use it because I don't fully understand it's implications.
@jdgrimes... you are awesome!! Thank you so much for your time on this matter. I'll give that a go and see what happens. Thank you, thank you.
#5
@
11 years ago
- Milestone Awaiting Review deleted
- Resolution set to wontfix
- Status changed from new to closed
wp_editor()
outputs quite a bit of HTML, including a <link rel='stylesheet'>. It also enqueues a lot of JS and outputs more HTML at the bottom of the page.
Not sure it's a good idea to load it inside JS. Better output it in a hidden div and move it before TinyMCE is initialized.
#6
@
11 years ago
Better output it in a hidden div and move it before TinyMCE is initialized.
Perfect. Thanks Andrew.. imo you are king of tinymce!
That will work exactly for my needs.
And quite right.. I did notice the extensive output of HTML (not aware of the enqueued scripts; thanks again).
Thank you for the lessons!
@jdgrimes,
I got closer with your suggestion.. but still not quite there. I believe Andrew's solution is perfect for me. Thank you again for your help.
You should be escaping the editor code, perhaps with
addslashes()
.