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) {
