利用Vue实现一个markdown编辑器实例代码
作者:九路313 发布时间:2024-04-30 10:39:19
前言
前段时间做项目的时候,需要一个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,如有发现,欢迎提出
来源:104.116.116.112.58.47.47.119.119.119.46.99.110.98.108.111.103.115.46.99.111.109.47.115.116.97.114.116.49.50.50.53.47.112.47.49.48.56.56.55.48.54.49.46.104.116.109.108.


猜你喜欢
- 操作数据库时候难免会因为“大意”而误操作,需要快速恢复的话通过备份来恢复是不太可能的,因为需要还原和binlog差来恢复,等不了,很费时。这
- 串口简述异步串行是指UART(Universal Asynchronous Receiver/Transmitter),通用异步接收/发送。
- 1、在Asp页面首部加入Response.Buffer = True Response.ExpiresAbso
- 前言numpy支持对矩阵和数组进行运算,因此很多numpy的很多运算都需要指定操作的维数参数axis(当然这些axis都有带默认值的),本博
- 测试通过: ie6 + opera + FF + chrome if (document.all) { window.attachEvent
- 一、and:在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返回布尔值;而是,返回它们实际进行比较的值
- 引言如今 Python 成为机器学习和大量使用数据操作的科学领域的主流语言; 它拥有各种深度学习框架和完善的数据处理和可视化工具。但是,Py
- 本文实例总结了Python中numpy模块常见用法。分享给大家供大家参考,具体如下:import numpy as nparr = np.a
- 1.引言热力图的想法很简单,用颜色替换数字。现在,这种可视化风格已经从最初的颜色编码表格走了很长一段路。热力图被广泛用于地理空间数据。这种图
- 如何用SQL 建表? 如下:CREATE TABLE statement
- 看如下asp代码:<%@ codepage="65001" %><!-- 
- asp之家注:也许很多人对网页设计中的,id和class和name的区别不是很清楚,好像觉得都可以使用,没什么不同。就我个人来讲,我的理解是
- 本文实例讲述了python实现的多线程端口扫描功能。分享给大家供大家参考,具体如下:下面的程序给出了对给定的ip主机进行多线程扫描的Pyth
- 一、问题描述一段 Python 代码在本地的 IDE 上运行正常,部署到服务器运行后,出现了 ModuleNotFoundError: No
- 随机生成四位数验证码,包括汉字,数字,英文大小写。1.Servlet类package servlet;import java.awt.Bas
- (一)RabbitMQ的简介RabbitMq 是实现了高级消息队列协议(AMQP)的开源消息代理中间件。消息队列是一种应用程序对应用程序的通
- 介绍本文主要介绍Python中set的基本知识和使用。Python中什么是setdict的作用是建立一组 key 和一组 value 的映射
- 模块Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和 Python 语句模
- 无意中看到以前在电脑上保存的一个html页面,关于div水平垂直居中的问题。如何实现div水平垂直居中呢?1.已知宽高度水平垂直居中posi
- 参考官方文档 http://dev.mysql.com/doc/refman/5.7/en/select-into.htmlmysql>