tinyMCE 显示 html 标签答案

【问题标题】：tinyMCE shows html tagstinyMCE 显示 html 标签
【发布时间】：2019-02-01 08:34:29
【问题描述】：

我在我的 mvc razor 视图引擎上使用 tinyMCE 作为编辑器。当我尝试将格式化的内容附加到特定的 div 时，就会出现我的问题。它显示为 html 标签，而不是格式化的标签。

这是初始化调用：

    tinyMCE.init({
        selector: 'textarea',
        height: 500,
        theme: 'modern',
        plugins: 'print preview fullpage paste searchreplace autolink directionality bbcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount spellchecker  imagetools media  link contextmenu colorpicker textpattern help',
        toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
        image_advtab: true,
        templates: [
          { title: 'Test template 1', content: 'Test 1' },
          { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: [
          '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
          '//www.tinymce.com/css/codepen.min.css'
        ]
    });

这是 JS 脚本

function x () {
var content = tinyMCE.get('article').getContent();

            $('#bodyDiv').html(content)
}

见下面的附件

tinyMCE 中的粗体字符串：

以及本地 div 中复制的字符串：

【问题讨论】：

标签： jquery razor model-view-controller tinymce

【解决方案1】：

您似乎正在使用bbcode 插件 - 使用该插件时 TinyMCE 的输出不是 HTML，而是 BBCode 格式。如果您希望 HTML 在 DIV 中呈现，它会认为不加载 bbcode 插件以便 TinyMCE 为您提供 HTML 是有意义的。

【讨论】：

【解决方案2】：

您的问题出在这行代码中：

var content = tinyMCE.get('article').getContent();

您需要正文 html，因此您可以将前一行更改为：

var content = tinyMCE.get('article').getBody().innerHTML;

下面是固定代码和一个正在运行的fiddle

function x () {
    var content = tinyMCE.get('article').getBody().innerHTML;
    $('#bodyDiv').html(content)
}
$('button').on('click', function(e) {
    x();
})
tinyMCE.init({
    selector: 'textarea',
    height: 500,
    theme: 'modern',
    plugins: 'print preview fullpage paste searchreplace autolink directionality bbcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount spellchecker  imagetools media  link contextmenu colorpicker textpattern help',
    toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
    image_advtab: true,
    templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
    ],
    content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '//www.tinymce.com/css/codepen.min.css'
    ]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>

<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
    <textarea id="article">Hello, World!</textarea>
</form>
<button>Click Me</button>
<div id="bodyDiv"></div>

【讨论】：