百度编辑器教程 ueditor

最新推荐文章于 2024-06-25 09:02:21 发布

三个人工作室

最新推荐文章于 2024-06-25 09:02:21 发布

阅读量1.2k

点赞数

分类专栏： ueditor

ueditor 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

http://ueditor.baidu.com/website/document.html

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

我们在做网站的时候，网站后台系统一般都会用到web编辑器，今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度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采用选择性下载。首先是可见功能的选择，共有基本，插入，格式化，表格四大组，每组下面都有若干功能按钮，我们可以根据自己的需求来进行选择，如果双击四大组则表示全选该组按钮。如果对选择的按钮不满意还可以点击清空选择，有一点要提示的是如果点击清空选择会清楚掉你原先做过的所有选择。

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

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

1、从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：

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

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

themes：样式图片和样式文件   php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择php

third-party：第三方插件(包括代码高亮，源码编辑等组件）

editor_all.js：_src目录下所有文件的打包文件（用于发布版本）

editor_api.js: API接口配置文件（开发版本）

editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用

editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

2、编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下：

<!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->

<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>

<script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>

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

这里写你的初始化内容

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

官网示例：

//强烈推荐以这种方式进行绝对路径配置

URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置：

(function () {

/**

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

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

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

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

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

 * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";

 */

/**

 * @author wusuopubupt

 * @date 2013-10-24

 *

 * set window.UMEDITOR_HOME_URL = "/ueditor/";

 *

 * */

window.UMEDITOR_HOME_URL = "/ueditor/";  //注意就是这里！

 var URL = window.UMEDITOR_HOME_URL || (function(){

 function PathStack() {

5、如果用editor_api.js （也就是不用editor.all.js）开发时,打开editor_api.js,代码如下

/**

开发版本的文件导入

(function (){

var paths  = [

        ’editor.js’,

        ’core/browser.js’,

        ’core/utils.js’,

        ’core/EventBase.js’,

        ’core/dtd.js’,

        ’core/domUtils.js’,

        ’core/Range.js’,

        ’core/Selection.js’,

        ’core/Editor.js’,

        ’core/filterword.js’,

        ’core/node.js’,

        ’core/htmlparser.js’,

        ’core/filternode.js’,

        ’plugins/inserthtml.js’,

        ’plugins/image.js’,

        ’plugins/justify.js’,

        ’plugins/font.js’,

        ’plugins/link.js’,

        ’plugins/print.js’,

        ’plugins/paragraph.js’,

        ’plugins/horizontal.js’,

        ’plugins/cleardoc.js’,

        ’plugins/undo.js’,

        ’plugins/paste.js’,

        ’plugins/list.js’,

        ’plugins/source.js’,

        ’plugins/enterkey.js’,

        ’plugins/preview.js’,

        ’plugins/basestyle.js’,

        ’plugins/video.js’,

        ’plugins/selectall.js’,

        ’plugins/removeformat.js’,

        ’plugins/keystrokes.js’,

        ’plugins/dropfile.js’,

        ’ui/widget.js’,

        ’ui/button.js’,

        ’ui/toolbar.js’,

        ’ui/menu.js’,

        ’ui/dropmenu.js’,

        ’ui/splitbutton.js’,

        ’ui/colorsplitbutton.js’,

        ’ui/popup.js’,

        ’ui/scale.js’,

        ’ui/colorpicker.js’,

        ’ui/combobox.js’,

        ’ui/buttoncombobox.js’,

        ’ui/modal.js’,

        ’ui/tooltip.js’,

        ’ui/tab.js’,

        ’ui/separator.js’,

        ’ui/scale.js’,

        ’adapter/adapter.js’,

        ’adapter/button.js’,

        ’adapter/fullscreen.js’,

        ’adapter/dialog.js’,

        ’adapter/popup.js’,

        ’adapter/imagescale.js’,

        ’adapter/autofloat.js’,

        ’adapter/source.js’,

        ’adapter/combobox.js’

    ],

    /**

     * @author wusuopubupt

     * @date 2013-10-24

     *

     * modified  baseURL = ’/ueditor/src/’;

     */

    baseURL = ’/ueditor/src/’;  

for (var i=0,pi;pi = paths[i++];) {

    document.write(’<script type="text/javascript" src="’+ baseURL + pi +’"></script>’);

}

})();

可以看到，这里有一项：baseURL，就是JS文件的路由，这里要根据ueditor_api.js文件的实际路径去配置！

6、文件上传问题：

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

//图片上传配置区
,imageUrl:URL+“php/imageUp.php” //图片上传提交地址

   //,imagePath:URL + "php/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

   ,imagePath:"http://test.mathandcs.com/"

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

这里的imageURL是图片上传所调用的php文件的地址，而imagePath则是为新上传的图片生成的图片地址的host部分；

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

$config = array(

    "savePath" => "/var/www/store/upload/" ,             //存储文件夹

    "maxSize" => 1000 ,                   //允许的文件最大尺寸，单位KB

    "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式

);

//上传文件目录

//$Path = "upload/";

$Path = "/var/www/store/upload/";

这里需要把上传文件到服务器的目的地址（上传文件保存文件）savePath修改成你指定的文件地址。

由于相对路径和绝对路径的问题，生成的地址有可能是错的，这时就要hack一下生成图片URL的JS文件：

ueditor/dialogs/image/image.js 中修改：

/**

             * @author wusuopubupt

             * @date 2013-10-24

             * @return url modified

             * */

            var reg = /\/var\/www\/test\/upload\//;

            url = url.replace(reg,"");

       var $img = $("<img src=’" + editor.options.imagePath + url + "’ class=’edui-image-pic’ />"),

                $item = $("<div class=’edui-image-item edui-image-upload-item’><div class=’edui-image-close’></div></div>").append($img);

这里的正则的规则要根据具体情况来定！

至此，Ueditor便在我的环境中配置成功了。

一、富文本内容交互
1、编辑器内容初始化（即往编辑器中设置富文本）
场景一：写新文章，编辑器中预置提示、问候等内容。
在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。

场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。
显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，如下代码所示：
1

此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。

2、提交编辑器内容至后端
场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。
该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：

默认情况下提交到后台的表单名称是 “editorValue”，在editor_config.js中可以配置，参数名为textarea。
可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的默认配置。实例代码如下，此处的myContent将成为新的提交表单名称：
1

3）后端接收程序可以通过如下几种方式来获取编辑器中的富文本内容。
1

//PHP获取：
$_POST[“myContent”]

//JSP获取：
request.getParameter(“myContent”);

//ASP获取：
request(“myContent”);

//NET获取:
context.Request.Form[“myContent”];

场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。

该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前执行编辑器内容同步操作。一般的代码模式如下所示：

//满足提交条件时同步内容并提交，此处editor为编辑器实例
if(editor.hasContents()){ //此处以非空为例
editor.sync(); //同步内容
someForm.submit(); //提交Form
}

如果使用的是jquery validation可以参考如下代码

$(function(){
var editor = new UE.ui.Editor();
editor.render(‘content’);
editor.addListener(‘contentchange’,function(){
this.sync();
//1.2.4+以后可以直接给textarea的id名字就行了
$(‘textarea’).valid();
});
var validator = $("#myform").submit(function() {
editor.sync();
}).validate({
ignore: “”,
rules: {
title: “required”,
content: “required”
},
errorPlacement: function(label, element) {
// position error label after generated textarea
if (element.is(“textarea”)) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
}
});
validator.focusInvalid = function() {
// put focus on tinymce on submit validation
if( this.settings.focusInvalid ) {
try {
var toFocus = $(this.findLastActive() ||this.errorList.length && this.errorList[0].element || []);
if (toFocus.is(“textarea”)) {
editor.focus()
} else {
toFocus.filter(":visible").focus();
}
} catch(e) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})

此处editor是编辑器实例对象。

场景三：编辑器不在任何Form中，提交动作由外部事件触发。
该场景使用不多，但特殊时候可能需要。UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。其他同场景二。

二、图片上传交互
1、传统图片上传
传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。

2、Flash图片上传
Flahs图片上传和传统图片上传存在一个很大的区别：它需要服务器端实时返回“图片保存路径”用于在前台的即时展示。具体到编辑器，就是需要将返回的路径插入到编辑器中。由此会引出除传统图片上传中提到的两个参数之外的第三个参数：“前后端修正路径”。如果后台返回的保存路径是绝对路径（指以http开头的路径，以根目录开始的路径也可勉强归入其中），那么前台无须做任何修正，否则用户必须十分清楚自己当前的目录结构并据此修正这个前后端相对路径之间的差异。因此，UEditor极力推荐由服务器端返回以根目录开始的相对路径。

3、UEditor中的上传实践及注意事项
在UEditor中，“上传提交路径”和“前后端修正路径”的配置位于editor_config.js中。其中，imageUrl参数对应着“上传提交路径”，imagePath参数对应着“前后端修正路径”。而“图片保存路径”则需要在server/upload/php目录下的imageUp文件中配置。
路径配置完成之后，还需要配置imageFieldName参数作为文件表单的表单名，后台可以据此获取文件句柄。该参数同样位于editor_config.js中。
1

//图片上传提交地址
imageUrl:URL+“server/upload/php/imageUp.php”,

//图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
imagePath:fixedImagePath,

//图片描述的key
imageFieldName:“upFile”,

//等比压缩的基准，确定maxImageSideLength参数的参照对象.
//0为按照最长边，1为按照宽度，2为按照高度
compressSide:0,

//上传图片最大允许的边长，超过会自动等比缩放,不缩放就设置一个比较大的值
//更多设置在image.html中
maxImageSideLength:900

完成上述配置之后，理论上后台应该可以接收到前台上传的图片文件了。在正确保存之后，传统图片上传至此就结束了。但是，在使用Flash上传的编辑器中，流程还远未结束。
首先，后台需要计算得出图片文件存放的地址字符串。该字符串UEditor极力推荐使用从网站根目录开始算起，一直到图片名结束为止。如果不从网站根目录开始算起，后面需要考虑“前后端修正地址”参数。
其次，后台返回一个json格式的字符串，格式具体要求如下：
1

{ “url”:“图片地址”, “title”:“图片描述”, “state”:“上传状态” }

其中，url对应计算出的图片保存地址——再强调一遍，尽量构造出从网站根目录开始的地址字符串；title对应flash中的描述字段，在图片上将会被设置到title属性中；state对应服务器端返回的图片上传状态字符：除了上传成功返回“SUCCESS”之外，其他任何值都将被直接显示在返回的图片描述字段内。
最后，UEditor会在返回的url地址前面增加“前后端修整路径”这个参数值作为最后插入编辑器中的图片地址。因此，如果服务器端返回的是从根目录开始的图片路径或者http开头的绝对路径，“前后端修正路径”必须留空。
举例来讲，如果服务器返回的路径是“/myProject/uploads/sun.jpg”,那么插入到编辑器中的路径会是“前后端修正路径 + /myProject/uploads/sun.jpg”。
三、Word图片转存交互
1、图片转存原理
所谓word图片转存，是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后，word文章中的图片数据无法显示在编辑器中，也无法提交到服务器上的问题而开发的一个操作简便的图片转存方案。
该功能的基本操作步骤：复制word文档——》粘贴到编辑器——》编辑器会将所有图片转换成一个占位图，同时在工具栏中高亮转存按钮——》点击转存按钮弹出图片上传框——》点击复制按钮复制图片目录地址——》点击“添加照片”按钮，在弹出的选择框中粘贴刚复制的图片目录地址——》点击打开按钮，选择目录下的所有图片文件，在此点击打开——》执行图片上传——》上传成功确认插入，UEditor将自动完成对应占位图的替换过程。

2、配置要点及注意事项
word图片转存跟普通图片上传的配置基本一样，所不同的仅仅是操作上的差异：前者需要首先获取临时图片文件存在的目录，后者直接选择自己指定的文件目录。PS：在部分操作系统的部分版本word中发现单张word图片会生成两张临时图片，且格式不一，清晰度各异，目前暂时未发现改进方法。
四、远程图片抓取交互
1、远程抓取原理
图片远程抓取是指在插入本地域名之外的图片链接地址时，由服务器将这些外部图片抓取到本地服务器保存的一个功能。实现原理为在编辑器中向服务器发送包含所有外域图片地址的ajax请求，然后由服务器在后端抓取保存后返回图片地址给编辑器，再由编辑器完成外域地址和本地地址的替换工作。
1

//是否开启远程图片抓取
catchRemoteImageEnable:true,

//处理远程图片抓取的地址
catcherUrl:URL +“server/submit/php/getRemoteImage.php”,

//提交到后台远程图片uri合集的表单名
catchFieldName:“upFile”,

//图片修正地址，同imagePath
catcherPath:fixedImagePath,

//本地顶级域名，当开启远程图片抓取时，除此之外的所有其它域名下的
//图片都将被抓取到本地
localDomain:[“baidu.com”,“10.81.2.114”],

2、注意事项
远程抓取功能是否开启可在edicot_config.js中通过配置catchRemoteImageEnable参数实现。与这个功能相关的配置还包括了远程抓取的处理程序地址，表单域名称，本地域和“前后端修正地址”。远程抓取处理程序实现了依据前端提交的地址列表（使用ue_separate_ue标示符进行分隔的字符串）进行图片抓取，然后返回地址列表给客户端的功能。
前后台交互数据格式样例：（URL1，URL2，URL3，URL4）
1

URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4

五、图片在线管理交互
1、图片在线管理介绍
图片在线管理是指通过读取服务器端的文件目录并将其展示到编辑器中的进行额外一些操作的功能。处于安全考虑，目前UEditor仅实现了图片二次插入操作，其他诸如删除、移动等操作将会在后续二次开发教程中陆续放出。
1

//图片在线管理的处理地址
imageManagerUrl:URL + “server/submit/php/imageManager.php”,

//图片修正地址，同imagePath
imageManagerPath:fixedImagePath

2、注意事项
图片在线管理需要配置的参数跟远程图片抓取一致，两者不同的地方是图片在线管理中的图片数据是由服务器端指定某个目录，然后遍历其下的所有图片文件得到，然后将地址返回给编辑器，而远程图片抓取则是由编辑器提交图片地址，经过服务器端的抓取处理后返回新的地址给编辑器。两者的初始触发都需要ajax的介入。
六、屏幕截图交互
1、屏幕截图介绍
使用了ActiveX控件，目前只支持IE浏览器。

2、注意事项
需要配置的参数除了跟图片上传一样的内容之外，还多出了服务器地址和端口的配置。具体使用时请根据自身服务器的特点做出适应修改。
1

//屏幕截图的server端文件所在的网站地址或者ip，请不要加http://
snapscreenHost: ‘127.0.0.1’,

//屏幕截图的server端保存程序，UEditor的范例代码为“URL
snapscreenServerUrl: URL +“server/upload/php/snapImgUp.php”, +“server/upload/php/snapImgUp.php””

//屏幕截图的server端端口
snapscreenServerPort: 80,

//截图的图片默认的排版方式
snapscreenImgAlign: ‘center’,

//截图显示修正地址
snapscreenPath: fixedImagePath,

七、附件上传交互
1、附件上传注意事项
附件上传的基本配置跟图片类似。另外，由于附件上传采用了相当成熟的swfupload开源框架，因此大部分的文档和资料尽可参考swfupload的官网教程。官网地址：http：//www.swfupload.org

http://www.qdexun.cn/jsp/news/sh … lAction&id=1459

http://ueditor.baidu.com/website/document.html

百度富文本编辑器UEditor安装配置全过程

http://www.ly89.cn/detailB/50.html

网站开发时富文本编辑器是必不可少的，他可以让用户自行编辑内容的样式然后上传到后台！下面我们来介绍如何安装使用百度富文本编辑器！

一、下载并且设置百度富文本编辑器的样式
你可以去百度UEditor的官网去下载编辑器，网址是http://ueditor.baidu.com/website/，下载下来之后看到有一个demo.html文件，所以你网页上面也得引入demo.html里面引入的所有js文件
百度富文本编辑器UEditor安装配置全过程
这是在header里面引入
百度富文本编辑器UEditor安装配置全过程
这是放在你网页上面需要放置编辑器的位置
百度富文本编辑器UEditor安装配置全过程
看这样百度富文本编辑器就出来啦，然后你可以编辑编辑器的样式，推荐使用火狐浏览器的firebug工具查看编辑器的代码然后设置样式！如下，
百度富文本编辑器UEditor安装配置全过程
例如我想要缩短编辑器的长度并且居中你就可以这样写css（注意引入css哦！）
1
2
3
4
#container {
width:90%;
margin:0 auto;
}

二、设置百度UEditor文件上传路径
百度富文本编辑器UEditor默认上传的文件都在ueditorphpupload文件夹下，这样对于我们网站开发肯定是不方便的，所以我们得更改上传文件目录！打开umphpconfig.json文件，里面都各种文件上传目录配置！
例如我想更改图片上传的目录，找到带有 “/* 上传图片配置项 */”下面的代码，然后找到imagePathFormat配置，可以将“/ueditor/php/upload/image/”修改成你想要上传到的文件目录，注意后面的“{yyyy}{mm}{dd}/{time}{rand:6}”不用更改，它可以自己生成分类文件夹！大家可以参照一下我的配置

1
“imagePathFormat”: “Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
其他的文件上传也可以参照图片上传都是改变imagePathFormat的属性，而且在PHP中只需要改变这一个属性！

三、将百度UEditor提交到后台
将在百度富文本编辑器UEditor中编辑的内容提交到后台，后台怎么接收呢？其实这就跟一个form表单提交一样，你可以吧整个百度UEditor看做一个textarea

百度富文本编辑器UEditor安装配置全过程
这是要在网页上面编辑器的位置添加的一部分代码，大家有没有发现script标签有一个name属性，所有后台就直接可以$_POST[‘content’]接收就好啦，当然你也可以用其他name名称试试！

四、在前台显示百度UEditor编辑的代码样式
百度富文本编辑器UEditor带有插入代码的功能，也就是你在后台选择一种代码语言，然后在里面写入代码，前台可以给代码高亮显示，便于用户阅读代码，可以增加用户体验！

百度富文本编辑器UEditor安装配置全过程

大家可以看看看代码高亮的样式

百度富文本编辑器UEditor安装配置全过程

但是这需要前台引入其他的js和css文件才可以启动代码高亮功能，所以前台引入代码如下
百度富文本编辑器UEditor安装配置全过程

基本的百度富文本编辑器UEditor安装配置就到这里啦，如果大家还有什么问题可以联系我，大家一起交流学习！

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/50.html
欢迎分享本文，转载请注明本文出处和地址

三个人工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度编辑器教程 ueditor

http://ueditor.baidu.com/website/document.html百度UEditor编辑器使用教程与使用方法我们在做网站的时候，网站后台系统一般都会用到web编辑器，今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度UEditor编辑器官网上也有简单的教程，不过看着比较费劲，今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法，希望对大家有所...
复制链接

扫一扫