UEditor编辑器功能特色介绍及使用技巧详细说明

百度UEditor是由百度Web前端研发部开发的，在使用过程中能够实现所见即所得的富文本在线编辑器。UEditor编辑器的体积小巧，同时非常注重用户体验。该编辑器的界面设计非常简洁清晰，设计方面也非常的人性化，用户在使用的过程中，能够快速便捷的完成各项操作。该软件开源基于BSD协议，同时还能够允许互联网开发者自由传播和使用代码。UEditor编辑器的推出，能够帮助各网站开发者在开发富文本编辑器中，解决所遇到的所有难题，同时还能够节约开发者做需要的大量时间，更有效的降低了企业的开发成本。

UEditor编辑器 图一

1. 功能全面：UEditor编辑器中涵盖了所有流行富文本编辑器的特色功能，该编辑器中提供有多种独创的全新编辑操作模式。

2. 开源免费：该软件中开源基于MIT协议，同时还能够支持商业和非商业用户的免费使用和任意修改。

3. 专业稳定：该软件是由百度专业的QA团队持续跟进，通过上千自动化测试用例支持，是一款非常专业的富文本在线编辑器。

4. 定制下载：该编辑器中细粒度拆分核心代码，能够为使用者提供可视化功能选择和自定义下载。

5. 用户体验：在使用这款编辑器的过程中，能够屏蔽各种浏览器之间的差异，提供良好的富文本编辑体验。

1. 首先我们需要创建一个web项目，同时我们将下载好的UEditor直接放在根目录下面，并将自带的jar包引入，如下图所示。

UEditor编辑器 图二

2. 第二步需要先配置UEditor下面的ueditor.config.js文件，找到window.UEDITOR_HOME_URL = "/项目名称/ueditor/"；进行路径配置，如下图所示。

UEditor编辑器 图三

3. 第三步在我们需要用到富文本编辑器的地方引入js文件，需要引入ueditor.config.js、ueditor.all.js、jquery-2.2.3.min.js三个文件，如下图所示。

UEditor编辑器 图四

4. 第四步需要在页面中用一个文本域来引入，输入如下代码：

<textarea id="contents" name="contents"></textarea>

<script type="text/javascript" charset="utf-8">

var editor = new baidu.editor.ui.Editor();

editor.render("contents")；

</script>

UEditor编辑器 图五

5. 第五步运行项目，可以看到富文本编辑器UEditor已经显示在浏览器页面上了，如下图所示。

UEditor编辑器 图六

6. 第六步如果需要进行上传文件、图片、视频，需要配置“ueditor->jsp->config.json”文件，配置图片、文件、视频的路径访问前缀，相对路径可以用“..”表示，如下图所示。

UEditor编辑器 图七