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


Posted in Javascript onMay 19, 2019

前言

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

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

本文的源码地址如下:https://github.com/jiulu313/HelloMarkDown(本地下载)

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

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

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

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

话不多说,来看思路

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,如有发现,欢迎提出

总结

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

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
详解js中let与var声明变量的区别
Apr 05 #Javascript
You might like
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python模块的制作方法实例分析
2019/12/21 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
营销专业应届生求职信
2013/11/26 职场文书
师范生个人推荐信
2013/11/29 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
七年级英语教学反思
2014/01/15 职场文书
高中生活自我鉴定
2014/01/18 职场文书
商务考察邀请函范文
2014/01/21 职场文书
抽奖活动主持词
2014/03/31 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
护士节慰问信
2015/02/15 职场文书
赞助商致辞
2015/07/30 职场文书