tinymce-markdown 插件怎么把 tinymce 富文本框的内容转换为markdown
时间: 2023-08-07 14:13:29 浏览: 355
tinymce 富文本组件
使用 tinymce-markdown 插件将 tinymce 富文本框的内容转换为 Markdown 格式,需要以下步骤:
1. 引入 tinymce 和 tinymce-markdown 插件的 js 文件。
```html
<script src="https://cdn.tiny.cloud/1/myscript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce-markdown@3.0.2/dist/tinymce-markdown.min.js"></script>
```
2. 初始化 tinymce 编辑器,并启用 tinymce-markdown 插件。
```javascript
tinymce.init({
selector: 'textarea',
plugins: 'markdown',
toolbar: 'undo redo | bold italic | markdown',
height: 500,
setup: function (editor) {
editor.on('init', function () {
// 将 tinymce 编辑器中的内容转换为 markdown 格式
var content = editor.getContent();
var markdown = editor.plugins.markdown.parse(content);
console.log(markdown);
});
}
});
```
在初始化代码中,我们启用了 markdown 插件,并添加了一个名为 markdown 的按钮到编辑器的工具栏中。在 `setup` 回调函数中,我们监听了编辑器的 `init` 事件,并在事件回调函数中调用了 `editor.plugins.markdown.parse(content)` 方法,将编辑器中的内容转换为 Markdown 格式,并输出到控制台中。
3. 使用转换后的 Markdown 格式进行后续操作。
在转换后,你可以使用转换后的 Markdown 格式进行后续操作,例如将它保存到数据库中,或者将它在网页中渲染为 HTML 格式。可以使用一些流行的 Markdown 渲染库,例如 marked 或 markdown-it 来将 Markdown 转换为 HTML 格式。
```javascript
// 使用 marked 将 Markdown 转换为 HTML
var html = marked(markdown);
console.log(html);
```
阅读全文