在
Vue2 中
使用 tinymce-
markdown 插件将
tinymce 富文本框的内容
转换为
Markdown 格式，可以参考以下步骤：
1.
安装 tinymce 和
tinymce-
markdown 插件。
```bash
npm install
tinymce@5.8.0
tinymce-
markdown@3.0.2 --save
```
2. 在
vue 组件中
引入 tinymce 和
tinymce-
markdown 的
js 文件。
```
vue
<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 格式。
```javascript
//
使用 marked 将
Markdown 转换为 HTML
const html = marked(
markdown);
console.log(html);
```
该专栏为热销专栏榜 第81名
订阅专栏 解锁全文
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
