UMeditor
Installation
npm install umeditor --save
UMeditor富文本编辑器
UMeditor,简称UM,是 ueditor 的简版。是为满足广大门户网站对于简单发帖框和回复框的需求,专门定制的在线富文本编辑器。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。
主要特点
- 轻量: 主文件的代码量为139k。
- 加载速度更快: 放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。
- 可定制: 配置项完善,可定制程度高。
- 可扩展: 代码层次拆分清晰,功能以插件形式挂接,可灵活定制需要的功能。
- 多后台支持: 支持php、asp、jsp、net四中后台部署代码
- 功能丰富: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能
入门部署和体验
第一步:下载编辑器
到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子。[下载页面]
第二步:部署编辑器到页面
- 解压下载的包,放到你的项目中。
- 在你的页面要插入编辑器的位置,插入代码:
<!-- 加载编辑器的容器 -->
- 在
<head></head>
标签最后,插入需要引用的文件和实例化编辑器的代码(注意修改引用文件的路径):
<!-- 样式文件 --><!-- 引用jquery --><!-- 配置文件 --><!-- 编辑器源码文件 --><!-- 语言包文件 --><!-- 实例化编辑器代码 -->
第三步:获取和设置编辑器的内容
/* 获取编辑器内容 */var html = um;var txt = umum; /* 设置编辑器内容 */um;
相关链接
UMeditor官网: http://ueditor.baidu.com
百度FEX-Team: http://fex.baidu.com