開篇
??不知道各位是否對markdown熟悉逐样。它算是一門標記語言泳桦，但是語法簡單恬砂，卻本領強大。例如本篇博客蓬痒，便是用markdown語法編寫，然后根據(jù)不同的環(huán)境及依賴生成各種我想要的樣式漆羔，比如直接生成本篇博客樣式或者使用一些依賴或者工具賦之更加美觀的樣式梧奢。同樣，一般在CMS后臺管理系統(tǒng)中演痒，也經(jīng)常會用到編輯器來編寫一些文章材料亲轨。其中最常用的還是markdown編輯器和富文本編輯器。
效果
Markdown 介紹
1. 什么是Markdown
??首先鸟顺，各位框架玩家一定不會陌生惦蚊，因為無論是在各類框架下還是開源項目中，都會有一個.md的文件讯嫂，該文件一般是項目說明文件蹦锋，不僅語法簡潔，而且所生成的“頁面”也要比普通標記語言更加整潔明了欧芽。那么它到底是什么呢莉掂？
??Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法千扔，它可以使普通文本內(nèi)容具有一定的格式憎妙。
??Markdown具有一系列衍生版本，用于擴展Markdown的功能（如表格曲楚、腳注厘唾、內(nèi)嵌HTML等等），這些功能原初的Markdown尚不具備龙誊，它們能讓Markdown轉換成更多的格式抚垃，例如LaTeX，Docbook。Markdown增強版中比較有名的有Markdown Extra讯柔、MultiMarkdown抡蛙、 Maruku等。這些衍生版本要么基于工具魂迄，如Pandoc粗截；要么基于網(wǎng)站，如GitHub和Wikipedia捣炬，在語法上基本兼容熊昌，但在一些語法和渲染效果上有改動。
2. Markdown用途
??Markdown的語法簡潔明了湿酸、學習容易婿屹，而且功能比純文本更強，因此有很多人用它寫博客推溃。世界上最流行的博客平臺WordPress和大型CMS如Joomla昂利、Drupal都能很好的支持Markdown。完全采用Markdown編輯器的博客平臺有Ghost和Typecho铁坎。
??用于編寫說明文檔蜂奸，并且以“README.md”的文件名保存在軟件的目錄下面。
除此之外硬萍，由于我們有了RStudio這樣的神級編輯器扩所，我們還可以快速將Markdown轉化為演講PPT、Word產(chǎn)品文檔朴乖、LaTex論文甚至是用非常少量的代碼完成最小可用原型祖屏。在數(shù)據(jù)科學領域，Markdown已經(jīng)廣泛使用买羞，極大地推進了動態(tài)可重復性研究的歷史進程袁勺。
vue 中如何使用
注： 本示例選用的是mavon-editor
很明顯，所有組件逃不過三步走原則：
- 安裝
- 引入哩都、配置
- 使用
1. 安裝
安裝mavon-editor:npm install mavon-editor --save
2. 引入魁兼、配置
在要使用markdown編輯器的組件內(nèi)操作：
<script>
// 導入組件 及 組件樣式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
</script>
3. 使用
注意：
- 綁定model
- 實時改變：將
markdown實時轉化為html
在要使用markdown編輯器的組件內(nèi)操作:
<template>
<div>
<mavon-editor
v-model="content"
ref="md"
@change="change"
style="min-height: 600px"
/>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
// 注冊
components: {
mavonEditor,
},
data() {
return {
content:'', // 輸入的markdown
html:'', // 及時轉的html
}
},
methods: {
// 所有操作都會被解析重新渲染
change(value, render){
// render 為 markdown 解析后的結果[html]
this.html = render;
},
// 提交
submit(){
console.log(this.content);
console.log(this.html);
}
},
mounted() {
}
}
</script>
問題
那么，在常用的操作里面漠嵌，例如各級標題咐汞、表格、加粗加斜儒鹿、標記化撕、圖文……圖？此時约炎，我們發(fā)現(xiàn)一個問題：如何添加本地圖片呢植阴？
Q
在某些IDE里面使用markdown時蟹瘾，可以自由的插入本地圖片，那我們在頁面中使用此編譯器組件如何添加圖片呢掠手？
A
監(jiān)聽憾朴。沒錯，就是監(jiān)聽輸入框變化喷鸽。如果監(jiān)聽到有圖片插入众雷，那么我們可以先將圖片上傳至服務器，然后獲取到線上url做祝，拿到該url再插入到該位置砾省。那么具體過程就很明顯了：
- 選擇本地圖片，插入
- 監(jiān)聽到有圖片插入
- 將該圖上傳至服務器
- 獲取到服務器返回的圖片url
- 將該線上url冬天插入到輸入框中
代碼如下
<template>
<div class="markdown">
<div class="container">
<mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
<button @click="submit">提交</button>
</div>
</div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: "",
props: [],
components: {
mavonEditor,
},
data() {
return {
content:'',
html:'',
configs: {}
}
},
methods: {
// 將圖片上傳到服務器混槐，返回地址替換到md中
$imgAdd(pos, $file){
let formdata = new FormData();
this.$upload.post('/上傳接口地址', formdata).then(res => {
console.log(res.data);
this.$refs.md.$img2Url(pos, res.data);
}).catch(err => {
console.log(err)
})
},
// 所有操作都會被解析重新渲染
change(value, render){
// render 為 markdown 解析后的結果[html]
this.html = render;
},
// 提交
submit(){
console.log(this.content);
console.log(this.html);
this.$message.success('提交成功编兄，已打印至控制臺！');
}
},
mounted() {
}
}
</script>
后
??到這里声登，vue中使用markdown編輯器教程結束狠鸳。那么更為大眾廣泛使用的富文本編輯器如何使用呢？且看下回~
