使用 ajax 将值设置为 textarea TinyMCE答案

【问题标题】：Set value to textarea TinyMCE using ajax使用 ajax 将值设置为 textarea TinyMCE
【发布时间】：2020-06-09 21:41:29
【问题描述】：

我有这些代码使用 ajax 从数据库中获取数据。到目前为止，如果输入不是tinyMCE（例如普通的textarea，input或dropdown），则数据可以显示为模态。

<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 文本区域。没有一个选项对我有用。这是我的 Blade.php 代码。

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>

我错过了什么？如何将值发送到 tinyMCE textarea ？

感谢有人可以提供帮助。谢谢。

【问题讨论】：

stackoverflow.com/a/11793478/10634638

标签： jquery ajax laravel tinymce textarea

【解决方案1】：

你可以使用以下

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

开头没有$('#info')。

编辑

使用最新的 TinyMCE 版本，您需要使用此代码：

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

检查工作jsfiddle

【讨论】：

【解决方案2】：

tinymce.activeEditor.setContent("Here is some content in a string!")

...是在 TinyMCE 5.x 中设置内容的正确方法

~~在您发布的代码中，您有时似乎同时使用了tinymce（正确）和tinyMCE（错误）。~~

ETA：以上内容不正确，tinymce 和 tinyMCE 均有效。我很抱歉。

【讨论】：

【解决方案3】：

您的问题实际上是两个独立的主题，您需要协调这些主题才能获得您想要的结果。

我如何知道何时可以使用 TinyMCE API？

当你第一次加载 TinyMCE 时，你使用tinymce.init({}) 来初始化编辑器。这是一个异步操作，需要一些时间。在init 进程完成之前，您无法使用任何 TinyMCE API 与编辑器进行交互以执行加载内容等操作。

您的 init 似乎由 jQuery document.ready 事件触发。另外，您似乎进行了 ajax 调用以从您的服务器获取一些数据。如果该 ajax 调用在 TinyMCE 初始化之前完成，您在 TinyMCE 上调用 setContent() 的尝试将失败，因为在初始化完成之前没有编辑器可以与之交互。

将内容加载到编辑器中的最佳方式是使用编辑器自己的“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()）。

以下是通过编辑器初始化执行加载的示例：http://fiddle.tinymce.com/gufaab/34

如何使用 TinyMCE API 将内容加载到现有的 TinyMCE 实例中？

如果您在初始化编辑器时尝试将内容加载到编辑器中，上述示例是最简单的解决方案，因为您可以自动访问编辑器实例，并且可以使用该 editor 对象进行简单调用。

但是，如果您想稍后与编辑器交互，您可以使用tinymce.get() 方法。根据get() API，您传递给该调用的 string 必须是编辑器元素的 ID 而不是类或 jQuery 对象引用.

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

所以如果你想根据 ID 定位编辑器，你需要这样的东西：

<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 的 id 显式定位编辑器实例。

请注意，这些都不需要/不需要/使用任何 jQuery 方法或语法。 TinyMCE 的任何 API 都不依赖 jQuery。

【讨论】：