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

Question

[作为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 />'); }) },

    })
});
;

我被卡住了，为什么它在示例页面上起作用，而当我设置内容时同样不起作用。谁能帮助我解决问题所在？任何帮助将不胜感激。谢谢。

Answer 1

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

错误在这里

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

替换单引号，模板文字为

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

现在工作正常。