使用Tailwind CSS时TinyMCE编辑器预览功能无法正常工作

DevOps 小满

2026-7-9

问题描述

使用TinyMCE 5的CDN引入编辑器，相关代码如下：

CDN链接：

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

初始化脚本：

tinymce.init({
    selector: 'textarea.tinymce-editor',
    height: 300,
    menubar: false,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount', 'image'
    ],
    toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    content_css: '//www.tiny.cloud/css/codepen.min.css'
});

尝试在预览页面通过{!! $courses->body !!}（Laravel原生输出语法）展示内容，但预览功能始终无法正常显示该内容。

排查与解决方案

确认预览页面的依赖加载
若预览页面需要TinyMCE解析富文本内容，必须确保该页面也引入了TinyMCE的CDN脚本；若仅需静态展示HTML，无需加载TinyMCE，只需保证输出的HTML结构完整。
检查内容输出格式
查看页面源代码，确认{!! $courses->body !!}输出的是完整的HTML内容，而非转义后的文本（Laravel的{!! !!}会原生输出HTML，若内容仍异常，需检查存储的$courses->body是否为TinyMCE生成的有效HTML）。
修复TinyMCE自带预览功能
当前初始化代码的toolbar未包含preview按钮，导致无法触发编辑器自带的预览功能：
修改toolbar配置，添加preview选项：
```
toolbar: 'undo redo | formatselect | ' +
    'bold italic backcolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removeformat preview | help',
```
同时确保plugins中已包含preview（当前代码已满足）。
静态预览的样式适配
若为纯静态预览页面，无需加载TinyMCE编辑器，只需引入TinyMCE的内容样式文件，保证富文本格式正常显示：
```
<link rel="stylesheet" href="//www.tiny.cloud/css/codepen.min.css">
```

内容的提问来源于stack exchange，提问作者Chithira Kumar M