代码之家 › 专栏 › 技术社区 › Rzj Hayabusa

使用ajax将值设置为textarea TinyMCE

textarea tinymce laravel ajax jquery

Rzj Hayabusa · 技术社区 · 5 年前

我有这些使用ajax从数据库获取数据的代码。到目前为止,如果输入不连续(如普通文本区域、输入或下拉列表),数据可以显示为模式。

<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代码。

刀片.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文本区域?

如果有人能帮忙,我很感激。谢谢。

0 回复 | 直到 5 年前

Foued MOUSSI 5 年前

您可以使用以下命令

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

$('#info') 一开始。

编辑

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

检查工作 jsfiddle

Tiny Lincoln 5 年前

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

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

~~在你发布的代码中,你有时会同时使用 tinymce (正确)和 tinyMCE (不正确)。~~

不 廷姆斯 廷姆斯 是有效的。我很抱歉。

Michael Fromin 5 年前

你的问题是 两个独立的主题 你需要协调才能得到你想要的结果。

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

tinymce.init({}) 初始化编辑器。这是一个 异步的 采取行动,需要一些时间。直到 init 进程已完成您不能使用任何tinymceapi与编辑器交互来执行加载内容等操作。

你似乎有 初始 由jQuery触发 document.ready 事件。另外,您似乎要进行ajax调用以从服务器获取一些数据。如果在初始化TinyMCE之前ajax调用完成,则尝试调用 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>');
        });
    } 
});

…请注意为每个编辑器调用(如果有多个编辑器),并且您可以自动访问函数中的编辑器对象(例如。 editor.setContent()

下面是通过editor init执行加载的示例: http://fiddle.tinymce.com/gufaab/34

如何使用tinymceapi将内容加载到现有TinyMCE实例中?

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

但是,如果您希望以后与编辑器交互,则可以使用 tinymce.get() 方法。根据 get() 一串 身份证件 不是类或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...');

…因为只有一个可能的“活动”编辑器。我会推荐方法,因为它基于底层的id显式地以编辑器实例为目标 textarea .

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