利用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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
javascript中的数据类型检测方法详解
Aug 07 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编程最快明白》第三讲:php数组
2010/11/01 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python和c语言的主要区别总结
2019/07/07 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
趣味运动会活动方案
2014/02/12 职场文书
小学生作文评语
2014/04/18 职场文书
学习普通话的体会
2014/11/07 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
MySQL Server 层四个日志
2022/03/31 MySQL