開篇

??不知道各位是否對markdown熟悉。它算是一門標記語言，但是語法簡單，卻本領強大。例如本篇博客，便是用markdown語法編寫，然后根據(jù)不同的環(huán)境及依賴生成各種我想要的樣式，比如直接生成本篇博客樣式或者使用一些依賴或者工具賦之更加美觀的樣式。同樣，一般在CMS后臺管理系統(tǒng)中，也經(jīng)常會用到編輯器來編寫一些文章材料。其中最常用的還是markdown編輯器和富文本編輯器。

效果

markdown示例.png

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. 安裝
2. 引入、配置
3. 使用

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. 使用

注意：

1. 綁定model
2. 實時改變：將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再插入到該位置。那么具體過程就很明顯了：

1. 選擇本地圖片，插入
2. 監(jiān)聽到有圖片插入
3. 將該圖上傳至服務器
4. 獲取到服務器返回的圖片url
5. 將該線上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編輯器教程結束。那么更為大眾廣泛使用的富文本編輯器如何使用呢？且看下回~