本文介绍: 最近项目需要用到markdown编辑器,使用了三种经过多次的踩坑之后。
最近项目需要用到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-editor
ref="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, // code
table: 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-editor
ref="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 = false
vditor.value?.destroy()
// document.getElementById('vditor').innerHTML = ''
}
}
],
// 计数
counter: { enable: true, type: 'text' },
after: () => {
if (content) {
vditor.value.setValue(content)
} else {
vditor.value.setValue('')
}
}
})
原文地址:https://blog.csdn.net/qq_41867900/article/details/135996479
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_65573.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。