Question

我有以下控制器方法

    public ActionResult tinymce_editor()
    {
        return View();
    }

然后我想将一些html内容加载到TinyMCE编辑器内容

这是我要加载的html内容

<div>
   <img src='http://localhost/Content/sam.jpg' />
       <div>Image Title</div>
</div>

根据文档，我遵循了这个 setContent方法

尝试使用像这样设置内容

方法1

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools",
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

var data = "<div><img src='http://localhost/Content/sam.jpg' /><div>Image Title</div></div> html";
 tinyMCE.activeEditor.setContent(data, { format: 'raw' });

    </script>
</head>
<body>
    <h1>TinyMCE Getting Started Guide</h1>
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</body>
</html>

然后喜欢这个

（将html内容插入html文件，然后使用jquery加载 myhtml.html 文件）

方法2

<html>
<head>
    <script type="text/javascript" src="~/Scripts/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools"        
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

$.get("myhtml.html", function (content) {
    // if you have one tinyMCE box on the page:
    tinyMCE.activeEditor.setContent(content);
});

    </script>
</head>
<body>
    <h1>TinyMCE Getting Started Guide</h1>
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
</body>
</html>

但上述方法都不起作用，我该怎么做才能纠正这个

Answer 1

你必须等到tinyMCE成功加载。这样做：

<script>
        appendTinyMCE();
        function appendTinyMCE() {
            tinymce.init({
                selector: '#selector',
                init_instance_
                    callback: function () { tinyMCE.activeEditor.setContent('content'); }
            });
        };    
    </script>

将HTML内容设置为ASP.NET MVC中的TinyMCE编辑器内容

1 个答案: