Tinymce: TinyMCE or Code Sample Plugin removes tags when I want to edit blog post (article)

Created on 29 Aug 2016 · 3Comments · Source: tinymce/tinymce

I am using TinyMCE 4.4.2 with Code Sample Plugin for creating/editing blog posts. When I need to create a blog post with syntax highlighted code snippets - everything works fine. But when I want to edit some blog post that has syntax highlighted code snippets - TinyMCE or Code Sample Plugin removes HTML and other tags form the content that is inside of <pre class="language-php"><code>.

For example, first I create a new blog post with the following code snippet (by using Code Sample Plugin):

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

... and when I save this - everything is ok.

BUT when I open form for editing this blog post - code snippet looks like this:

bug

And if I view source code:

bug2

As you can see - TinyMCE or Code Sample Plugin removed tags. And no, I am NOT escaping any HTML entities with PHP when passing the data. In fact, I am using Laravel for this:

    <textarea id="body" name="body">
        {!! $post->body !!}
    </textarea>

So, in Laravel, when you are using {!! !!} - the data will not be escaped...

Source

FilipQL

Most helpful comment

Ok, if you are using Laravel, just using {!! $post->body !!} will not work well when there are syntax highlighted code snippets. This is how: {!! htmlentities($post->body) !!}

FilipQL on 30 Aug 2016

👍4

All 3 comments

By escaping do you mean encoding html entities? I think you should actually try the opposite then - encoding (escaping?) those blocks.

jayarjo on 30 Aug 2016

👍1

Ok, if you are using Laravel, just using {!! $post->body !!} will not work well when there are syntax highlighted code snippets. This is how: {!! htmlentities($post->body) !!}

FilipQL on 30 Aug 2016

👍4

You will run into other problems even if you use htmlentities.

The best bet is to call the tinymce's setContent(content) function and escape the content string.

tinymce.init({
    theme: "modern",
    schema: "html5",
    width: "100%",
    ... other stuff here ...
    setup: function(editor) {
        editor.on("init", function() {
            editor.setContent('{!! content_escaped_for_javascript_strings !!}');
        });
    }
});