利用Vue实现一个markdown编辑器实例代码

前言

前段时间做项目的时候，需要一个Markdown编辑器，在网上找了一些开源的实现，但是都不满足需求

说实话，这些开源项目也很难满足需求公司项目的需求，与其实现一个大而全的项目，倒不如实现一个简单的，易于在源码上修改的项目，核心功能都有的，以供修改使用

本文的源码地址如下：https://github.com/jiulu313/HelloMarkDown（本地下载）

喜欢的朋友可以帮忙star一下，欢迎交流学习

先看一下本项目的效果图（图片经过压缩）

本文的目的就是实现一个有核心功能的，简单，易于修改的项目

话不多说，来看思路

1 markdown内容如何转换成 html？

网上有一个开源的库叫 marked，地址如下：https://github.com/markedjs/marked.git

我们可以安装这个库，使用很简单，就一个函数，传进去markdown内容，就返回了html内容

2 markdown内容转换成了html，如何进行语法高亮？

网上也有一个开源的库，地址如下 ：https://highlightjs.org/

我们可以使用这两个库

先把markdown内容解析成html内容

把html内容进行语法高亮

下面我们来一步一步实现代码

3 代码实现

默认你已经创建好了vue的项目 ， 创建vue项目 vue init webpack demo
这里面不多讲。

3.1 安装两个库，分别执行下面两条命令

npm install marked --save
npm install highlight.js --save

3.2 首先创建一个 HelloMarkDown 的 Vue组件

布局文件的代码如下：

<template>
<div class="md_root_content" v-bind:style="{width:this.width,height: this.height}">

<!--功能按钮区-->
<div class="button_bar">
<span v-on:click="addBold"><B>B</B></span>
<span v-on:click="addUnderline"><B>U</B></span>
<span v-on:click="addItalic"><B>I</B></span>
</div>

<!--主要内容区-->
<div class="content_bar">

<!--markdown编辑器区-->
<div class="markdown_body">
<textarea ref="ref_md_edit" class="md_textarea_content" v-model="markString">
</textarea>
</div>

<!--解析成html区-->
<div class="html_body">
<p v-html="htmlString"></p>
</div>

</div>

</div>
</template>

主要分为上下两块，上面是功能区的布局

下面一块，分左右两部分，左边是markdown，右边是显示html部分

对应的样式代码如下：

<style scoped>

.md_root_content {
display: flex;
display: -webkit-flex;
flex-direction: column;
}

.button_bar {
width: 100%;
height: 40px;
background-color: #d4d4d4;
display: flex;
display: -webkit-flex;
align-items: center;
}

div.button_bar span {
width: 30px;
line-height: 40px;
text-align: center;
color: orange;
cursor: pointer;
}

.content_bar {
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
}

.markdown_body {
width: 50%;
height: 100%;
display: flex;
display: -webkit-flex;
}

.html_body {
width: 50%;
height: 100%;
display: flex;
display: -webkit-flex;
background-color: #dfe9f1;
}

.md_textarea_content {
flex: 1;
height: 100%;
padding: 12px;
overflow: auto;
box-sizing: border-box;
resize: none;
outline: none;
border: none;
background-color: #f4f4f4;
font-size: 14px;
color: #232323;
line-height: 24px;
}
</style>

业务逻辑部分的代码如下：

<script>
import marked from 'marked' //解析mardown语法的库
import hljs from 'highlight.js' //对代码进行语法高亮的库

import testData from '../testData' //测试数据

export default {
name: "HelloMarkDown",
props: {
width: {
type: String,
default: '1000px'
},

height: {
type: String,
default: '600px'
}
},
data() {
return {
markString: '',
htmlString: '',
}
},
mounted(){
this.markString = testData
},

methods: {
//加粗
addBold() {
this.changeSelectedText("**","**")
},

//斜体
addItalic() {
this.changeSelectedText("***","***")
},

addUnderline() {
this.changeSelectedText("<u>","</u>")
},

changeSelectedText(startString,endString){
let t = this.$refs.ref_md_edit
if (window.getSelection) {
if (t.selectionStart != undefined && t.selectionEnd != undefined) {

let str1 = t.value.substring(0, t.selectionStart)
let str2 = t.value.substring(t.selectionStart, t.selectionEnd)
let str3 = t.value.substring(t.selectionEnd)

let result = str1 + startString + str2 + endString + str3
t.value = result
this.markString = t.value
}
}
}
},

watch: {
//监听markString变化
markString: function (value) {
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
})

this.htmlString = marked(value)
},
//监听htmlString并对其高亮
htmlString: function (value) {
this.$nextTick(() => {
const codes = document.querySelectorAll(".html_body pre code");

// elem 是一个 object
codes.forEach(elem => {
elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>"
hljs.highlightBlock(elem);
});
});
}
}

}
</script>

script中的代码解释

props: {
width: {
type: String,
default: '1000px'
},

height: {
type: String,
default: '600px'
}
},

width: 组件的宽度

height:组件的高度

data() {
return {
markString: '',
htmlString: '',
}
},

markString：保存我们输入的markdown内容

htmlString：保存markdown内容转换成的html内容，也就是通过marked函数转换过来的

mounted(){
this.markString = testData
},

显示默认数据

//加粗
addBold() {
this.changeSelectedText("**","**")
},

//斜体
addItalic() {
this.changeSelectedText("***","***")
},

//加下划线
addUnderline() {
this.changeSelectedText("<u>","</u>")
},

这三个函数都是调用了 changeSelectedText 函数

主要是对鼠标选中的内容进行改变，比如加粗效果，是在选中文本的两边分别添加 **

所以changeSelectedText函数的作用就是在选中的文本两边添加不同的md的符号

比如

this.changeSelectedText("","") ，就是在选中的文本左边和右边都添加**

然后再把最新的内容赋值给 this.$refs.ref_md_edit.value，同时也两会给markString

这样就可以做到选中文本加粗效果了

//监听markString变化
markString: function (value) {
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
})

this.htmlString = marked(value)
},

此时是监听markString的变化

然后调用marked函数进行转换成html内容，并赋值给htmlString

marked.setOptions 是设置一些配置，有兴趣的可以查一下这些配置的作用

//监听htmlString并对其高亮
htmlString: function (value) {
this.$nextTick(() => {
const codes = document.querySelectorAll(".html_body pre code");

// elem 是一个 object
codes.forEach(elem => {
elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>"
hljs.highlightBlock(elem);
});
});
}

原本通过 highlight.js这个库在显示语法高亮的时候，是没有行号的。这里我进行了扩展

通过 document.querySelectorAll(".html_body pre code") 找到nodeList

然后对其循环，动态添加 ul , li, 这样就可以显示行号了

不过这需要对 highlight的css文件添加几个样式

源码里面我把highlight中的css文件全部copy到项目中了，使用的是github.css

具体位置是在项目中的 assets/markdown/styles/github.css

如果想使用其它的主题，可以自己修改其它的对应的css文件，这里使用了github的主题，所以只修改了github.css这一个文件

有兴趣的可以查看一下

github.css文件的提交记录

具体的思路就是这些，水平有限，难免有bug，如有发现，欢迎提出

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

• vue中利用simplemde实现markdown编辑器（增加图片上传功能）
• Vuejs中使用markdown服务器端渲染的示例
• 详解基于mpvue的小程序markdown适配解决方案
• 实现Vue的markdown文档可以在线运行的方法示例
• Vue+Element使用富文本编辑器的示例代码
• Vue项目中quill-editor带样式编辑器的使用方法
• 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
• vue2.0项目中使用Ueditor富文本编辑器示例代码
• Vue2.0中集成UEditor富文本编辑器的方法
• vue中使用ueditor富文本编辑器