開源一個 Vue.js 2.0+ 石墨文檔樣式的富文本編輯器

SMEditor

✎ 基於 Vue.js 2.0+ 石墨文檔樣式的富文本編輯器, 輕量, 快速, 優雅

在線預覽

反饋

聯繫

關於做者

原由

以前一直使用的 wangEditor 不能知足我司編輯和PM需求, 使用過程當中也出了不少問題,   simditor 體驗以後效果不是很好, 而且也不維護了; 目前的我司的極客公園後臺管理系統技術選型已經轉向了 Vue, 因此就有了這個輪子;

功能

• [x] 輕, 快 48 KB
• [x] 自動添加圖片描述框 (相似簡書)
• [x] 複製上傳, 多張批量上傳
• [x] 輕量級備份, 恢復, 預覽
• [x] 代碼精簡, 適合二次開發
• [x] 其餘編輯器有的功能
• [ ] 移動端

使用

// 安裝
npm install smeditor

// 引入
import SMEditor from 'smeditor'

// 全局組件
Vue.use(SMEditor)

// 局部組件
components: {
  'smeditor': SMEditor
}

// 使用
<smeditor :config='config'></smeditor>
複製代碼

配置

const config = {
  // 接口地址
  uploadUrl: '',
  // form 裏的 filename
  uploadName: '',
  // 其餘參數
  uploadParams: {},
  // 上傳成功回調
  uploadCallback: (data) => {
    console.log(data)
    return 'blob:https://fiddle.jshell.net/00a0b0b4-d19a-4860-9796-137692aef36f'
  },
  // 上傳失敗回調, 可選
  uploadFailed: (err) => {
    console.log(err)
  }
}
複製代碼

快捷鍵

Ctrl + S 保存
Ctrl + P 預覽(新窗口)
複製代碼

本地運行

npm run dev

npm run build
複製代碼

打賞

若是你感受有收穫，歡迎給我打賞 ———— 以激勵我更多輸出優質開源內容