tinyMCE показывает HTML-теги

Question

Я использую tinyMCE в качестве редактора на моем движке просмотра бритвы mvc.Моя проблема возникает, когда я пытаюсь добавить форматированный контент к конкретному div.Он отображается как HTML-теги вместо отформатированного.

Это вызов init:

    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:

Answer 1

Вы, похоже, используете плагин bbcode - вывод от TinyMCE при использовании этого плагина не HTML, а скорее форматирование BBCode.Если вы хотите, чтобы HTML отображался в DIV, было бы целесообразно не загружать плагин bbcode, чтобы TinyMCE предоставил вам HTML.

Answer 2

Ваша проблема в этой строке кода:

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

Вам нужен html тела, и вы можете изменить предыдущую строку с помощью:

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

В следующих исправленныхкод и бегущая скрипка

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>