Установите значение textarea TinyMCE, используя ajax - PullRequest
Новая
       9

Установите значение textarea TinyMCE, используя ajax

0 голосов
/ 26 февраля 2020

У меня есть этот код, который извлекает данные из базы данных, используя ajax. До сих пор данные могут отображаться в модальном режиме, если вход не является крошечным MCE, таким как обычная текстовая область, ввод или выпадающий список.

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>

Однако, значение не может быть отправлено в мое текстовое поле TinyMCE внутри модального поля. Ни один из вариантов не работает для меня. Вот мой клинок. php код.

клинок. 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>

Чего мне не хватает? Как отправить значение в текстовое поле tinyMCE?

Благодарим вас за помощь. Спасибо.

Ответы [ 3 ]

0 голосов
/ 27 февраля 2020 
tinymce.activeEditor.setContent("Here is some content in a string!")

... - это правильный способ установки содержимого в TinyMCE 5.x

. В опубликованном вами коде вы иногда используете tinymce (правильный) и * 1006. * (неверно).

ETA: Выше не правильно, оба значения tinymce и tinyMCE действительны. Мои извинения.

0 голосов
/ 28 февраля 2020

Ваш вопрос на самом деле две отдельные темы , которые необходимо согласовать, чтобы получить желаемый результат.

Как узнать, когда я могу использовать API TinyMCE?

Когда вы впервые загружаете TinyMCE, вы используете tinymce.init({}) для инициализации редактора. Это асинхронное действие и занимает некоторое время. Пока процесс init не завершен, вы не можете использовать API-интерфейсы TinyMCE для взаимодействия с редактором для выполнения таких операций, как загрузка содержимого.

Похоже, что ваш init вызван jQuery document.ready событие. Отдельно вы, кажется, делаете ajax вызов для получения некоторых данных с вашего сервера. Если этот вызов ajax завершится до инициализации TinyMCE, ваша попытка вызвать setContent() в TinyMCE не удастся, так как нет редактора, с которым можно взаимодействовать до завершения инициализации.

Лучший способ загрузить контент в редактор - использовать собственный обратный вызов редактора init и поместить туда свой код. Например: 

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>');
        });
    } 
});

... обратите внимание, что init вызывается для каждого редактора (если их несколько), и у вас есть доступ к объекту редактора в функции автоматически (например, editor.setContent()) .

Вот пример выполнения загрузки через редактор init: http://fiddle.tinymce.com/gufaab/34

Как использовать API TinyMCE для загрузки контента в существующий Экземпляр TinyMCE?

Если вы пытаетесь загрузить контент в редактор во время инициализации редактора, приведенный выше пример является самым простым решением, поскольку вы автоматически получаете доступ к экземпляру редактора и можете сделать простой вызов, используя этот * 1034. * object.

Если, однако, вы хотите позже взаимодействовать с редактором, вы можете использовать метод tinymce.get(). Согласно API get() строка , которую вы передаете этому вызову, должна быть ID элемента редактора, а не ссылкой на класс или jQuery объекта.

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

Поэтому, если вы хотите настроить таргетинг на редактор по идентификатору, вам нужно что-то вроде этого: 

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

.. и в вашем JavaScript как-то так ... 

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

Если у вас есть только один редактор на странице, вы также можете использовать 

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

... как есть только один возможный «активный» редактор. Я бы порекомендовал метод get(), так как он явно нацелен на экземпляр редактора на основе идентификатора базового textarea.

Обратите внимание, что ни для чего из этого не требуется / не требуется / не используется никаких методов или синтаксиса jQuery. TinyMCE не полагается на jQuery для работы любого из своих API.

0 голосов
/ 26 февраля 2020

Вы можете использовать следующие 

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

Без $('#info') в начале.

Редактировать

С последними версиями TinyMCE вы нужно использовать этот код: 

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

Проверка работоспособности jsfiddle

...