1.干货~ 百度 UEditor 富文本编辑器入门指南

干货~ 百度 UEditor 富文本编辑器入门指南

       UEditor介绍

       由百度FEX前端研发团队开发的应用源UEditor是一款所见即所得的富文本web编辑器，以其轻量、应用源可定制和注重用户体验等特点，应用源开源且基于MIT协议，应用源php ftp类源码允许用户自由使用和修改代码。应用源

       源码下载

       由于富文本编辑器需要与后台配合，应用源如和视频上传，应用源因此官网提供的应用源开发版通常集成了后台代码。因此，应用源此处推荐下载PHP版本的应用源源码。

       ueditor.baidu.com/websi...

       UEditor初始化

       建议根据版本号修改包名，应用源预约管理源码例如将ueditor1_4_3_3-utf8整个代码包放置到lib资源目录中，应用源接下来进行UEditor初始化。应用源

       创建_初始化.html页面，应用源并写入以下代码，应用源具体作用已在注释中注明。点量 源码

       即可完成一个编辑器的基本初始化。

       建议在服务器环境下打开，运行效果：

       Ueditor自定义参数配置

       编辑器提供多种可自定义的参数项，在实例化时可以传入给编辑器。官方提供两种配置方案：1. 取消ueditor.config.js中的竞赛评分源码注释，并修改为对应参数；2. 在实例化编辑器时，第二个参数传入对象进行配置。

       所有配置项配置起来非常便捷，按照上述配置，可以配置工具栏的color switch源码功能按钮，以及文本内容增多时是否会自动增加等。

       运行效果：

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

       自动长高功能效果：

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

       Ueditor定制工具栏图标

       刚才简单配置了几个工具栏图标，下面来详细介绍一下如何配置每个工具栏图标。

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

       效果：

       可配置的参数有很多：fex.baidu.com/ueditor/#...

       UEditor设置获取内容

       对编辑器的操作最好在编辑器ready之后再进行。

       设置编辑器内容：ue.setContent('内容');

       获取：1. html格式内容：ue.getContent();

       2. 纯文本格式内容：ue.getContentTxt();

       运行结果：

       控制台打印结果：

       UEditor常用API

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

       设置编辑器内容：

       追加编辑器内容：

       获取编辑器html内容：

       获取纯文本内容：

       判断编辑器是否有内容：

       编辑器获取焦点：

       设置当前区域编辑状态：

       不可编辑：

       可以编辑：

       编辑器显示状态：

       设置编辑器显示：

       设置编辑器隐藏：

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