TinyMCE 不使用 codesample 插件设置代码输出样式吗？

Question

我试图在 Laravel 项目中实现 tinyMCE，想法是输出 PHP 程式化的代码，就像它查看输入一样。 codesample 插件不应该那样工作还是我错了。

TinyMCE 集成：

<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>

输入的外观：

以及输出的样子：

我如何在 blade.php 文件中打印输出：

{!! $post->description !!}

如您所见，输出代码不像输入那样被程式化。这样工作正常吗？

Answer 1

我找到了解决方案，codesimple plugin works with prism.js 当我添加 prism.js 和 prism.css 文件时，输出看起来像输入。它们应该在 TinyMCE 配置之前添加。

Answer 2

默认情况下，codesample 插件使用 prism.js 将代码示例嵌入到编辑器内容中。 Prism 本身包含在 codesample 插件中，但这只会影响编辑器本身中的内容。因此，您不需要外部 JS 或 CSS 内容就可以在编辑器中以正确的格式显示。

您需要将 prism.js 和 prism.css 添加到项目中的适当位置，以便在网页上的代码示例中突出显示语法。您可以在 Prism 网站的下载页面上生成这些文件。

有关 codesample 插件的更多信息，请查看文档： https://www.tiny.cloud/docs/plugins/opensource/codesample/

TinyMCE 不使用 codesample 插件设置代码输出样式吗？

TinyMCE doesn't style code output using codesample plugin?

php

tinymce

laravel