通过 jQuery Ajax 动态加载内容到 TinyMce

Question

我正在尝试从我的数据库中的记录加载内容，数据库确实 return 正确的值；问题是用上述值填充 TinyMce。

HTML:

        <textarea cols="20" class="tiny modal-body-content">
        </textarea>

Ajax (jQuery)

        $.ajax({
            type: "POST",
            url: '/WebServices/masterData.asmx/ShowBio',
            data: t,
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError,
            timeout: 15000
        });

        function OnSuccess(data, status) {
            if (data.d != "false") {
                tinymce.init({
                    selector: "tiny",
                    setup: function (editor) {
                        editor.on('init', function () {
                            editor.setContent(data.d);
                        })
                    }
                })
            }

我还尝试将 HTML 填充到 TinyMce 使用以下方法生成的 ID 中：

$(".mce-edit-area").html(data.d);

虽然这确实将 HTML 放入了 TinyMce 编辑器中，但它不可编辑，而且很明显是一个巨大的障碍。

有人知道我做错了什么吗？

Answer 1

这有效：

        function OnSuccess(data, status) {
            if (data.d != "false") {
                $(".tiny").html(data.d);
                tinyMCE.activeEditor.setContent(data.d);
            }
        };

Answer 2

这将准确地在当前鼠标位置添加内容（tag/element/text 或其他..）：

tinymce.activeEditor.execCommand(
 'mceInsertContent',
  false, 
  '<span style="text-decoration : underline">an Appended Content !</span>');

虽然这会直接将内容注入 TinyMce 编辑器（擦除之前的内容）

 tinymce.activeEditor.setContent("<p>I will replace the original content</p>", {
                            format: 'raw'
                        });

这里是 AJax 的简单示例：

$.ajax({
                url: '/Documents/ajaxGetDocumentById/2',
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function (document) {
                    $("#form-edit").attr(
                        'action',
                        '/Documents/EditExistingDocument/2'
                    );
                    $("#input-document-title").val(document.title);
                    tinymce.activeEditor.setContent(document.CustomHtmlContent, {
                        format: 'raw'
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Erreur de requéte Ajax ....');
                }
            });

通过 jQuery Ajax 动态加载内容到 TinyMce

Dynamically loading content into TinyMce through jQuery Ajax

ajax

jquery

tinymce