CODEWITHSUNDEEP
jqueryajaxtinymce
Darrarski
Darrarski

Reputation: 4032

Loading TinyMCE via ajax request using jQuery

I'm using jQuery ajax function to dynamically load content from another file. I want to add TinyMCE editor to my page this way. Link to tiny_mce.js file and the editor initialization script should be included in the dynamically loaded file. The problem is that it's not working for me.

Here is simple example of what I've want to do: http://www.darrarski.pl/TinyMCE_ajax/index.html

Here is file that is loaded via ajax: http://www.darrarski.pl/TinyMCE_ajax/editor.html

If you open the second file directly in your browser, TinyMCE editor is working with no problem.

Using Firebug console, you can see that tiny_mce.js is being successfully loaded. I've also added console.debug() is several places, so you can see, that script from ajax loaded file (editor.html) is being executed correctly and there are no errors. The link to the jQuery library in the second file is included only for testing reasons (so it will work when you access this file directly in your browser) and it's not necessary when loading editor via ajax.

Please, help me solving this issue.

Update: I've found another WYSIWYG editor, that works the way I want, but it's not well documented and I'm afraid of using it because of lack of options that TinyMCE has. But maybe it will help someone with marking TinyMCE ajax initialization possible:

http://www.darrarski.pl/elRTE_ajax/index.html

Anyway, this is exactly behaviour that I want to achieve using TinyMCE.

Upvotes: 1

Views: 5674

Answers (1)

Thariama
Thariama

Reputation: 50832

Problem here is that you are loading not a html element into the div named "content", but a whole page. This does not work. What you need to do is to insert a html element only.

I worked with your code and when your editor.html contains the following it works:

<textarea cols="50" rows="5"  id="editor" name="editor">test content</textarea>
<script type="text/javascript">
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced"
        });
</script>

Upvotes: 1

Related Questions