利用Vue实现一个markdown编辑器实例代码
前言
前段时间做项目的时候,需要一个markdown编辑器,在网上找了一些开源的实现,但是都不满足需求
说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用
本文的源码地址如下:https://github.com/jiulu313/hellomarkdown(本地下载)
喜欢的朋友可以帮忙star一下,欢迎交流学习
先看一下本项目的效果图(图片经过压缩)
本文的目的就是实现一个有核心功能的,简单,易于修改的项目
话不多说,来看思路
1 markdown内容如何转换成 html?
网上有一个开源的库叫 marked,地址如下:
我们可以安装这个库,使用很简单,就一个函数,传进去markdown内容,就返回了html内容
2 markdown内容转换成了html,如何进行语法高亮?
网上也有一个开源的库,地址如下 :
我们可以使用这两个库
先把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,如有发现,欢迎提出
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
推荐阅读
-
利用Vue实现一个markdown编辑器实例代码
-
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
-
Vue组件内部实现一个双向数据绑定的实例代码
-
Vue组件内部实现一个双向数据绑定的实例代码
-
vue中利用simplemde实现markdown编辑器(增加图片上传功能)-个人文章-SegmentFault思否
-
分享一个利用H5实现下拉顶部放大的实例代码
-
利用html实现一个有点击(显示、隐藏)效果按钮的实例代码
-
利用html实现一个有点击(显示、隐藏)效果按钮的实例代码
-
vue中利用simplemde实现markdown编辑器(增加图片上传功能)-个人文章-SegmentFault思否
-
利用HTML实现一个个人信息表的网页(代码实例)