在 tinymce 编辑器中加载 html 文件作为初始内容

Posted 2023-05-07

技术标签:

【中文标题】在 tinymce 编辑器中加载 html 文件作为初始内容【英文标题】：load html file as initial content in tinymce editor 【发布时间】：2016-01-06 00:37:18 【问题描述】：

我已经在我的 asp.net mvc 项目中设置了 tinymce。我想将一个 html 文件加载到位于另一个目的地的 TinyMCE 编辑器内容中。

我关注了tiny Documentation，但给我的 html 文件提供路径有点令人困惑。

tinyMCE.activeEditor.setContent('<span>some</span> html');

这是我的cshtml文件

@ 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TinyMCE Example</title>
    <!-- TinyMCE Script Reference -->
    <script src="~/scripts/tinymce/tinymce.min.js"></script>
    <!-- Script to wire up your TinyMCE editor -->
    <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'
    ],

);
        tinyMCE.activeEditor.setContent(Html);
        </script>
</head>
<body>
    <!-- This will automatically post to your Index method (that is decorated with a HttpPost attribute) -->
    @using (Html.BeginForm())
    
        @Html.AntiForgeryToken()
        <div>
            <!-- This will contain your HtmlContent and use the TinyMCE editor-->
            @Html.TextAreaFor(model => model.HtmlContent)

            <input type="submit" value="Create" />
        </div>
    
</body>
</html>

This question 也与我的问题有关，但它不包括如何为 html 文件提供路径的描述

更新 1：

我尝试使用 jquery 将 html 加载到 TinyMCE 文本区域中，它在 this question 中进行了描述

    @section Scripts 
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")


<script type="text/javascript">

    $.get("myhtml.html", function (content) 

        tinyMCE.activeEditor.setContent(content);
    );

</script>

但似乎它也不起作用

【问题讨论】：

【参考方案1】：

您不能直接给出 setContent 函数的路径。您需要做的是在后端获取 html 文件内容并将其发送到您的页面，然后使用 setContent 方法将其插入到编辑器中。

【讨论】：

有什么可以跟随我的例子吗？

以上是关于在 tinymce 编辑器中加载 html 文件作为初始内容的主要内容，如果未能解决你的问题，请参考以下文章

vue中引入Tinymce富文本编辑器

怎样在EXCEL中加载网络图片？就是像html那种，编辑的是<img src="http://..">显示出来图片

为啥在 Web 浏览器中工作的 url 没有在 UIImageview 中加载

禁用由 tinymce 插件加载的 iframe 的工具提示

如何使用 webpack 在 js 文件中加载 CDN 或外部供应商 javascript lib，而不是在 html 文件中