ushare-editor

在最近的一個項目開發(fā)中，使用到了富文本編輯器wangeditor。但遇到了一些問題，所以根據(jù)我碰到的問題，二次開發(fā)了ushare-editor。

介紹

ushare-editor —— 基于wangEditor@3.1.1開發(fā)的富文本編輯器,輕量級，配置方便，使用簡單。支持 IE10+ 瀏覽器。

• 官網(wǎng) ：https://editor.ushare.org
• 源碼：https://github.com/HEJIN2016/ushare-editor （歡迎star和issues）
• 文檔：https://www.kancloud.cn/hejin/ushare-editor/883176

demo

ushare-editor demo

下載

• 直接下載：https://github.com/HEJIN2016/ushare-editor
• 使用npm下載：npm install ushare-editor

優(yōu)化

針對wangeditor

1. 部分UI重新設(shè)計；
2. 增加分割線功能；
3. 支持生成圖片介紹文字功能，開啟該功能時圖片將居中顯示；
4. 支持第三方平臺拷貝文字時去除字體、去除字體大小等過濾；
5. 增加代碼鏈接判空校驗、鏈接自動插入http協(xié)議頭；
6. 支持qq、微信等截圖然后直接拷貝圖片功能（該功能需后臺支持圖片上傳功能或者配置七牛等第三方存儲）；
7. 抽離css樣式，用戶可自行替換樣式；
8. 修復(fù)了以下bug
   • 引用無法換行，enter鍵換行，沒有輸入文字時，再次按下enter，跳出引用；
   • 在引用功能最前面換行，會再生成一個引用；
   • 插入鏈接沒有攜帶http協(xié)議頭，導(dǎo)致無法跳轉(zhuǎn)；
   • 插入代碼后，無法跳出代碼段

使用

<link rel='stylesheet' href='usharerEditor.css'>
<script src='ushareEditor.js'></script>


const E = window.ushareEditor
const editor = new E('#div')
editor.create()

webpack
1.npm install ushare-editor --save

const ushareEditor = require('ushare-editor');
require('ushare-editor/ushareEditor.css');

const editor = new ushareEditor('#div');
editor.create();

運(yùn)行 demo

• 可查看github中的簡易demo;
• 可查看wangeditor相關(guān)demo，使用方式基本一致
• 用于 React、vue 或者 angular 可查閱wangeditor文檔中其他章節(jié)中的相關(guān)介紹