vue使用markdown编辑器

时间: 2019-08-27阅读: 458标签: markdown

使用步骤


1。安装mavon-editor

npm install mavon-editor -S


2。引入组件,样式以及调用组件

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    
comoponents: {
    mavonEditor
}
    
<mavon-editor v-model="value"></mavon-editor>


3。前台展示markdowm文本内容:

后台录入markdown语法后,获取文章,此时数据是markdown语法格式。在前台展示需要利用marked插件和highlight.js处理

npm install marked -S

import marked from 'marked'
var markdowncontent = "console.log('hello.word')"
this.content = marked(获取的markdown数据内容)


4。代码高亮

npm install highlight.js

import hljs from 'highlight.js'
import 'highlight.js/styles/default.css';  //封装成一个指令

vue.directive('highlight', (el) => {
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => { 
        hljs.highlightBlock(block) 
    }) 
})

<div v-highlight  v-html\="content"\></div>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7800

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广