1.什么是UEditor

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

2. UEditor的使用

2.1 UEditor选择

UEditor其实分为两款,一个是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();//获取纯文本内容,返回: hellovar 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相关推荐

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  2. 百度富文本编辑器ueditor在https协议下无法正常插入动态地图

    在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...

  3. 百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法

    百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...

  4. TP5.1框架中百度富文本编辑器UEditor的使用

    在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...

  5. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  6. themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传

    项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...

  7. html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  8. Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例(附带完整源码)

    前端 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...

  9. 百度富文本编辑器ueditor插入html代码

    记录工作中遇到的问题 需求:  文本编辑器左侧展示模板,点击左侧模板将模板展示到富文本编辑器内. 代码: // 点击模板时添加到编辑器内 $(".templates-con ul li&qu ...

  10. 百度富文本编辑器UEditor 图片宽度100%自适应,手机端

    有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索 增加内容 loader.setAt ...

最新文章

  1. 难以想象SpringBoot中的条件注解底层居然是这样实现的
  2. html前端 echarts图表使用详解
  3. I Love You的真正含义
  4. 前端学习(3124):react-hello-react之批量传递props
  5. ASP如何获取客户端真实IP地址
  6. c语言全排列库函数,几种全排列的算法(C语言实现)
  7. paip.提升用户体验---免维护列表字段
  8. RFID技术与应用 复习用
  9. 登入ftp:500 OOPS: vsf_sysutil_bind, maximum number of attempts to find a listening port exceeded
  10. python使用Jpype调用java程序
  11. 腾讯360再较量  谁是反垄断巨头
  12. logstash grok mysql_logstash -grok插件语法介绍
  13. 阿里云企业版云服务器如何选择及部署策略
  14. RxHttp 完美适配Android 10/11 上传/下载/进度监听
  15. Cesium视频融合
  16. 【教学类-17-02】20221125《世界杯七巧板A4整页-随机参考图七巧板 3份一页》(大班)
  17. flex 的 三个参数 flex:1 0 auto
  18. 基于Python的多功能本地视频播放系统
  19. 格式塔(Gestalt)原理
  20. 汇编实验:格雷码转二进制(ASCII码)的实现和调试

热门文章

  1. 如何去除水中的钙镁离子
  2. maya2022插件开发工具包及官方教学网址如下
  3. mysql跨服务跨库查询
  4. 使用python刷访问量
  5. 中国饭局上的座次讲究
  6. 第三次收获微软MVP
  7. python加权求和_python求加权平均值的实例(附纯python写法)
  8. win10如何删除微软拼音输入法
  9. PageHelper分页插件踩坑--最后一页查询效率低下
  10. 两表关联去重查询全部数据