ushare-editor --基于[email protected]开发的富文本编辑器

ushare-editor

在最近的一个项目开发中，使用到了富文本编辑器wangeditor。但遇到了一些问题，所以根据我碰到的问题，二次开发了ushare-editor。

介绍

ushare-editor —— 基于[email protected]开发的富文本编辑器,轻量级，配置方便，使用简单。支持 IE10+ 浏览器。

• 官网 ：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

优化

针对wangeditor

1. 部分UI重新设计；
2. 增加分割线功能；
3. 支持生成图片介绍文字功能，开启该功能时图片将居中显示；
4. 支持第三方平台拷贝文字时去除字体、去除字体大小等过滤；
5. 增加代码链接判空校验、链接自动插入http协议头；
6. 支持qq、微信等截图然后直接拷贝图片功能（该功能需后台支持图片上传功能或者配置七牛等第三方存储）；
7. 抽离css样式，用户可自行替换样式；
8. 修复了以下bug
   • 引用无法换行，enter键换行，没有输入文字时，再次按下enter，跳出引用；
   • 在引用功能最前面换行，会再生成一个引用；
   • 插入链接没有携带http协议头，导致无法跳转；
   • 插入代码后，无法跳出代码段

使用

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();

运行 demo

• 可查看github中的简易demo;
• 可查看wangeditor相关demo，使用方式基本一致
• 用于 React、vue 或者 angular 可查阅wangeditor文档中其他章节中的相关介绍