在tinymce编辑器中加载html文件作为初始内容 [英] load html file as initial content in tinymce editor

查看:84
本文介绍了在tinymce编辑器中加载html文件作为初始内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我遵循了 tiny Documentation 但它给我的 html 文件提供路径有点令人困惑.

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

这是我的 cshtml 文件

@{ }<!DOCTYPE html><头><meta name="viewport" content="width=device-width"/><title>TinyMCE 示例</title><!-- TinyMCE 脚本参考--><script src="~/scripts/tinymce/tinymce.min.js"></script><!-- 连接 TinyMCE 编辑器的脚本 --><script type="text/javascript" src="~/Scripts/tinymce/tinymce.min.js"></script><script type="text/javascript">tinymce.init({选择器:文本区域",主题:现代",插件: ["advlist 自动链接列表链接图像charmap 打印预览hr 锚分页符","searchreplace wordcount visualblocks visualchars code fullscreen",插入日期时间媒体不间断保存表上下文菜单方向性","表情模板粘贴 textcolor colorpicker textpattern imagetools"],工具栏1:插入文件撤消重做| 样式选择| 粗斜体| alignleft aligncenter alignright alignjustify | Bullist numlist 缩进| 链接图像",工具栏2:打印预览媒体|前色背景图释",image_advtab: 真,模板: [{title: '测试模板 1', 内容: '测试 1'},{标题:'测试模板 2',内容:'测试 2'}],});tinyMCE.activeEditor.setContent(Html);<身体><!-- 这将自动发布到您的 Index 方法(用 HttpPost 属性装饰)-->@using (Html.BeginForm()){@Html.AntiForgeryToken()<div><!-- 这将包含您的 HtmlContent 并使用 TinyMCE 编辑器-->@Html.TextAreaFor(model => model.HtmlContent)<输入类型=提交"值=创建"/>

}</html>

这个问题也与我的问题有关,但不包括说明如何给html文件一个路径

更新 1:

我尝试使用 jquery 将 html 加载到 TinyMCE 文本区域中,其描述在 这个问题

 @section 脚本 {@Scripts.Render("~/bundles/jqueryval")@Scripts.Render("~/bundles/jqueryui")<script type="text/javascript">$.get("myhtml.html", function (content) {tinyMCE.activeEditor.setContent(content);});}

但似乎它也不起作用

解决方案

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

I have set up tinymce in my asp.net mvc project. I want to load a html file into TinyMCE editor content, which is located at another destination.

I followed the tiny Documentation but it is a bit confusing to give a path to my html file.

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

this is my cshtml file

@{ }
<!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 also relates to my question but it doesn't include a description of how to give the html file a path

UPDATE 1:

I tried to load html using jquery into a TinyMCE textarea, its described in 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>
}

but seems like its also not working

解决方案

You cannot give a path to the setContent function directly. What you need to do is to get the html file contents backendside and send it to your page where you insert it into your editor using the setContent method.

这篇关于在tinymce编辑器中加载html文件作为初始内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆