tinyMCE shows html tags

Question

I'm using tinyMCE as editor on my mvc razor view engine. My issue happens when I try to append the formatted content to specific div. It's shown as html tags instead of the formatted one.

This is the init call:

    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'
        ]
    });

and this is the JS script

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

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

see attached file below

A bold string in tinyMCE:

And the copied string in local div:

gaetanoM gaetanoM · Accepted Answer · 2018-08-26T18:37:29

Your issue is in this line of code:

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

You need the body html and so you can change the previous line with:

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

In the following the fixed code and a running 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>

tinyMCE shows html tags

2 Answers