php - How can I add tinymce editor in Wordpress with jQuery?

I need to add a tinymce editor with a jQuery function. I know that tinymce is a js based editor so there need to be a way to do something like this:

<div class="container">
    <div class"text">
        Some text in this div here blub bla bli blu 
    </div>
    <div class"edit-button"></div>
</div>


jQuery('.edit-button').click(function () {
       var description = jQuery('.text');
       var description_content = description.text();

       //Hide the description in the frontend
       jQuery(description).hide();
       jQuery('.edit-button').hide();

       //Create Tinymce here, pre-fill the editor with the description text and display it inside of the <div class="container">
});

I've searched a lot but not comming forward. Can you help me please? Thank you!

I need to add a tinymce editor with a jQuery function. I know that tinymce is a js based editor so there need to be a way to do something like this:

<div class="container">
    <div class"text">
        Some text in this div here blub bla bli blu 
    </div>
    <div class"edit-button"></div>
</div>


jQuery('.edit-button').click(function () {
       var description = jQuery('.text');
       var description_content = description.text();

       //Hide the description in the frontend
       jQuery(description).hide();
       jQuery('.edit-button').hide();

       //Create Tinymce here, pre-fill the editor with the description text and display it inside of the <div class="container">
});

I've searched a lot but not comming forward. Can you help me please? Thank you!

• php
• javascript

Share Improve this question asked Oct 16, 2018 at 19:52 Johnny97Johnny97 21477 silver badges1818 bronze badges 2

• 1 Can you give more context? Are you just trying to provide a feedback form? Or trying to get WYSIWYG data from users? Have you looked at the TinyMCE docs? tiny.cloud/docs/quick-start Also, what is the end goal? What are you trying to accomplish? There are often safer, faster and more efficient ways to get user input with plugins like Gravity Forms or other forms plugins which include WYSIWYG editors as an option. – Armstrongest Commented Oct 16, 2018 at 19:58
• I'm trying to give the user the option to edit a text. This is why I need to load the editor, replacing the current text but set the text to the editor before in WordPress. After this I think I know how to save it and relaoad it and all the other stuff. I'll use the standard WordPress editor which is Tinymce right? – Johnny97 Commented Oct 16, 2018 at 20:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

This is a good use case for the JS version of the editor introduced in 4.8: https://make.wordpress/core/2017/05/20/editor-api-changes-in-4-8/

A new editor API was added in #35760. It makes it possible to dynamically instantiate the editor from JS.

Here's an example of how it's used (stolen from Rheinard Korf's example here):

// Remember to wp_enqueue_editor(); inside PHP.

// Add editor
wp.editor.initialize(
  'test-editor',
  { 
    tinymce: { 
      wpautop:true, 
      plugins : 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview', 
      toolbar1: 'formatselect bold italic | bullist numlist | blockquote | alignleft aligncenter alignright | link unlink | wp_more | spellchecker' 
    }, 
    quicktags: true 
  }
);

Where test-editor would be the ID of the textarea you want to make an editor.