怎么使用百度编辑器

我们在做网站的时候，网站后台系统一般都会用到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.config.js"></script>

<!--使用版-->

<!--<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容器，示例代码如下：

<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>

<script type="text/javascript">

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

editor.render("myEditor");

//1.2.4以后可以使用一下代码实例化编辑器

//UE.getEditor(’myEditor’)

</script>

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

官网示例：

(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便在我的环境中配置成功了。

时间： 2024-10-24 20:52:43

怎么使用百度编辑器的相关文章

百度编辑器序号和项目符号不能显示解决

在做论坛.个人网站.办公OA,对于富文本编辑器的使用,业界使用最多.最好的应该是百度编辑器.在使用百度编辑器做富文本编辑,碰到序号.项目符号,在个性化页面展示不能显示的问题.简单分析下,将百度编辑器,编辑后的HTML存储,再用于个性化页面显示,对于指定序号和项目符号显示没有相关的样式.那解决起来就比较简单了,把相关的样式在个性化页面单独添加引用就可以了. 一.查看是什么样式: 二.个性化页面添加list-style-type样式 通过w3school 找到, list-style-type介绍,

jsp 百度编辑器配置 整合springmvc注意细节

百度配置器中默认处理的action可以处理各种请求不需要自己在单独写,尽量不要破坏百度编辑器中自带的jsp demo  我们可以直接使用 参数配置 前后端的配置统一写在后端(PHP版本的config在php/config.json),编辑器实例化时,异步读取后端配置信息,覆盖到前端的配置里. 后端获取的配置项 > 实例化传入的配置项 > ueditor.config.js文件的配置项. 我们需要配置的部分是 1.ueditor.config.js 中入口的位置 // 服务器统一请求接口路径,如

thinkphp 对百度编辑器里的内容进行保存

模板代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加载编辑器的容器 --> <script id="container" name="co

百度编辑器ueditor的图片地址修正

我用的百度编辑器为1.4.2的,相对于现在这个时间来说是比较新的.之前去的1.3版的,后来更新到1.4之后出现路径问题.因为今天晚上出现特别奇怪的问题,所以特地又整了一遍,发现这玩意还是得自己弄通了好好使.今晚出现的问题是,本机win7可以正常上传,线上centos可以正常上传,测试机是ios的,前几天还可以正常上传,今晚不知道怎么回事,文件上传目录,确认不是权限问题,很奇怪. # 这个是定义百度编辑器的根目录.考虑到安全问题,只能写http://...这种host格式的绝对路径,不能将你项目的

百度编辑器UEditor PHP版下载

Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制. Ueditor编辑器划分为了三层架构.其中,核心层为开发者提供了诸如range.selection.domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可

百度编辑器（UEditor）自定义工具栏

百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何自定义工具栏: 方法一:在实例化编辑器的时候红色文字部分便是你所需要的 1 <script type="text/Javascript"> 2 var editor = UE.getEditor('container',{ 3 //这里可以选择自己需要的工具按钮名称,此处仅选择

dedecms织梦添加ueditor百度编辑器(支持本地图片水印)

本站所有附件均为UTF-8版本,GBK版本的童学请自行转码: 教程最下面有解决栏目内容添加失败的解决方法和本地上传图片加水印方法. 最终效果 1.直接到百度编辑器官方下载PHP对应的版本 ueditor官方地址:http://ueditor.baidu.com/website/download.html 2.dedecms 程序 include文件夹下,创建 ueditor 文件夹 把下载到的ueditor文件扔进去(index.html不要) 3.include\inc\inc_fun_fun

【ci框架基础】之部署百度编辑器

在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将ueditor复制到ci框架的根目录下. 下载好的编辑器目录为:-ueditor----dialogs     弹出对话框对应的资源和JS文件----lang        编辑器国际化显示的文件----php         涉及到服务器端操作的后台文件----themes      样式图片和样式文件-

引入百度编辑器

在编辑详细信息是可以引入高级的编辑器,例如:百度编辑器, 百度编辑器有很多功能,可以编辑文字的样式,也可以插入图片,编辑涂鸦等功能 首先要下载ueditor文件,也就是编辑器文件,在ueditor.baidu.com目录下下载 下载后将文件放在自己的服务器目录下,改名为ueditor 然后创建HTML文件,引入两个js文件,uditor.config.js和uditor.all.js <script type="text/javascript" src='ueditor/uedi

百度编辑器Ueditor的简单调用

先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.UEDITOR_HOME_URL='__ROOT__/Data/Uedit