CODEWITHSUNDEEP
phplaraveltinymce
MorganFreeFarm
MorganFreeFarm

Reputation: 3733

TinyMCE doesn't style code output using codesample plugin?

I'm tried to implement tinyMCE in Laravel project, idea is to output PHP code stylized, like it looks at input. Shouldn't codesample plugin work like that or am I wrong.

TinyMCE integration:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea.tinymce-editor',
            width: "100%",
            height: "700",
            mode: "exact",
            menubar: 'file edit insert view format table tools help',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks fullscreen',
                'insertdatetime media table paste help wordcount codesample'
            ],
            toolbar: 'undo redo | formatselect |' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help codesample',
            content_css: '//www.tiny.cloud/css/codepen.min.css'
        });
    </script>

How input looks:

enter image description here

And how output looks:

enter image description here

How I print output in blade.php file:

{!! $post->description !!}

As you can see output code is not stylized like the input. Is it normal to work like this?

Upvotes: 0

Views: 1269

Answers (2)

Tiny Lincoln
Tiny Lincoln

Reputation: 1102

By default, the codesample plugin uses prism.js to embed code samples into editor content. Prism itself is included within the codesample plugin, but that only affects the content while it is in the editor itself. Therefore you should not need external JS or CSS for content to appear properly formatted in the editor.

You will need to add prism.js and prism.css to the appropriate place in your project for syntax to be highlighted in code samples on your webpage. You can generate these files on the download page at the Prism website.

For more information regarding the codesample plugin, check out the docs: https://www.tiny.cloud/docs/plugins/opensource/codesample/

Upvotes: 2

MorganFreeFarm
MorganFreeFarm

Reputation: 3733

I found solution, codesimple plugin works with prism.js When I added prism.js and prism.css files, output looks like input. They should be added before TinyMCE configuration.

Upvotes: 1

Related Questions