百度富文本编辑器UEditor

原创 2016年08月30日 14:10:01

1.什么是UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码…

2. UEditor的使用

2.1 UEditor选择

UEditor其实分为两款,一个是UEeditor
UEeditor演示
另一个是UMeditor
这里写图片描述

UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。
UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式,
以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv是对UM各种指标的最好测试平台。
当然随着代码的减少,UM的功能对于UE来说还是有所减少,但我们经过调研和大家对于UM提出的各种意见,提供了现在UM的功能版本,
虽然有删减,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。UM还会提供
CDN方式,减少大家部署的成本。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。

2.2 入门

  1. 下载UEditor:到官网下载UEditor的最新版,已经给出连接,点击官网就能跳转过去
  2. 在页面中使用UEditor:
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!--在你想要放置UEditor的位置上引用-->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 在其他地方实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>

2.3 读取值

var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容,返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容,返回: hello
    var txt = ue.getContentTxt();
});

2.3 其他文章

Ueditor实例化传入参数 http://blog.csdn.net/wanger_tt/article/details/52368889
UEditor对于工具条的自定义 http://blog.csdn.net/wanger_tt/article/details/52368959
UEditor图片上传保存位置的修改(JSP) http://blog.csdn.net/wanger_tt/article/details/52369239

版权声明:本文为博主原创文章,未经博主允许不得转载。

百度富文本编辑器UEditor的使用总结

百度富文本编辑器UEditor的使用总结 1.UEditor的简介    它是百度推出的一款开源的富文本web编辑器。自认为是目前使用挺广泛的一款富文本编辑器。 2.下载UEditor(我下载的是J...
  • M_M254282520
  • M_M254282520
  • 2016年09月20日 11:17
  • 1936

百度富文本编辑器UEditor使用简单示例

百度富文本编辑器UEditor使用简单示例
  • a491857321
  • a491857321
  • 2016年04月28日 15:26
  • 2038

angularjs利用指令调用ueditor百度编辑器

ueditor中文是百度编辑器,而angularjs是一款优秀的前端JS框架了,下面我们来介绍在angularjs调用ueditor百度编辑器例子,有兴趣的可一起来看看。一直以来,angularjs的...
  • u011127925
  • u011127925
  • 2015年08月05日 10:10
  • 6951

springMVC -- 整合UEditor(富文本编辑器)

网上找了好久才找到的springmvc和ueditor整合的合理方式,给大家分享下。 工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传...
  • qq1371426322
  • qq1371426322
  • 2017年01月19日 17:19
  • 687

asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)

asp.net mvc5 使用百度ueditor 本编辑器完整示例(上) 最近做一个项目,用到了百度ueditor富文本编辑器,功能强大,在线编辑文档,上传图片\视频、附件。 MVC 模型...
  • lenovouser
  • lenovouser
  • 2016年08月31日 18:33
  • 1811

vue集成百度UEditor富文本编辑器

在前端开发的项目中。难免会遇到需要在页面上集成一个富文本编辑器。那么。如果你有这个需求。希望可以帮助到你vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简。于是我...
  • psd_html
  • psd_html
  • 2017年06月16日 00:13
  • 13235

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 1.ueditor 官方地址:http://ueditor.baidu.com/webs...
  • wusuopuBUPT
  • wusuopuBUPT
  • 2013年10月25日 14:50
  • 52676

【php】ThinkPHP搭建百度Ueditor富文本编辑器

简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 下载UEditor 官网下载:ht...
  • C_jian
  • C_jian
  • 2017年08月04日 20:26
  • 360

关于使用百度UEditor富文本编辑器的总结

这段时间公司有个需求要用到富文本编辑器,在这里做一个小小的使用总结吧。 首先准备工作 到官网下载http://ueditor.baidu.com/website/ 将编辑器下载下来 技术文档 http...
  • qq_22074635
  • qq_22074635
  • 2016年01月07日 13:44
  • 4310

百度编辑器Ueditor的黑白名单过滤

.百度编辑器Ueditor 黑白名单过滤 伦理片 http://www.gxuy.com/ serialize: 黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤,可以通...
  • h254532693
  • h254532693
  • 2015年08月29日 12:05
  • 2417
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:百度富文本编辑器UEditor
举报原因:
原因补充:

(最多只允许输入30个字)