内容简介：百度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.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>
<textarea name=" 后台取值的 key" id="myEditor"> 这里写你的初始化内容 </textarea>
<script type="text/javascript">
var editor = new UE.ui.Editor();
editor.render("myEditor");
//
//UE.getEditor(’myEditor’)
</script>
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
*
* set window.UMEDITOR_HOME_URL = "/ueditor/";
*
* */
window.UMEDITOR_HOME_URL = "/ueditor/"; // 注意就是这里！
var URL = window.UMEDITOR_HOME_URL || (function(){
function PathStack() {
/**
* 开发版本的文件导入
*/
(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
*
* 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
* @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 便在我的环境中配置成功了。
上一篇： 如何有效降低企业网站降权风险 下一篇： 我们的网站排名凭什么能超越对手
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 使用 Vi/Vim 编辑器：基础篇
- Android开发 - 使用ConstraintLayout（三）编辑器
- 最强编辑器 PyCharm 最全使用指南！
- WordPress 4.9.8 发布，呼吁使用「古腾堡」编辑器
- 使用 CodeMirror 打造属于自己的在线代码编辑器 荐
- 代码编辑器Sublime_Text3的使用
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
