1

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!

  • 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 Oct 16 '18 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 Oct 16 '18 at 20:11
3

This is a good use case for the JS version of the editor introduced in 4.8: https://make.wordpress.org/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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.