Skip to content

Instantly share code, notes, and snippets.

@pragmatic-web
Created February 22, 2012 14:34
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save pragmatic-web/1885364 to your computer and use it in GitHub Desktop.
Save pragmatic-web/1885364 to your computer and use it in GitHub Desktop.
WordPress function to add the TinyMCE WYSIWYG editor to any custom field of type 'Textarea'
// important: note the priority of 99, the js needs to be placed after tinymce loads
// important: note that this assumes you're using http://wordpress.org/extend/plugins/verve-meta-boxes/
// to create the textarea - otherwise change your selector
function admin_add_wysiwyg_custom_field_textarea()
{ ?>
<script type="text/javascript">/* <![CDATA[ */
jQuery(function($){
var i=1;
$('.verve_meta_box_content textarea').each(function(e)
{
var id = $(this).attr('id');
if (!id)
{
id = 'customEditor-' + i++;
$(this).attr('id',id);
}
tinyMCE.execCommand('mceAddControl', false, id);
});
});
/* ]]> */</script>
<?php }
add_action( 'admin_print_footer_scripts', 'admin_add_wysiwyg_custom_field_textarea', 99 );
@pragmatic-web
Copy link
Author

This function was adapted by a contact of mine from a script he found online. Thought it was worth posting here, let me know if you consider it your copyright and want me to remove it.

@toitoit
Copy link

toitoit commented Oct 6, 2015

Very useful, thanks! I had to add an extra line to get this to work:

tinyMCE.execCommand("mceAddEditor", false, id);
tinyMCE.execCommand("mceAddControl", false, id);

@nasermirzaei89
Copy link

@amoreau2002
Copy link

You just save me contless hours of work !
Huge thanks man !

@blachawk
Copy link

blachawk commented Apr 9, 2018

where do we place this code?

@theo-69
Copy link

theo-69 commented Nov 15, 2018

same question, does this go into function?

@Timoti
Copy link

Timoti commented May 22, 2019

this is really great - unfortunately the one thing my custom field really needs on the toolbar isn't there - unordered list formatting.
Any idea on how i might tailor the tool set?
PS yes - I needed tinyMCE.execCommand("mceAddEditor", false, id); in there so thanks @toitoit

@segunolamidegitup
Copy link

@segunolamidegitup
Copy link

for new visitors:
https://codex.wordpress.org/Function_Reference/wp_editor

You me stress

save

@japjitravels
Copy link

when i use wp_editor in my widget / plugin it shows rich text but save button shows already saved and cant click

below code i use
` $content = 'Hello World!';
$editor_id = $this->get_field_id('text');

$settings = array(
    'media_buttons' => false,
    'textarea_rows' => 5,
    'teeny'         => true,
	'textarea_name' => $this->get_field_name('text'),
);

wp_editor( $content, $editor_id, $settings );`

anybody can help ?

@jorhel
Copy link

jorhel commented Sep 7, 2023

This is my solution:

        $('textarea[name^="meta"]').each(function(i, e) {
            var id = !e.id ? 'customEditor-' + i : e.id;
            tinymce.init({
            selector: '#' + id,       
                setup: function (editor) {
                    editor.on('change', function ( e, i) {
                        tinymce.triggerSave();
                    });
                }
           });
        });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment