让前端飞前端开发笔记前端开发

ushare-editor --基于wangEditor@3.1

2018-12-21  本文已影响0人  再见那卑微的再见

ushare-editor

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

介绍

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

demo

ushare-editor demo

下载

优化

针对wangeditor

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

使用

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

运行 demo

上一篇 下一篇

猜你喜欢

热点阅读