WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#26295 closed enhancement (wontfix)

wp_editor() from inside javascript

Reported by: josh401 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">&lt;p&gt;my_editor&lt;/p&gt;
</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)

#1 @jdgrimes
4 years ago

  • Keywords close added

You should be escaping the editor code, perhaps with addslashes().

$('#my_test').replaceWith('<?php addslashes( wp_editor('my_editor', 'my_editor') ); ?>');

#2 @josh401
4 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).

Last edited 4 years ago by josh401 (previous) (diff)

#3 @jdgrimes
4 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 @josh401
4 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 @azaozz
4 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 @josh401
4 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.

Note: See TracTickets for help on using tickets.