凡客建站_怎么建设网站_建网_企业网站怎么建立_网站建设官网
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

运用Vue完成一个markdown编写器案例编码

发表日期:2021-04-07 02:30文章编辑:jianzhan浏览次数: 标签:    

序言

前不久做新项目的情况下,必须一个Markdown编写器,在网络上找了一些开源系统的完成,可是也不考虑要求

说真话,这种开源系统新项目也难以考虑要求企业新项目的要求,两者之间完成一个大而全的新项目,还不如完成一个简易的,便于在源代码上改动的新项目,关键作用都是有的,以供改动应用

文中的源代码详细地址以下:jiulu313/HelloMarkDown(当地免费下载)

喜爱的朋友能够帮助star一下,热烈欢迎沟通交流学习培训

首先看一下本新项目的实际效果图(照片历经缩小)


文中的目地便是完成一个有关键作用的,简易,便于改动的新项目

话很少说,看来构思

1 markdown內容怎样变换成 html?

在网上有一个开源系统的库叫 marked,详细地址以下:markedjs/marked.git

大家能够安裝这一库,应用非常简单,就一个涵数,传进来markdown內容,就回到了html內容

2 markdown內容变换变成html,怎样开展英语的语法高亮度?

在网上也是有一个开源系统的库,详细地址以下 :

大家可使用这2个库

先把markdown內容分析成html內容

把html內容开展英语的语法高亮度

下边大家来一步一步完成编码

3 编码完成

默认设置你早已建立好啦vue的新项目 , 建立vue新项目 vue init webpack demo
这儿面很少讲。

3.1 安裝2个库,各自实行下边两根指令

npm install marked --save
npm install highlight.js --save

3.2 最先建立一个 HelloMarkDown 的 Vue部件

合理布局文档的编码以下:

 template 
 div v-bind:nuoxin="{width:this.width,height: this.height}" 
 !--作用按键区-- 
 div 
 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 
 !--markdown编写器区-- 
 div 
 textarea ref="ref_md_edit" v-model="markString" 
 /textarea 
 /div 
 !--分析成html区-- 
 div 
 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' //对编码开展英语的语法高亮度的库

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 String = marked(value) //监视htmlString并对其高亮度 htmlString: function (value) { this.$nextTick(() = { _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
 String = marked(value)
 },

这时是监视markString的转变

随后启用marked涵数开展变换成html內容,并取值给htmlString

marked.setOptions 是设定一些配备,有兴趣爱好的能够查一下这种配备的功效

 //监视htmlString并对其高亮度
 htmlString: function (value) {
 this.$nextTick(() = {
 _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这一库在显示信息英语的语法高亮度的情况下,是沒有行号的。这儿我开展了拓展
<_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,若有发觉,热烈欢迎明确提出

小结

之上便是本文的所有內容了,期待文中的內容对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,感谢大伙儿对诺心互联网的适用。

相关新闻

Angularjs完成数字能量数组任意排列的方式

//必须导进angular.js库文档script type="text/javascript" src="../angular-1.5.5/angular-1.5.5/angular.js" /script s...

日期:2021-04-05 浏览次数:72

西安市互联网企业为何CSS4还没有被运用于企业网

近期,早已有一些有关是不是应当像界定的CSS“下一个版本号”CSS4的探讨。在文中中,大家将...

日期:2021-03-08 浏览次数:169

点餐小程序怎么做_VUE页面中加载外部HTML的示例代

VUE网页页面里加载外界HTML的实例编码 前后左右端分离出来,后端开发出示了插口。但是...

日期:2021-01-11 浏览次数:151

小程序游戏怎么开发_完成vuex原理的示例

本文关键详细介绍了完成vuex基本原理的实例,协助大伙儿更强的了解和学习培训vue,很感兴趣...

日期:2021-01-05 浏览次数:178

购物商城建设网站的三-如何运用手机微信H5游戏

现在不管是线上还是线下的店家,尤其需要掌握微信营销这种营销方式,将线上和线下一步一...

日期:2020-12-18 浏览次数:62

主题活动是照片素材,怎样得到和运用?

在各行各业之中基础上都必须触碰到许多的主题活动,而这些主题活动有的人是进行者,有的...

日期:2020-12-09 浏览次数:145