使用ASP .NET MVC中的数据库内容初始化TinyMCE

时间:2020-06-11 11:49:47

标签: asp.net-mvc tinymce-4

作为Salam o Alikum,我正在开发.NET MVC Web应用程序,其中我集成了TinyMCE编辑器来发布内容,我将html正确保存在数据库中,而且我可以在页面上正确呈现返回的HTML,但是当我将tinyMCE编辑器的内容设置为不再初始化,并在控制台中引发错误。

SyntaxError:''字符串文字包含未转义的换行符

在此行

init_instance_callback: function () { tinyMCE.activeEditor.setContent('@Html.Raw(HttpUtility.HtmlDecode(_2TheTable.Models.Post.dsc))') },

在这里效果很好。

<div class="profile-edit-container fl-wrap block_box">
    @Html.Raw(HttpUtility.HtmlDecode(_2TheTable.Models.Post.dsc))
    @Html.Raw(_2TheTable.Models.Post.dsc)
</div>

这表示 _2TheTable.Models.Post.dsc 中的HTML是正确的。

这是我用内容初始化tinyMCE编辑器的方式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>

<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
jQuery(document).ready(function () {

    tinymce.init({
        // General options
        selector: 'textarea',
        theme: "modern",
        // Theme options
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,

        // Example content CSS (should be your site CSS)
        content_css: "~/css/style.css",
        init_instance_callback: function () { tinyMCE.activeEditor.setContent('@Html.Raw(HttpUtility.HtmlDecode(_2TheTable.Models.Post.dsc))') },
        setup: function (editor) { editor.on('BeforeSetContent', function (contentEvent) { contentEvent.content = contentEvent.content.replace(/\r\n?\r?\n/g, '<br />'); }) },

    })
});
;

我被卡住了,为什么它在示例页面上起作用,而在设置内容时同样不起作用。 谁能帮助我,问题出在哪里?任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:0)

我想知道我做得还不错,但仍然无法正常工作吗?我尝试查找未转义的字符串以及如何对其进行转义,而不是发现单引号括起来,但是当我看到控制台错误仍然存​​在,然后我注意到一件事,我的HTML是多行,单引号不适用于多行字符串,然后我搜索并找到了一种通过使用模板文字来转义多行字符串的方法用反引号分隔。

错误在这里

tinyMCE.activeEditor.setContent('@Html.Raw(HttpUtility.HtmlDecode(_2TheTable.Models.Post.dsc))')

用模板文字替换为

的单引号
tinyMCE.activeEditor.setContent(`@Html.Raw(HttpUtility.HtmlDecode(_2TheTable.Models.Post.dsc))`)

现在工作正常。