• UID12
  • 登录2016-06-14
  • 粉丝109
  • 关注50
  • 发帖1415
  • 主页
  • 金币8510枚
社区居民
最爱沙发
忠实会员
喜欢达人
原创写手
极分享 发布于2016-06-02 10:30
2/691

体积小巧更快的UMeditor富文本编辑器

楼层直达

体积小巧更快的UMeditor富文本编辑器

 

源码来自:https://github.com/fex-team/umeditor

 

UMeditor,简称UM,是 ueditor 的简版。是为满足广大门户网站对于简单发帖框和回复框的需求,专门定制的在线富文本编辑器。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。

主要特点

  1. 轻量: 主文件的代码量为139k。
  2. 加载速度更快: 放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。
  3. 可定制: 配置项完善,可定制程度高。
  4. 可扩展: 代码层次拆分清晰,功能以插件形式挂接,可灵活定制需要的功能。
  5. 多后台支持: 支持php、asp、jsp、net四中后台部署代码
  6. 功能丰富: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能

入门部署和体验

第一步:下载编辑器

到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子。[下载页面]

第二步:部署编辑器到页面

  • 解压下载的包,放到你的项目中。
  • 在你的页面要插入编辑器的位置,插入代码:
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
    这里写你的初始化内容
</script>
  • <head></head>标签最后,插入需要引用的文件和实例化编辑器的代码(注意修改引用文件的路径):
<!-- 样式文件 -->
<link rel="stylesheet" href="./umeditor/themes/default/css/umeditor.css">
<!-- 引用jquery -->
<script src="./umeditor/third-party/jquery.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="./umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./umeditor/umeditor.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="./umeditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器代码 -->
<script type="text/javascript">
    $(function(){
        window.um = UM.getEditor('container', {
            /* 传入配置参数,可配参数列表看umeditor.config.js */
            toolbar: ['undo redo | bold italic underline']
        });
    });
</script>
  • 这时候你再浏览器打开你的页面,看到下面这样的编辑器,说明你已部署成功。 部署成功

第三步:获取和设置编辑器的内容

/* 获取编辑器内容 */
var html = um.getContent();
var txt = um.um.getContentTxt();

/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');

相关链接

UMeditor官网: http://ueditor.baidu.com

百度FEX-Team: http://fex.baidu.com

联系我们

邮件: ueditor@baidu.com


0人打赏
  • UID7461
  • 登录2016-06-08
  • 粉丝1
  • 关注0
  • 发帖211
  • 主页
  • 金币191枚
社区居民
忠实会员
android_chao 发布于2016-06-02 17:55
沙发F
下载用了,感觉还不错
  • UID12
  • 登录2016-06-14
  • 粉丝109
  • 关注50
  • 发帖1415
  • 主页
  • 金币8510枚
社区居民
最爱沙发
忠实会员
喜欢达人
原创写手
极分享 发布于2016-06-02 17:59
板凳F
android_chao:下载用了,感觉还不错回到原帖
有用就好
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 57496/337   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 30909/139   省时省力的Android组件群来了,非常棒的原型参考

  • 30559/187   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 27200/216   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 23892/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22626/2   超全!整理常用的iOS第三方资源

  • 21893/0   Python爬虫:常用浏览器的useragent

  • 21575/137   2016抢红包软件及源码

  • 19577/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19413/25   Android工程师面试题大全

  • 18692/27   2016程序员跳槽全攻略

  • 18588/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18166/20   码魂:程序员的牛B漫画

  • 16621/3   吐槽那些程序员的搞笑牛逼注释

  • 15671/146   Android版类似UC浏览器:非常赞,产品级的源码

  • 15443/1   iOS 动画总结

  • 14801/41   一个绚丽的loading动效分析与实现!

  • 14392/10   女程序员的梦,众网友的神回复

  • 14215/11   年会上现场review代码是怎么样的体验!

  • 14182/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14166/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14102/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 13793/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13605/22   个人收集的Android 各类功能源代码

  • 13479/10   2016年最全的Android面试考题+答案 精编版

  • 12910/19   珍藏多年的素材,灵感搜寻网站

  • 12780/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12428/15   基于Android支付宝支付设计和开发方案

  • 12405/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12114/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12103/20   Android福利第三波【Android电子书】

  • 12052/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 11554/18   65条最常用正则表达式,你要的都在这里了

  • 11498/7   用程序员的姿势抢过年的火车票

  • 11464/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 11459/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11391/7   一张图搞定iOS学习路线,非常全面

  • 11283/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 10984/0   iOS中文版资源库,非常全

  • 10919/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10507/18   一张图搞定Android学习路线,非常全面

  • 10482/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10060/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10026/29   【持续更新中】Android福利贴(一):资料源码

  • 10008/0   GitHub iOS 库和框架Top100 

  • 9997/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 9670/4   46 个非常有用的 PHP 代码片段

  • 9308/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9279/3   即时通信第三方库

  • 9149/8   流媒体视频直播方案

  • 9082/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9013/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 8984/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 8891/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8848/18   八个最优秀的Android Studio插件

  • 8420/6   开箱即用!Android四款系统架构工具

  • 8337/3   一张图看清Linux 内核运行原理

  • 8218/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8205/10   十大技巧快速提升Android应用开发性能

  • 7868/1   Android性能优化视频,文档以及工具

  • 返回顶部