多语言展示
当前在线:1189今日阅读:138今日分享:34

UEditor编辑器使用教程

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

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

4

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

5

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

6

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

7

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

注意事项
1

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

2

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

3

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

4

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

推荐信息