markdown html vue,Vue中使用markdown

最近一直在做node+vue+mysql的博客项目,想用mardown编辑器,找了很多方法,最后总结出以下几点:

刚开始还想用最笨拙的方式,从数据库取出数据后给添加上p标签就算了,但还是太单薄了

给后台取出的数据添加p标签,记录一下,免得以后用到会忘

this.articleDetail.context = (isNaN(this.articleDetail.context)) ? this.articleDetail.context.replace(/^/gm, '

').replace(/$/gm, '

') : null;

1) 使用marked解析markdown文字

这个就只是解析markdown文字,并不能编辑,倒是可以从数据库中读取markdown文字进行解析,另外代码高亮还要另外解析,用highlight.js

cnpm install marked

data(){

return {

articleDetail: [],//数据,可以从数据库中读取

}

}

computed:{

compiledMarkdown () {

//this.articleDetail.context数据

return marked(this.articleDetail.context, { sanitize: true })

}

},

2) 使用mavonEditor

mavonEditor既可作为编辑使用,也可作为解析使用

API:https://github.com/hinesboy/mavonEditor

刚开始做的时候可以想到用mavonEditor作为编辑器使用,v-model中绑定数据,可以提交到数据库中,但就是没想到怎么去把数据库中的数据取出来再进行解析,感觉看官方API也是一头雾水,网上怎么也搜不到相关内容,于是还是沉下心来看API,总算是想到还可以用此来解析。

引入

npm install mavon-editor --save

// 全局注册

// import with ES6

import Vue from 'vue'

import mavonEditor from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

// use

Vue.use(mavonEditor)

作为编辑器使用

data(){

return {

context: ' ',//输入的数据

toolbars: {

bold: true, // 粗体

italic: true, // 斜体

header: true, // 标题

underline: true, // 下划线

mark: true, // 标记

superscript: true, // 上角标

quote: true, // 引用

ol: true, // 有序列表

link: true, // 链接

imagelink: true, // 图片链接

help: true, // 帮助

code: true, // code

subfield: true, // 是否需要分栏

fullscreen: true, // 全屏编辑

readmodel: true, // 沉浸式阅读

/* 1.3.5 */

undo: true, // 上一步

trash: true, // 清空

save: true, // 保存(触发events中的save事件)

/* 1.4.2 */

navigation: true // 导航目录

}

}

}

从数据库中获取刚刚存入的markdown文字解析到页面来

class="md"

:value="articleDetail.context"//获取数据

:subfield = "prop.subfield"

:defaultOpen = "prop.defaultOpen"

:toolbarsFlag = "prop.toolbarsFlag"

:editable="prop.editable"

:scrollStyle="prop.scrollStyle"

>

computed: {

prop () {

let data = {

subfield: false,// 单双栏模式

defaultOpen: 'preview',//edit: 默认展示编辑区域 , preview: 默认展示预览区域

editable: false,

toolbarsFlag: false,

scrollStyle: true

}

return data

}

},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值