Question posted in
You can find the official documentation here.

Set value to textarea TinyMCE using ajax – Jquery ajax

I have these code that fetch data from database using ajax. So far the data can be display into modal if the input is not tinyMCE such as normal textarea, input or dropdown.

js

<script> 
    jQuery(document).ready(function() {
        if ($("#info").length > 0) {
            tinymce.init({
                selector: "textarea#info",
                theme: "modern",
                height: 300,
                plugins: [
                    "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                    "save table contextmenu directionality emoticons template paste textcolor"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
            });
        }
    });  

    var get_value = "2";
    $.ajax({
        url: '/getData' ,
        type: "GET",
        dataType: "json",
        data: {"get_value": get_value},
        success: function(data)
        {  
            var ar          = data;    
            var content     = ""; 

            for (var i = 0; i < ar.length; i++) 
            { 
                content        = ar[i]['content'];  
            }    

            // temp 1
            $('#info').val(content);

            // temp 2
            $('#info').tinyMCE.activeEditor.setContent(content);

            // temp 3
            tinymce.get('#info').setContent(content);

            // temp 4
            $.getInstanceById("info", tinyMCE.activeEditor.setContent);

            // temp 5
            tinyMCE.getInstanceById('info').setContent(content);

            $('#modal_info').modal({
                show: true
            });  

        },
        error: function(error){
            console.log("Error:");
            console.log(error);
        }
    });  
</script>

However, value cannot be send into my TinyMCE textarea inside modal. None of the option works for me. Here’s my blade.php code.

blade.php 

<div id="modal_info" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">Info</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body"> 

                <div class="col-md-12">
                    <div class="form-group row">
                        <textarea id="info" name="info" class="form-control info"></textarea>
                    </div>
                </div> 

            </div>
        </div>  
    </div> 
</div>

What am I missing ? How to send the value into tinyMCE textarea ?

Appreciate if someone can help. Thanks.

Tags:

3

Answers


  1. 0

    You may use the following

    tinymce.activeEditor.setContent("your string goes here....");

    Without $('#info') in the beginning.

    Edit

    With the latest TinyMCE versions you need to use this code: 

    tinymce.get('info').setContent("your string goes here 2....");

    Check working jsfiddle

    Login or Signup to reply.
  2. 0 
    tinymce.activeEditor.setContent("Here is some content in a string!")

    …is the proper way to set content in TinyMCE 5.x

    In your posted code you sometimes appear to be using both tinymce (correct) and tinyMCE (incorrect).

    ETA: The above is not correct, both tinymce and tinyMCE are valid. My apologies.

    Login or Signup to reply.
  3. 0

    Your question is actually two separate topics that you need to coordinate in order to get your desired outcome.

    How do I know when I can use TinyMCE API’s?

    When you first load TinyMCE you use tinymce.init({}) to initialize the editor. This is an asynchronous action and takes some time. Until the init process is completed you cannot use any of the TinyMCE APIs to interact with the editor to do things like load content.

    You appear to have your init triggered by the jQuery document.ready event. Separately you appear to make an ajax call to fetch some data from your server. If that ajax call finishes before TinyMCE is initialized your attempt to call setContent() on TinyMCE will fail as there is no editor to interact with prior to initialization completing.

    The best way to load content into the editor is to use the editor’s own "init" callback and place your code in there. For example:

    tinymce.init({
    selector: "textarea",
    plugins: [
        "lists link image anchor code media table contextmenu paste"
    ],
    toolbar: "undo redo | bold italic | link image",
    setup: function (editor) {
        editor.on('init', function () {
             editor.setContent('<p>The init function knows on which editor its called - this is for ' + editor.id + '</p>');
        });
    } 
});

    …note that the init gets called for each editor (if there are multiple) and you have access to the editor object in the function automatically (e.g. editor.setContent()).

    Here is an example of performing the load via the editor init: http://fiddle.tinymce.com/gufaab/34

    How do I use TinyMCE APIs to load content into an existing TinyMCE instance?

    If you are trying to load content into the editor as you initialize the editor the example above is the easiest solution as you automatically get access to the editor instance and can make a simple call using that editor object.

    If, however, you want to later interact with the editor you can use the tinymce.get() method. Per the get() API the string you pass to that call needs to be the ID of the editor element not a class or jQuery object reference.

    https://www.tinymce.com/docs/api/class/tinymce/#get

    So if you want to target the editor based on the ID you need something like this:

    <textarea class='tiny-mce' id='editor1'></textarea>
<textarea class='tiny-mce' id='editor2'></textarea>

    … and in your JavaScript something like this…

    tinymce.get('editor2').setContent('...content here...');

    If you only have one editor on the page you can also use

    tinymce.activeEditor.setContent('...content here...');

    …as there is only one possible "active" editor. I would recommen the get() method as it explicitly targets the editor instance based on the id of the underlying textarea.

    Note that none of this needs/requires/uses any jQuery methods or syntax. TinyMCE does not rely on jQuery for any of its APIs to work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search