le-markdown-editor | 一款強大的Vue markdown編輯器組件

le-markdown-editor是一款強大的markdown編輯器，它不只支持常見的markdown語法，還新增了上傳圖片及換膚等實用的功能，而且上傳圖片的功能是能夠定義的，替換也很是方便，很是適合用來作我的博客的編輯器。

這裏只記錄一些簡單的使用步驟，更多內容能夠訪問碼雲或github查看：
碼雲地址：點擊訪問
github地址：點擊訪問

預覽圖

組件使用

使用cdn

有的人可能不太喜歡用webpack或者就是寫個小demo，用不到webpack，能夠點擊訪問這個文件，參考這個文件便可使用

在webpack構建的項目中

• 下載插件

$ npm i le-markdown-editor --save

• index.js 或 main.js 中

import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'
// ...

Vue.use(leMarkdownEditor)
// ....
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

• index.html

<div id="editor-main">
      <le-editor></le-editor>
</div>

<style>
#app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
}

/*設置編輯器寬高*/
#editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
}
</style>

我該如何瞭解插件語法？

打開項目根目錄下的test.txt，將其拷貝到編輯區，對比右側看到的預覽文本，就能知道如何使用了

API

props(自定義配置)

屬性	說明	類型	默認值
value	可使用 v-model 雙向綁定數據	Sting	''
theme	編輯器主題	Sting	'base16-dark'
font	設置編輯區和展現區的文字大小	Object	{editor: 16, preview: 16}
shadow	編輯器是否帶陰影效果	Boolean	true
dragUpload	是否容許拖拽上傳圖片，須要結合圖片上傳配置使用	Boolean	true
showToolbar	是否顯示工具欄	Boolean	true
toolbar	菜單欄及快捷鍵的功能	Object	見下文

菜單欄配置配置

// 默認菜單欄配置
toolbar: {
    undo: true, // 撤銷
    redo: true, // 重作
    bold: true, // 粗體
    del: true, // 刪除線
    underline: true, // 下劃線
    italic: true, // 斜體
    quote: true, // 引用
    bookmark: true, // 標記
    superscript: true, // 上角標
    subscript: true, // 下角標
    h1: true, // 標題1
    h2: true, // 標題2
    h3: true, // 標題3
    h4: true, // 標題4
    h5: true, // 標題5
    h6: true, // 標題6
    alignLeft: true, // 居左
    alignCenter: true, // 居中
    alignRight: true, // 居右
    ol: true, // 有序列表
    ul: true, // 無序列表
    hr: true, // 分隔線
    link: true, // 連接
    inlineCode: true, // 行內代碼
    code: true, // 代碼塊
    image: true, // 圖片
    table: true, // 表格
    skin: true, // 皮膚
    fullScreenEdit: true, // 全屏編輯
    fullScreen: true, // 全窗口預覽
    preview: true,  // 實時預覽
    save: true,  // 保存預覽的html文本
  }
// 使用(例如按照下圖的配置，只會顯示兩個圖標)
<template>
  <div id="app">
    <le-editor :toolbar="toolbar"></le-editor>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
        toolbar: {
            undo: true,
            redo: true
        }
    }
  }
}
</script>

events(事件)

事件名	說明	返回值
save	保存預覽文本	預覽區的html文本
uploadImg	上傳圖片	組件對象、文件以及文件名，詳細內容見下文

圖片上傳配置

本地圖片上傳由於沒有各類雲存儲帳號的的緣由，因此暫時只支持拖拽或者粘貼剪切板圖片（windows粘貼本地圖片須要先預覽，截圖則不須要）上傳到Github倉庫和本身的服務器，雖然都在說Github訪問有點慢，可是我這幾天測試了一下，雖然上傳速度不快，可是訪問時感受效果還行，可是畢竟免費的，對於沒有圖牀和服務器的用戶仍是很不錯的，介意的話能夠傳到本身的服務器或者利用拓展方法上傳到本身的雲存儲上。

注意：mac系統下粘貼本地圖片會在編輯區留下原文件名，windows上沒有問題，可是不影響使用，雖然能直接經過編輯器操做去除那一段文本，可是總感受很彆扭，因此就沒處理，功能待優化，介意的話，請使用拖拽上傳的功能。

圖片上傳演示：

詳情請點擊這裏-->圖片上傳配置詳情

快捷鍵

注意： 這裏除了撤銷和重作兩個功能之外，其它的快捷鍵只在菜單設置爲顯示時生效

快捷鍵	功能
Ctrl + Z	撤銷
Ctrl + Y	重作
Ctrl + B	粗體
Ctrl + D	刪除線
Ctrl + U	下劃線
Ctrl + I	斜體
Ctrl + Q	引用
Ctrl + M	標記
Ctrl + L	連接
Ctrl + 1(F1)	標題1
Ctrl + 2(F2)	標題2
Ctrl + 3(F3)	標題3
Ctrl + 4(F4)	標題4
Ctrl + 5(F5)	標題5
Ctrl + 6(F6)	標題6
Ctrl + Alt + S	上角標
Ctrl + Alt + B	下角標
Ctrl + Alt + L	居左
Ctrl + Alt + C	居中
Ctrl + Alt + R	居右
Ctrl + Alt + O	有序列表
Ctrl + Alt + U	無序列表
Ctrl + Alt + H	分割線
Ctrl + Alt + I	行內代碼
Ctrl + Alt + D	代碼塊
Ctrl + Alt + P	開關實時預覽
Ctrl + Alt + F	開關全窗口預覽
Ctrl + S	保存html文本