display tinymce into html code

Question

I have a webpage with tinymce when a save my text into database tinymce save the text like this

[size= 14pt]Big text[b]big text blod[/b][/size]

but when i wantto display my text into the html the browser does not interpret the tinymce tags and show exactly the same code

I would like tinymce to save the text with the real html tags or valid tags

So that the text looks more like this

<p><span style="font-size:14px;">Big Text<b>Big text blod<b></span></p>

i have put this code into my tinymce inti

  formats: {
        bold: {inline : 'span', 'classes' : 'bold'},}

but when i write my text tinymce does not show me the changes and the text is plain no matter what i do

my tinymce inti like this

  tinymce.init({
                height: "300",
                width : "800",
                selector: 'textarea.editable',
                plugins : ['bbcode hr lists paste textcolor media'],
                toolbar: "bold italic underline forecolor backcolor image sizeselect fontsizeselect",
                fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
                menubar: false,
                statusbar: false,
                toolbar_items_size: 'small',
                language: 'fr_FR',
                content_css: style_url,
                element_format: 'html',
                encoding: "UTF-8",
                entity_encoding : "raw",
                paste_retain_style_properties: "",
                oninit : "setPlainText",
                apply_source_formatting : true
            });

Why don't you use get HTML using plain javascript or jquery? Javascript code : var target = document.getElementById('texarea_id'); var wrap = document.createElement('div'); wrap.appendChild(target.cloneNode(true)); console.log(wrap.innerHTML); or Jquery :$('#textarea_id').html() to get the complete HTML. — Ayush
tinymce change the textarea to iframe. The only method to catch de content is tinymce.activeEditor.getContent() but is not work — john
i find the solution . bbcode plugins change selector <> to [] i remove this in it work — john

Nikunj Sardhara Nikunj Sardhara · Accepted Answer · 2017-03-16T17:51:11

There is a specific method to get html from TinyMCE

You can get HTML content from TinyMCE using below javascript

<script>
var content=tinymce.activeEditor.getContent();
console.log(content);
</script>

You can use content variable to save HTML to db or to send to server or you can add that HTML to some hidden field so that you can submit it to server side.

display tinymce into html code

3 Answers