開源一個 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

打賞

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