百度UEditor教程及使用方法(图文)

编辑：宝哥软件园来源：互联网时间：2021-09-11

新天龙八部

评分

当我们在做一个网站的时候，网页编辑器通常用在网站的后台系统中。今天推荐一个百度UEditor编辑器。官网这个百度UEditor编辑器上也有一个简单的教程，但是很难看。今天就和大家分享一下使用百度UEditor编辑器的教程和方法，希望对大家有所帮助。

第一：百度UEditor编辑器的官方下载地址

用户官方地址：http://ueditor.baidu.com/website/index.html

发展文件地址：http://ueditor.baidu.com/website/document.html

下载地址：http://ueditor.baidu.com/website/download.html(这里可以选择开发版或MINI版)

二：百度UEditor编辑器的功能版本选择

当我们进入百度的UEditor官网，点击下载选项，发现有两个版本可供我们选择，一个是UBuilder，一个是开发版。我们可以通过下面标注的红色小字符知道UBuilder和开发版的区别。正常情况下，我们可以选择UBuilder版本。

百度UEditor编辑器使用方法

与我们过去下载软件的方式不同，UEditor使用选择性下载。首先是可见函数的选择。有四组：基本、插入、格式和表格。每组下面有几个功能按钮，我们可以根据自己的需要进行选择。如果我们双击这四个组，我们将选择该组中的所有按钮。如果您对所选按钮不满意，也可以单击清除选择。有一点要提醒你的是，如果你点击清除选择，你之前做的所有选择都会被清除。

百度UEditor编辑器使用教程

然后是隐藏功能、语言和服务器版本的选择。默认情况下，隐藏功能全部选中，如果没有必要，最好不要更改。语言选项分为中文和英文。默认情况下，只下载中文语言包。如果需要使用英语，可以添加英语包。目前有三个服务器版本，分别是PHP、NET和JSP。选择后，我们可以点击下载资源包。

第三：百度编辑器的配置方法和技巧

1.从官网下载完整的源代码包，解压到任意目录。提取的源代码目录的结构如下：

_示例：编辑器完整版的示例页面

对话框：对应于弹出对话框的资源和JS文件

主题：样式图片和样式文件。net:与服务器端操作相关的后台文件，根据您选择的不同后台版本会有所不同。这里我们选择php

第三方：第三方插件(包括代码高亮、源代码编辑等组件)

Editor _ all.js:在_ src目录下所有文件的打包文件(针对发布版本)

Editor_api.js: API接口配置文件(开发版)

editor _ all _ min . js:editor _ all . js文件的压缩版本，建议正式部署

Editor_config.js:编辑器的配置文件，建议和编辑器的实例化页面放在同一个目录下

2.在编辑器的实例化页面上，导入编辑器所需的三个条目文件。示例代码如下：

百度UEditor编辑器使用教程与使用方法

脚本类型=' text/JavaScript ' charset=' utf-8 ' src=' http :/umeditor . config . js '/脚本

！-使用版本-

！-脚本类型=' text/JavaScript ' charset=' utf-8 ' src=' http :/umeditor.all.js'/script -

！-开发版本-

脚本类型=' text/JavaScript ' charset=' utf-8 ' src=' http : editor _ API . js '/脚本

脚本类型=' text/JavaScript ' src=' http :/lang/zh-cn/zh-cn . js '/脚本

3.然后在编辑器的实例化页面中创建一个编辑器实例及其DOM容器。示例代码如下：

百度UEditor编辑器使用教程与使用方法

Textarea name='背景值的键' id='我的编辑器'在此处写入您的初始化内容/textarea

脚本类型=“文本/javascript”

var editor=new UE . ui . editor()；

editor . render(' myEditor ')；

//1.2.4您可以稍后使用代码实例化编辑器

//UE.getEditor('myEditor ')

/script

4.在editor_config.js中找到项目中URL变量配置编辑器的路径

官网示例：

百度UEditor编辑器使用教程与使用方法

//strong烈建议这样配置绝对路径

URL=窗口。UEDITOR _ HOME _ URL | | '/UETest/UEDITOR/'；

我的配置：

百度UEditor编辑器使用教程与使用方法

(函数(){ 0

/**

* 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即对话等文件夹)的路径。

* 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用'相对于网站根目录的相对路径'进行配置。

* '相对于网站根目录的相对路径'也就是以斜杠开头的形如/myProject/umeditor/'这样的路径。

* 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的统一资源定位器可能不适用于每个页面的编辑器。

* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的统一资源定位器等于对应的配置。

*窗口. UMEDITOR _ HOME _ URL='/xxxx/xxxx/'；*//* * * @作者wusuopubupt * @日期2013-10-24* *设置窗口UMEDITOR _ HOME _ URL='/ueditor/'；* * */窗口UMEDITOR _ HOME _ URL='/ueditor/'；//注意就是这里！var网址=窗口UMEDITOR _ HOME _ URL | |(function(){ function path stack(){ 5，如果用editor_api.js(也就是不用editor.all.js)开发时，打开editor_api.js，代码如下

/*** 开发版本的文件导入*/(function(){ var path=[' editor。js '，' core/browser.js '，' core/utils.js '，' core/EventBase.js '，' core/dtd.js '，' core/doutils。js '，' core/Range.js '，' core/Selection.js '，' core/Editor.js '，' core/node.js '，' core/htmlparser.js '，' core/filternode.js '，'插入/插入html。js '，'插件/图像。js ' */BaseURl='/ueditor/src/'；对于(var i=0，pi；pi=路径[一]；){文档。write(' script type=' text/JavaScript ' src=' http : ' baseURl pi ' '/script ')；} })();可以看到，这里有一项：baseURL，就是射流研究…文件的路由，这里要根据ueditor_api.js文件的实际路径去配置！

6、文件上传问题：

打开ueditor.config.js，可以看到如下配置：

百度UEditor编辑器使用教程与使用方法

//图片上传配置区

，imageurl : URl ' PHP/imageup。PHP '//图片上传提交地址

//，imagePath:URL 'php/' //图片修正地址，引用了修复图像路径，如有特殊需求，可自行配置

，imagepath : ' http://测试。数学和数学。' com/'

，imageFieldName:'upfile' //图片数据的关键，若此处修改，需要在后台对应文件修改对应参数

这里的imageURL是图片上传所调用的服务器端编程语言(专业超文本预处理器的缩写)文件的地址，而imagePath则是为新上传的图片生成的图片地址的宿主部分；

再打开ueditor/php/下的imageUp.php文件，有配置如下：

百度UEditor编辑器使用教程与使用方法

$ config=array(' save path '='/var/www/store/upload/'，//存储文件夹' maxSize'=1000，//KB ' allow files '中允许的最大文件大小=array('。gif '，'。png '，'。png ')//上传文件目录//$ Path=' upload/'；$ Path='/var/www/store/upload/'；在这里，您需要将上传文件到服务器(上传文件和保存文件)的目的地址更改为您指定的文件地址。

由于相对路径和绝对路径的问题，生成的地址可能是错误的，所以需要黑掉生成图片URL的JS文件：

ueditor/dialog/image/image . js已修改：

百度UEditor编辑器使用教程与使用方法