vue-markdown编辑器

本文转载于:猿2048网站▷https://www.mk2048.com/blog/blog.php?id=h0jbc1kh0j

在线示例地址

GitHub : https://github.com/coinsuper/vue-markdown

更新日志

v0.7.0

1. 修复主题无法更新的问题
2. 修复文档初始化值无法动态切换的问题

v0.8.0

1. 新增md文件导出和读取功能
2. 修改预览部分样式
3. 修改头部菜单样式

1.简介

一款使用marked和highlight.js开发的一款markdown编辑器，目前只支持在vue项目中使用。 编辑器涵盖了常用的markdown编辑器功能，工具栏可自定义配置，也可进行二次开发。

效果

2.安装

npm i -S vue-meditor

3.在项目中使用

import MarkDown from 'vue-meditor'

...
components:{
    MarkDown
}
...

<template>
    <mark-down/>
</template>

4.props

名称	类型	说明	默认值
title	String	编辑器标题，默认为空，不显示
titleStyle	Object	标题样式，如果自定义标题时可自行编写样式
initialValue	String	编辑器初始化内容
width	Number	编辑器宽度
height	Number	编辑器高度，单位 px	600
theme	String	代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub	Light
autoSave	Boolean	是否自动保存	true
interval	Number	自动保存频率，单位毫秒	10000
toolbars	Object	工具栏配置，具体功能详见工具栏功能配置表
mode	Number	初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑

5.events

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

6.工具栏配置

名称	说明	默认显示
strong	粗体	是
italic	斜体	是
overline	删除线	是
h1	标题1	是
h2	标题2	是
h3	标题3	是
h4	标题4	否
h5	标题5	否
h6	标题6	否
hr	分割线	是
quote	引用	是
ul	无序列表	是
ol	有序列表	是
code	代码块	是
link	链接	是
image	image	是
table	表格	是
checked	已完成列表	是
notChecked	未完成列表	是
shift	预览	是
print	打印	否
theme	主题切换	是
fullscreen	全屏	是
exportmd	导出为*.md文件	是
importmd	导入本地*.md文件	是

7.其他说明

关于保存时返回值

    markdownValue // 编辑器输入的原始内容
    htmlValue // 右侧现实的问转义后的内容
    theme // 保存时的主题名字

工具栏配置

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

关于二次开发

原始文件在src/markdown下，可在其基础上自定义开发，也可将markdown文件夹

复制到新项目中，安装对应依赖 highlight.js和marked即可

关于二次开发后打包

// 修改webpack.config.js

  entry: './src/main.js', // main.js改为index.js
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js', // 输出文件名改为index.js或其他
    libraryTarget: 'umd',
    library: 'markdown-vue',
    umdNamedDefine: true
  },

更多专业前端知识，请上【猿2048】www.mk2048.com

来源：https://www.cnblogs.com/qianduanwriter/p/11776418.html