利用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 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JavaScript小技巧整理
Dec 30 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
antd Upload 文件上传的示例代码
Dec 14 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
Promise静态四兄弟实现示例详解
Jul 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
python logging类库使用例子
2014/11/22 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python在协程中增加任务实例操作
2021/02/28 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
个人合作协议书范本
2014/04/18 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫