黑马程序员技术交流社区

标题: 【上海校区】干货~ 百度 UEditor 富文本编辑器入门指南 [打印本页]

作者: SH_Jepson 时间: 2017-8-22 14:06
标题: 【上海校区】干货~ 百度 UEditor 富文本编辑器入门指南
本帖最后由 SH_Jepson 于 2017-8-22 14:16 编辑

欢迎顶贴，回复可下载入门小demo

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

源码下载
因为富文本编辑器，有功能要与后台配合，比如图片上传，视频上传等，所以官网提供的开发版，一般都集成了后台代码，所以这里我们下载个 PHP 版本就可以了。

http://ueditor.baidu.com/website/download.html#ueditor

UEditor 初始化
最好根据版本号改下包名，我这边 ueditor1_4_3_3-utf8
将整个代码包放到 lib 资源目录中，我们接下来进行第一步 UEditor 初始化。

新建 01_初始化.html 页面，写入以下代码，具体作用已注释注明。
即可完成一个编辑器的基本初始化。

最好在服务器环境下打开，运行效果：

Ueditor 自定义参数配置
编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器。
配置官方提供两种配置方案：
1. 取消 ueditor.config.js 中的注释，然后修改成对应参数
2. 在实例化编辑器的时候，第二个参数传入对象进行配置

所有配置项配置起来，非常便捷，按照上面的配置，可以配置工具栏有哪些功能按钮，文本内容多了是否会自动增高等。
运行效果：

这里可以看到，只有我配置的 toolbars 工具栏功能按钮才显示出来了。

自动长高功能效果：

官方提供了非常详细的配置说明，具体如何配置，可以直接看 api。
所有配置项说明： http://fex.baidu.com/ueditor/#start-config

Ueditor 定制工具栏图标
刚才简单的配置了几个工具栏图标，这边我们来详细介绍一下，每个工具栏图标如何配置。

只要在 toolbars 数组中，添加对应你需要的工具项，即可定制，你需要的富文本编辑框了。
效果：

可配置的参数有很多：

这里只列举出一部分，具体详见官方API：http://fex.baidu.com/ueditor/#start-toolbar

UEditor 设置获取内容
对编辑器的操作最好在编辑器 ready 之后再做。
设置编辑器内容：  ue.setContent( '内容' );
获取：1. html格式内容：    ue.getContent( )
         2. 纯文本格式内容： ue.getContentTxt( )

运行结果：

控制台打印结果：

UEditor 常用API
上面演示了几个简单的API，其他还有一些常用的API。

设置编辑器内容：

追加编辑器内容：

获取编辑器html内容：

获取纯文本内容：

判断编辑器是否有内容：

编辑器获取焦点：

设置当前区域编辑状态：
不可编辑：

可以编辑：

编辑器显示状态：
设置编辑器显示：

设置编辑器隐藏：

详细的文档，可以查阅官方文档 http://ueditor.baidu.com/doc/#COMMAND.LIST

欢迎顶贴！回复可下载入门小DEMO 哦！

作者: 绮丽 时间: 2017-8-23 09:38
这么多图片这个帖子一定花了很多时间

作者: lunelee 时间: 2017-9-19 13:27
谢谢分享

作者: RandomSolitude 时间: 2017-9-22 23:45
谢谢分享

作者: Yin灬Yan 时间: 2017-9-23 21:48
我来占层楼啊

作者: xgwhsgws 时间: 2017-9-30 21:24
很有用，值得学习，感谢楼主分享

作者: 社会我球哥 时间: 2017-12-5 17:57

球哥看贴要回帖

作者: sunzhigang1231 时间: 2018-5-26 17:01
好好学习,天天向上

作者: 不二晨 时间: 2018-7-16 12:02

奈斯

作者: 吴琼老师 时间: 2018-7-18 15:15

作者: 不二晨 时间: 2018-7-20 11:08
优秀，奈斯

作者: 摩西摩西OvO 时间: 2018-7-23 13:58

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2