vue2 tinymce 没有预览功能

### Vue2 中集成 TinyMCE 并实现预览功能 在 Vue2 项目中使用 TinyMCE 富文本编辑器时，如果需要实现预览功能，可以通过以下方式完成： #### 1. 配置 TinyMCE 的 `preview` 插件 TinyMCE 官方提供了多种插件支持不同的功能需求。为了实现预览效果，可以启用官方的 `code` 或者自定义 HTML 渲染逻辑来展示内容。 以下是通过配置 `plugins` 和 `toolbar` 来激活内置工具栏中的源码查看模式[^2]： ```javascript import tinymce from 'tinymce/tinymce'; import 'tinymce/themes/silver/theme'; import 'tinymce/icons/default/icons'; import 'tinymce/plugins/code/plugin'; export default { mounted() { tinymce.init({ selector: '#myTextarea', plugins: ['code'], // 启用 code 插件用于查看HTML代码 toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | code', // 添加 source 编辑按钮 setup(editor) { editor.on('change', () => { this.content = editor.getContent(); }); } }); }, }; ``` 此方法允许用户点击工具栏上的“Source Code”按钮切换至 HTML 源码视图。 --- #### 2. 自定义独立的预览窗口 除了依赖于 TinyMCE 提供的功能外，还可以创建一个单独的区域用来实时显示当前输入的内容作为预览区。这通常涉及监听数据变化并动态更新 DOM 节点。 下面是一个简单的例子说明如何绑定两个组件之间的状态同步[^3]: ```html <template> <div class="editor-container"> <!-- 编辑器 --> <tinymce v-model="content" /> <!-- 预览框 --> <div class="preview-box" v-html="content"></div> </div> </template> <script> import Tinymce from '@/components/tinymce/index.vue'; export default { components: { Tinymce }, data() { return { content: '', }; }, }; </script> <style scoped> .preview-box { border: 1px solid #ccc; padding: 10px; margin-top: 20px; } </style> ``` 上述代码片段展示了如何利用双向绑定机制 (`v-model`) 让编辑器内的修改即时反映到下方的 `<div>` 上。 注意：由于直接插入未过滤的数据可能存在 XSS 攻击风险，在生产环境中建议先对渲染前的内容做适当清理处理后再赋值给 `innerHTML`. --- #### 3. 使用第三方库增强体验 对于更复杂的场景比如所见即所得(WYSIWYG)，可能还需要额外考虑样式保留等问题，则可借助其他开源解决方案如 [marked](https://github.com/markedjs/marked) 处理 markdown 文本转换成 html 结构再呈现出来[^4]: 安装 marked 库: ```bash npm install marked --save ``` 接着调整之前的模板部分如下所示: ```html <div class="markdown-preview">{{ parsedMarkdown }}</div> ``` 以及对应的脚本逻辑: ```javascript computed: { parsedMarkdown() { const renderer = new marked.Renderer(); return marked(this.content, { renderer }); }, }, ``` 这样不仅可以获得更好的兼容性和扩展性，而且还能进一步优化用户体验界面设计风格等方面的工作效率提升显著. --- ### 总结 综上所述，Vue2 下面针对 TinyMCE 实现预览主要有三种途径可以选择——调用自带插件、构建专属区块或者引入辅助类库共同协作达成目标。每种方案各有优劣之处需依据实际开发环境权衡取舍最终选定最适合自己的那一款策略执行下去即可成功解决问题[^1].