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?

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?

• javascript
• jquery
• tinymce

3 Answers 3

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

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

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

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

where "editorID" is your editor ID selector

<div id="editorID">...</div>

Use the activeEditor object:

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