Vue.Js開源－Markdown 編輯器

mavonEditor

基于Vue的markdown編輯器

example (圖片展示)

PC

移動

Use Setup (開始)

Install mavon-editor (安裝)

$ npm install mavon-editor --save

package.json

"mavon-editor": "^1.3.3"

Use (如何引入)

// 方法一
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'


// require with Webpack/Node.js
var Vue = require('vue')
var mavonEditor = require('mavon-editor')

// use
Vue.use(mavonEditor)</code></pre> 

// 方法二
    // or use with component(ES6)
    import { mavonEditor } from 'mavon-editor'


export default {
  components: {
    mavonEditor
  }
}</code></pre> 

html
 
  
<!-- 使用雙向綁定修飾符 -->
    <mavonEditor v-model="value"/>
 
  
<!-- 當value發生改變 , 觸發change事件 -->
    <mavonEditor :value="value" @change="function"/>
 
  
 
   
默認大小樣式為 min-height: 300px , ming-width: 300px 可自行覆蓋
 
   
基礎z-index: 1500
 
   
單欄編輯模式下 , TAB鍵 主動觸發markdown渲染
 
   
屏幕分辨率低于768px ，自動取消【單欄 | 雙欄】編輯模式 ，更改為【編輯 | 預覽】切換 ， 并且取消【沉浸式閱讀】模式( > 768px 的眼睛圖標為【閱讀模式】 , 反之為【編輯 |預覽】)
 
  
 
  
API 文檔
 
  
props
 
  
 
   
 
    
 
     
name 名稱
 
     
type 類型
 
     
default 默認值
 
     
describe 描述
 
    
 
   
 
   
 
    
 
     
value
 
     
String
 
     
 
 
     
初始值
 
    
 
    
 
     
scrollStyle
 
     
Boolean
 
     
true
 
     
開啟滾動條樣式(暫時僅支持chrome)
 
    
 
    
 
     
subfield
 
     
Boolean
 
     
true
 
     
默認開啟雙欄編輯(單欄模式 TAB鍵主動觸發markdown渲染)
 
    
 
    
 
     
toolbars
 
     
Object
 
     
如下
 
     
工具欄
 
    
 
   
 
  
 
  
/*
    默認工具欄按鈕全部開啟, 如需關閉, 設置對應鍵值為false即可
    例如: {
        bold: false
    }
    此時, 粗體將被隱藏,其余正常顯示
 */
toolbars: {
      bold: true, // 粗體
      italic: true,// 斜體
      header: true,// 標題
      underline: true,// 下劃線
      strikethrough: true,// 中劃線
      mark: true,// 標記
      superscript: true,// 上角標
      subscript: true,// 下角標
      quote: true,// 引用
      ol: true,// 有序列表
      ul: true,// 無序列表
      link: true,// 鏈接
      imagelink: true,// 圖片鏈接
      code: true,// code
      table: true,// 表格
      subfield: true,// 是否需要分欄
      fullscreen: true,// 全屏編輯
      readmodel: true,// 沉浸式閱讀
      htmlcode: true,// 展示html源碼
      help: true// 幫助
  }
 
  
events
 
  
 
   
 
    
 
     
name 方法名
 
     
params 參數
 
     
describe 描述
 
    
 
   
 
   
 
    
 
     
change
 
     
String: value , String: reder
 
     
編輯區發生變化的回調事件(render: value 經過markdown解析后的結果)
 
    
 
    
 
     
save
 
     
String: value , String: reder
 
     
ctrl + s 的回調事件(后續添加保存按鍵,同樣觸發該回調)
 
    
 
    
 
     
fullscreen
 
     
Boolean: status , String value
 
     
切換全屏編輯的回調事件(boolean: 全屏開啟狀態)
 
    
 
    
 
     
readmodel
 
     
Boolean: status , String value
 
     
切換沉浸式閱讀的回調事件(boolean: 閱讀開啟狀態)
 
    
 
    
 
     
htmlcode
 
     
Boolean: status , String value
 
     
查看html源碼的回調事件(boolean: 源碼開啟狀態)
 
    
 
    
 
     
subfieldtoggle
 
     
Boolean: status , String value
 
     
切換單雙欄編輯的回調事件(boolean: 雙欄開啟狀態)
 
    
 
    
 
     
helptoggle
 
     
Boolean: status , String value
 
     
查看幫助的回調事件(boolean: 幫助開啟狀態)
 
    
 
   
 
  
 
  
Dependencies (依賴)
 
  
 
   
 
markdown-it
 
 
   
 
auto-textarea
 
 
   
 
stylus
 
 
  
 
  
follow-up (后續)
 
  
 
   
撤銷鍵、清空鍵、保存按鈕
 
   
支持開啟標題導航
 
   
滾動條樣式的瀏覽器兼容性
 
   
自定義工具欄功能鍵
 
   
提高移動端樣式適配性
 
   
markdown樣式自定義
 
   
重構
 
  
 
  
update(更新內容)
 
  
 
   
1.3.3 多個編輯器z-index沖突
 
   
1.3.2 props 傳遞方法 更改為 v-on 綁定方法
 
  
 
  
Licence (證書)
 
  
mavonEditor is open source and released under the MIT Licence.
 
  
Copyright (c) 2017 hinesboy
 
  
 
 
  
項目主頁：http://www.baiduhome.net/lib/view/home/1492566478177