tinymce/tinymce-vue 如何启用插件

### 配置 TinyMCE Vue 插件以支持标题排版、代码块（Python 和 JSON）、公式编辑器 以下是关于如何在 `tinymce-vue` 中启用插件以支持标题排版、代码块（Python 和 JSON）以及公式的详细配置教程。 #### 1. 标题排版 TinyMCE 提供了对多种标题格式的支持，用户可以通过工具栏中的下拉菜单选择所需的标题样式。在 `tinymce-vue` 中，可以通过配置工具栏选项来自定义显示的标题级别[^2]。以下是一个示例配置： ```javascript const editorConfig = { toolbar: 'h1 h2 h3 h4 h5 h6', }; ``` #### 2. 代码块（Python 和 JSON） TinyMCE 提供了对代码块的支持，允许用户插入和格式化代码片段。通过启用 `code` 插件，用户可以插入代码块并选择语言类型（包括 Python 和 JSON）。此外，还可以结合第三方库（如 Prism.js 或 Highlight.js）实现语法高亮[^2]。以下是一个示例配置： ```javascript import tinymce from 'tinymce'; import 'tinymce/plugins/code'; const editorConfig = { plugins: 'code', toolbar: 'code', codesample_languages: [ { text: 'Python', value: 'python' }, { text: 'JSON', value: 'json' } ] }; ``` #### 3. 公式编辑器 TinyMCE 支持数学公式的插入和编辑，这主要依赖于其内置的 `equation` 插件或与 MathJax 的集成[^2]。启用该功能后，用户可以通过图形界面输入 LaTeX 格式的数学公式，并实时预览效果。以下是一个配置示例： ```javascript import tinymce from 'tinymce'; import 'tinymce/plugins/equation'; const editorConfig = { plugins: 'equation', toolbar: 'equation' }; ``` #### 4. 综合配置示例 以下是一个综合配置示例，展示了如何同时启用标题排版、代码块（Python 和 JSON）以及公式编辑器的功能： ```javascript import tinymce from 'tinymce'; import 'tinymce/plugins/code'; import 'tinymce/plugins/equation'; const editorConfig = { plugins: 'code equation', toolbar: 'h1 h2 h3 h4 h5 h6 | code equation', codesample_languages: [ { text: 'Python', value: 'python' }, { text: 'JSON', value: 'json' } ] }; ``` ### 注意事项 - 确保已正确安装所需的插件和依赖项。 - 如果需要语法高亮功能，建议引入第三方库（如 Prism.js 或 Highlight.js）。 - 在生产环境中，建议优化资源加载以提高性能[^4]。