TinyMCE是一款富文本编辑器,它默认不支持Markdown语法。要让TinyMCE编辑器支持Markdown语法,需要集成一个Markdown插件。常用的Markdown插件有两款:Marked和Pandoc。其中,Marked是一款轻量级的Markdown解析器,可以很方便地集成到TinyMCE编辑器中;而Pandoc支持更多的Markdown语法,并且可以将Markdown转换成多种格式,集成到TinyMCE编辑器中需要进行相应的配置。
这里以Marked为例,介绍如何让TinyMCE编辑器支持Markdown语法。首先,需要在TinyMCE编辑器中引入Marked插件。具体步骤为:
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
tinymce.init({
selector: 'textarea',
plugins: 'marked',
toolbar: 'marked',
setup: function (editor) {
editor.on('init', function(){
editor.getDoc().vendorCode += `
function toggleMarked() {
var cm = this.codemirror;
var data = cm.getValue();
var marked = window.marked(data);
cm.setValue(marked);
}
`;
});
},
toolbar_sticky: true,
});
以上就是让TinyMCE编辑器支持Markdown语法的基本步骤。当用户输入Markdown格式的文本时,可以使用编辑器提供的"Toggle marked"按钮,将Markdown格式的文本转换为HTML格式的文本。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云