最近项目需要用到markdown编辑器，使用了三种
- maven-editor (http://www.mavoneditor.com/?spm=a2c6h.12873639.article-detail.9.aaad62affAKmTV)
- vditor (https://b3log.org/vditor/demo/index.html?utm_source=ld246.com)
- tiptap (https://github.com/ueberdosis/tiptap/blob/main/docs/api/commands.md#content)
经过多次的踩坑之后
优缺点分析
- 最推荐使用的是 maven-editor
- 如果想要所见即所得的效果的话 只有vditor支持，但是vditor是不支持
==标记==x^2^
H~2~0这种的markdown语言的，有需要的可以斟酌一下 - 如果需要html内容的话 maven-editor和vditor都是可以支持的
简单用法
maven-editor
下载
npm install mavon-editor --save
引入 main.js
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
页面中使用
基础使用
<mavon-editor v-model="value"/>
自定义操作框 其中@save是点击保存按钮的时候调取的函数
<mavon-editorref="mavonEditorContinue":toolbars="toolBar"v-model="continueValue":ishljs="true"@save="saveContinue"/>const toolBar = ref({bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: false, // 中划线mark: false, // 标记superscript: false, // 上角标subscript: false, // 下角标quote: false, // 引用ol: true, // 有序列表ul: true, // 无序列表link: false, // 链接imagelink: false, // 图片链接code: true, // codetable: true, // 表格fullscreen: false, // 全屏编辑readmodel: false, // 沉浸式阅读htmlcode: false, // 展示html源码help: false, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: false, // 清空save: true, // 保存（触发events中的save事件）/* 1.4.2 */navigation: false, // 导航目录/* 2.1.8 */alignleft: false, // 左对齐aligncenter: false, // 居中alignright: false, // 右对齐/* 2.2.1 */subfield: false, // 单双栏模式preview: false // 预览
})
如果想获得html的内容怎么办
<mavon-editorref="mavonEditorRef"v-model="testContent"
/>
const mavonEditorRef = ref()
mavonEditorRef.value.d_render
vditor
下载
npm i vditor --save
引入
import Vditor from 'vditor'
import 'vditor/dist/index.css'
使用
<div id="vditor"></div>
这里cdn注意一下 他的不是很稳定 建议将他的包下载到本地 否则很容易出现白屏
vditor.value = new Vditor('vditor', {cdn: window.location.origin + '/cdn',mode: 'sv',minHeight: 200,// 工具栏toolbar: ['headings','table','bold','code','|','ordered-list','list','|','insert-before','insert-after','|','undo','redo','|',{name: '保存',tip: '保存',icon: '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700206010742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4033" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="4034"></path></svg>',click() {markedResStr.value[ele] = vditor.value.getValue()vditorShow.value = falsevditor.value?.destroy()// document.getElementById('vditor').innerHTML = ''}}],// 计数counter: { enable: true, type: 'text' },after: () => {if (content) {vditor.value.setValue(content)} else {vditor.value.setValue('')}}})
V2.0.0.3)
