vue-markdown編輯器

小眼萌發表於2018-08-23
Vue

線上示例地址 admin:123456

GitHub地址 : GitHub地址

更新日誌

v0.7.0

  1. 修復主題無法更新的問題
  2. 修復文件初始化值無法動態切換的問題

v0.8.0

  1. 新增md檔案匯出和讀取功能
  2. 修改預覽部分樣式
  3. 修改頭部選單樣式

1.簡介

一款使用marked和highlight.js開發的一款markdown編輯器，目前只支援在vue專案中使用。 編輯器涵蓋了常用的markdown編輯器功能，工具欄可自定義配置，也可進行二次開發。

效果

image

2.安裝

npm i -S vue-meditor
複製程式碼

3.在專案中使用

import MarkDown from 'vue-meditor'

...
components:{
    MarkDown
}
...

<template>
    <mark-down/>
</template>
複製程式碼

4.props

名稱 型別 說明 預設值
title String 編輯器標題，預設為空，不顯示
titleStyle Object 標題樣式，如果自定義標題時可自行編寫樣式
initialValue String 編輯器初始化內容
width Number 編輯器寬度
height Number 編輯器高度，單位 px 600
theme String 程式碼塊主題配置，共有四個值，分別為Light、Dark、OneDark、GitHub Light
autoSave Boolean 是否自動儲存 true
interval Number 自動儲存頻率，單位毫秒 10000
toolbars Object 工具欄配置，具體功能詳見工具欄功能配置表
mode Number 初始化顯示模式 1 分屏顯示 2 預覽詳情 3 全屏編輯

5.events

名稱 說明
on-save 自動儲存或者手動儲存時觸發，返回當前編輯器內原始輸入內容和轉以後的內容

6.工具欄配置

名稱 說明 預設顯示
strong 粗體 是
italic 斜體 是
overline 刪除線 是
h1 標題1 是
h2 標題2 是
h3 標題3 是
h4 標題4 否
h5 標題5 否
h6 標題6 否
hr 分割線 是
quote 引用 是
ul 無序列表 是
ol 有序列表 是
code 程式碼塊 是
link 連結 是
image image 是
table 表格 是
checked 已完成列表 是
notChecked 未完成列表 是
shift 預覽 是
print 列印 否
theme 主題切換 是
fullscreen 全屏 是
exportmd 匯出為*.md檔案 是
importmd 匯入本地*.md檔案 是

7.其他說明

關於儲存時返回值

    markdownValue // 編輯器輸入的原始內容
    htmlValue // 右側現實的問轉義後的內容
    theme // 儲存時的主題名字
複製程式碼

工具欄配置

// 例：
const config = {
    print:false // 隱藏掉列印功能
}
<MarkDown :toolbars="config"/>
複製程式碼

關於二次開發

原始檔案在src/markdown下，可在其基礎上自定義開發，也可將markdown資料夾

複製到新專案中，安裝對應依賴 highlight.js和marked即可

關於二次開發後打包

// 修改webpack.config.js

  entry: './src/main.js', // main.js改為index.js
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js', // 輸出檔名改為index.js或其他
    libraryTarget: 'umd',
    library: 'markdown-vue',
    umdNamedDefine: true
  },

複製程式碼

相關文章