对应的样式代码如下：
<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
})
