vue2中tinymce-markdown 插件怎么把 tinymce 富文本框的内容转换为markdown

在 Vue2 中使用 tinymce-markdown 插件将 tinymce 富文本框的内容转换为 Markdown 格式，可以参考以下步骤：

1. 安装 tinymce 和 tinymce-markdown 插件。

   npm install tinymce@5.8.0 tinymce-markdown@3.0.2 --save

2. 在 vue 组件中引入 tinymce 和 tinymce-markdown 的 js 文件。

   <template>
     <div>
       <textarea ref="editor"></textarea>
     </div>
   </template>

   <script>
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
   import 'tinymce/plugins/code';
   import 'tinymce/plugins/link';
   import 'tinymce/plugins/paste';
   import 'tinymce/plugins/table';
   import 'tinymce/plugins/lists';
   import 'tinymce/plugins/imagetools';
   import 'tinymce/plugins/media';
   import 'tinymce/plugins/advlist';
   import 'tinymce/plugins/autosave';
   import 'tinymce/plugins/searchreplace';
   import 'tinymce/plugins/wordcount';
   import 'tinymce/plugins/hr';
   import 'tinymce/plugins/anchor';
   import 'tinymce/plugins/pagebreak';
   import 'tinymce/plugins/nonbreaking';
   import 'tinymce/plugins/fullscreen';
   import 'tinymce/plugins/help';
   import 'tinymce/plugins/preview';
   import 'tinymce/plugins/print';
   import 'tinymce/plugins/quickbars';
   import 'tinymce/plugins/insertdatetime';
   import 'tinymce/plugins/fullpage';
   import 'tinymce/plugins/importcss';
   import 'tinymce/plugins/colorpicker';
   import 'tinymce/plugins/textcolor';
   import 'tinymce/plugins/colorpicker';
   import 'tinymce/plugins/directionality';
   import 'tinymce/plugins/emoticons';
   import 'tinymce/plugins/emoticons/js/emojis';
   import 'tinymce/plugins/charmap';
   import 'tinymce/plugins/visualblocks';
   import 'tinymce/plugins/visualchars';
   import 'tinymce/plugins/template';
   import 'tinymce/plugins/toc';
   import 'tinymce/plugins/imagetools';
   import 'tinymce/plugins/help';
   import 'tinymce/plugins/codesample';
   import 'tinymce/plugins/autosave';
   import 'tinymce/plugins/contextmenu';
   import 'tinymce/plugins/autoresize';
   import 'tinymce/plugins/wordcount';
   import 'tinymce/plugins/lists';
   import 'tinymce/plugins/table';
   import 'tinymce/plugins/preview';
   import 'tinymce/plugins/searchreplace';
   import 'tinymce/plugins/advlist';

   import 'tinymce/skins/ui/oxide/skin.min.css';
   import 'tinymce/skins/content/default/content.min.css';

   import 'tinymce/icons/default/icons.min';

   import 'tinymce/plugins/markdown';
   import 'tinymce-markdown/dist/tinymce-markdown.min';

   export default {
     mounted() {
       this.initEditor();
     },
     methods: {
       initEditor() {
         tinymce.init({
           selector: this.$refs.editor,
           height: 400,
           plugins: 'code link paste table lists imagetools media advlist autosave searchreplace wordcount hr anchor pagebreak nonbreaking fullscreen help preview print quickbars insertdatetime fullpage importcss colorpicker textcolor directionality emoticons charmap visualblocks visualchars template toc codesample autosave contextmenu autoresize markdown',
           toolbar:
             'undo redo | bold italic underline strikethrough | link | alignleft aligncenter alignright alignjustify | table | bullist numlist outdent indent | formatselect fontselect fontsizeselect | fullscreen | code | emoticons | preview',
           setup: (editor) => {
             editor.on('init', () => {
               // 将 tinymce 编辑器中的内容转换为 markdown 格式
               const content = editor.getContent();
               const markdown = editor.plugins.markdown.parse(content);
               console.log(markdown);
             });
           },
         });
       },
     },
   };

在组件中引入了 tinymce 和 tinymce-markdown 插件，以及一些常用的 tinymce 插件和样式。在初始化代码中，我们启用了 markdown 插件，并添加了一个名为 markdown 的按钮到编辑器的工具栏中。在 `setup` 回调函数中，我们监听了编辑器的 `init` 事件，并在事件回调函数中调用了 `editor.plugins.markdown.parse(content)` 方法，将编辑器中的内容转换为 Markdown 格式，并输出到控制台中。

3. 使用转换后的 Markdown 格式进行后续操作。

在转换后，你可以使用转换后的 Markdown 格式进行后续操作，例如将它保存到数据库中，或者将它在网页中渲染为 HTML 格式。可以使用一些流行的 Markdown 渲染库，例如 marked 或 markdown-it 来将 Markdown 转换为 HTML 格式。

   // 使用 marked 将 Markdown 转换为 HTML
   const html = marked(markdown);
   console.log(html);