如何使用Vue实现一个markdown编辑器

这篇文章主要介绍如何使用Vue实现一个markdown编辑器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主营绥江网站建设的网络公司,主营网站建设方案,成都App制作,绥江h5微信小程序开发搭建,绥江网站营销推广欢迎绥江等地区企业咨询

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

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

思路

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组件

布局文件的代码如下：

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

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

对应的样式代码如下：

 .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;
 }

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

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("","")
  },

这三个函数都是调用了 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 = "
" + elem.innerHTML.replace(/\n/g, "\n
") + "\n
"
   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这一个文件

以上是“如何使用Vue实现一个markdown编辑器”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！