本帖最后由 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 哦！
|
收藏
淘帖
踩
奈斯
