Search code examples
javascriptjquerytinymce

TinyMCE, insert HTML into specific TinyMCE instance


I have multiple TinyMCE editors on one page and I need to insert HTML in a specific one, currently when I insert HTML, it inserts it into the last one:

My init code:

<script type="text/javascript">
$(document).ready(function() {

    // enable tinyMCE on shortDescription
    tinymce.init({
        mode : "exact",
        elements :"shortDescriptionHtml",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        relative_urls : false,
        remove_script_host : false
    });

    // enable tinyMCE on fullDescription
    tinymce.init({
        mode : "exact",
        elements :"fullDescriptionHtml",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        relative_urls : false,
        remove_script_host : false
    });

    // enable tinyMCE on Terms And Conditions
    tinymce.init({
        mode : "exact",
        elements :"termsAndConditionsHtml",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        relative_urls : false,
        remove_script_host : false      
    });

});
</script>

Now when I try to do

tinyMCE.execCommand('mceInsertContent',false,'<img src="'+imgsrc+'" />');

It inserts the image in the last TinyMCE editor, which is the terms and conditions one, how do I insert that image into the first or second TinyMCE editor?


Solution

  • You should get a certain instance of editor. I guess, something like that: tinymce.get($(el).attr('id'));?

    check this out: http://jsfiddle.net/svCp2/. The line here is:

    tinymce.get('c3').setContent('sdf');