vue-markdown编辑器

最新推荐文章于 2023-06-19 01:45:10 发布

weixin_33989780

最新推荐文章于 2023-06-19 01:45:10 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

文章标签： javascript markdown ViewUI

原文链接：https://juejin.im/post/5b7e699d51882542c76378bb

一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。

编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，也可进行二次开发。

效果

npm i -S vue-meditor

或

直接复制对应的组件到项目目录内 （推荐）
复制代码

import MarkDown from 'vue-meditor'

...
components:{
    MarkDown
}
...

<template>
    <mark-down/>
</template>
复制代码

名称	类型	说明	默认值
initialValue	String	编辑器初始化内容
width	Number	编辑器宽度
height	Number	编辑器高度，单位 px	600
theme	String	代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub	Light
autoSave	Boolean	是否自动保存	true
interval	Number	自动保存频率，单位毫秒	10000
toolbars	Object	工具栏配置，具体功能详见工具栏功能配置表
exportFileName	String	导出文件的名称	未命名文件

名称	说明
on-save	自动保存或者手动保存时触发，返回当前编辑器内原始输入内容和转以后的内容
on-paste-image	粘贴图片，返回当前粘贴的file文件

关于保存时返回值

    value // 编辑器输入的原始内容
    html // 右侧现实的问转义后的内容
    theme // 保存时的主题名字
复制代码

标题配置

支持配置编辑器名称，提供了name=title的slot插槽
复制代码

工具栏配置

// 例：
const config = {
    print:false // 隐藏掉打印功能
}
<MarkDown :toolbars="config"/>
复制代码

优化代码体积

项目中为了达到代码高亮显示，需要用到highlight.js,
由于highlight.js体积过于庞大，项目中按需加载了部分常用的程序语言，
可根据需求自行配置，配置目录位于/markdown/js/hljs内
复制代码

v1.2.0

v0.9.3

v0.8.0

v0.7.0