Vue项目引入markdown编辑器

   日期:2020-05-11     浏览:139    评论:0    
核心提示:只需要简单的几步:1.使用npm安装npm install mavon-editor --save-dev2.在main.js中导入import mavonEditor from mavon-editor; //markdown编辑器import mavon-editor/dist/css/index.css;然后Vue.use(mavonEditor);3....markdown

只需要简单的几步:
1.使用npm安装

npm install mavon-editor --save-dev

2.在main.js中导入

import mavonEditor from 'mavon-editor';     //markdown编辑器
import 'mavon-editor/dist/css/index.css';

然后

Vue.use(mavonEditor);

3.在组件中使用

<mavon-editor v-model="content" :toolbars="toolbars" @keydown="" style=""/>

data中配置markdown编辑器的功能

toolbars: {
	bold: true, // 粗体
	italic: true, // 斜体
	header: true, // 标题
    underline: true, // 下划线
    mark: true, // 标记
    superscript: true, // 上角标
    quote: true, // 引用
    ol: true, // 有序列表
    ink: true, // 链接
    imagelink: true, // 图片链接
    help: true, // 帮助
    code: true, // code
    subfield: true, // 是否需要分栏
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    
    undo: true, // 上一步
    trash: true, // 清空
    save: true, // 保存(触发events中的save事件)
    
    navigation: true // 导航目录
}

这样就可以使用了

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服