Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a theme that is custom developed and really complex. One of the things that I have is multiple content areas where users can specify content for specific tabs. I load multiple instances of the WordPress editor through the wp_editor() function. It works perfectly. (This is all on the admin side, in the "Page" post type)

However, I began making a few improvements, including the ability to add/remove tabs dynamically (before, I loaded 6 editors on the page). Users may have 1-7 tabs.

When users add a tab, it needs to add an instance of the editor to the page. However, no matter what I try, I cannot get it to load and display correctly.

Here are the 2 things that I have tried so far:

  1. Create a php file that has the admin bootstrap included, and then loading the editor with wp_editor(). I then do a jQuery $.load to call the page and include the resulting HTML in the area that it needs to display. This doesn't really work, however, as the editors formatting buttons disappear (it's worth noting, that pulling the page up directly, the editor displays and functions perfectly)
  2. Loaded the editor on the page, inside a hidden div, and then once a tab is added, use jquery to move it into place. This loads the editor in tact, but you cannot use any of the editor buttons (they display, but don't do anything), and you can't put your cursor in the text area (curious, however, that switching to HTML mode allows typing and some interaction with the HTML mode buttons)

So the question is, has anyone had any luck adding editors through AJAX calls? Any advice?

share|improve this question
    
did you tried to do a ajax call via admin-ajax.php? If no make a function with your code then call it via admin-ajax.php –  Sisir May 10 '12 at 15:56
    
Does this suggestion help? If so, it is not a WordPress question. :) –  toscho May 10 '12 at 16:52
    
@Sisir, If I am reading your suggestion correctly, then it didn't work. I used this to call the Ajax form: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add‌​_editor'); and then added a function that returns wp_editor(). It gets called with no problem, but it still only returns the editor with no buttons. (exact same results as item 1 in the OP) –  Aaron Wagner May 10 '12 at 17:44
    
Once initialized TinyMCE cannot be moved around in DOM. You must remove it, move in DOM and initialize again. Similar code but for frontend comments here on my blog: techytalk.info/… Comments form is moved when user clicks reply/cancel reply. –  user20106 Sep 5 '12 at 22:46

3 Answers 3

You need to call the editor init again once you add your ajax textarea, I did it like this:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

Then call your function after your ajax, like this:

$('#my_new_textarea_container').html(response).tinymce_textareas();
share|improve this answer
1  
Please explain how does this work? This does not work. I tried it. –  Ahmed Fouad Jul 18 '12 at 18:09
    
After adding the ajax content which contains the textarea I want tinyMCE on (response), call the tinymce_textareas function which initialises tinyMCE on the new textareas. –  shahar Jul 18 '13 at 10:46

To get the quicktags to show up, you need to re instantiate them within your ajax oncomplete handler.

quicktags({id : 'editorcontentid'});

My ajax success handler looks like this;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

I've managed to get the editor to load by first calling a static function that creates the editor and caches it as variable. I run the editor creation method on init. This seems to get wordpress to enque all the required scripts.

Its important that when you create your editor instance, that you set it to use tinymce, that way the tinymce js file is enqued as well.

share|improve this answer

The the usable solution from @toscho on github. He build this nice result also for a question here, see his answer for more details.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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