UEditor编辑器使用教程

UEditor编辑器使用教程

小编最近正在使用一款开源软件做项目，但是这款软件内置的编辑器并不十分好使，倒是给小编平添了很多麻烦，一气之下便决定弃之不用，找另一款编辑器替代，遍寻之下终于被小编找到一款比较好使的web编辑器UEditor，下面就跟随小编一起来看看这款编辑器怎么使用吧。

首先我们需要来认识下UEditor，它是由百度web前端研发部开发所见即所得富文本web编辑器，并且是基于BSD协议的开源产品，允许自由使用和修改，这也是小编最看中它的地方，开源就意味着可以自己来定制这个编辑器。

接着我们来下载这个编辑器，百度一下UEditor，第一个就是它的官网。我们点击下载选项，我们发现一共有两个版本供我们选择，一个是UBuilder,一个是开发版，通过下面注释的红色小字我们可以了解到UBuilder和开发版的区别。一般情况下我们选择UBuilder版本即可。

跟我们以往下载软件的方式不同，UEditor采用选择性下载。首先是可见功能的选择，共有基本，插入，格式化，表格四大组，每组下面都有若干功能按钮，我们可以根据自己的需求来进行选择，如果双击四大组则表示全选该组按钮。如果对选择的按钮不满意还可以点击清空选择，有一点要提示的是如果点击清空选择会清楚掉你原先做过的所有选择。

接着就是隐藏功能，语言，服务端版本的选择，隐藏功能默认的是全选，如非必要还是不要更改为好。语言选项共分为了中文和英文两种，默认的是只下载中文语言包，如果你有需要用到英文的话可以把英文包也加上。服务端版本目前提供了三种，分别为PHP，.NET，JSP，选择完毕后我们就可以点击下载资源包了。

我们解压缩下载下来的UEditor压缩包。我们双击打开index.html文件，从标题上不难看出，这是一个演示文件，比较详细的记录了UEditor的创建和使用，但是这个文件中的很多代码我们都用不到，我们可以精简下代码，只留下需要的代码即可。

其实使用UEditor创建一个编辑器还是很简单的一件事情，首先就是引入俩个js文件，分别为editor_config.js和editor_all.js。然后就是js创建一个可编辑区域，用来创建编辑器，需要注明id，类型为text/plain，最后实例化编辑器即可（具体代码如下图所示，个别代码并未显示完全，仅供参考使用）。

如果将UEditor应用到项目中我们还需要对编辑器的路径进行设置。我们打开editor_config.js文件，找到window.UEDITOR_HOME_URL，然后配置编辑器所在文件的路径，这个路径可以是绝对路径也可以是相对路径。此处的配置仅对这个编辑器起作用，如果你使用了多个UEditor则需要分别进行设置。

UEditor的下载版本有两种，一般情况下我们选择UBuilder版本下载即可。

在可见功能的选择上我们并不一定需要全部选择，只选择我们需要的即可，这样整个编辑器看起来也会比较简洁。

将编辑器应用到项目中的时候一定不要忘记配置编辑器所在文件夹的路径，否则编辑器将不能正常使用。

以上就是UEditor编辑器使用教程的全部内容，希望对有需要的朋友有所帮助。