百度UEditor编辑器使⽤教程与使⽤⽅法（图⽂）
我们在做⽹站的时候，⽹站后台系统⼀般都会⽤到web编辑器，今天笔者就给⼤家推荐⼀款百度UEditor编辑器。关于这款百度UEditor编辑器官⽹上也有简单的教程，不过看着⽐较费劲，今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法，希望对⼤家有所帮助。
第⼀：百度UEditor编辑器的官⽅下载地址
第⼆：百度UEditor编辑器的功能版本选择
当我们进⼊百度UEditor编辑器官⽹点击下载选项后，我们发现⼀共有两个版本供我们选择，⼀个是UBuilder,⼀个是开发版，通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。⼀般情况下我们选择UBuilder版本即可。
跟我们以往下载软件的⽅式不同，UEditor采⽤选择性下载。⾸先是可见功能的选择，共有基本，插⼊，格式化，表格四⼤组，每组下⾯都有若⼲功能按钮，我们可以根据⾃⼰的需求来进⾏选择，如果双击四⼤组则表⽰全选该组按钮。如果对选择的按钮不满意还可以点击清空选择，有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。
接着就是隐藏功能，语⾔，服务端版本的选择，隐藏功能默认的是全选，如⾮必要还是不要更改为好。语⾔选项共分为了中⽂和英⽂两种，默认的是只下载中⽂语⾔包，如果你有需要⽤到英⽂的话可以把英⽂包也加上。服务端版本⽬前提供了三种，分别为PHP，.NET，JSP，选择完毕后我们就可以点击下载资源包了。
第三：百度UEditor编辑器的配置⽅法技巧
1、从官⽹上下载完整源码包，解压到任意⽬录，解压后的源码⽬录结构如下所⽰：
_examples：编辑器完整版的⽰例页⾯
dialogs：弹出对话框对应的资源和JS⽂件
themes：样式图⽚和样式⽂件 php/jsp/：涉及到服务器端操作的后台⽂件，根据你选择的不同后台版本，这⾥也会不同，这⾥我们选择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="../fig.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();
//1.2.4以后可以使⽤⼀下代码实例化编辑器
//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 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、⽂件上传问题：
打开fig.js，可以看到如下配置：
//图⽚上传
配置区
,imageUrl:URL+"php/imageUp.php" //图⽚上传提交地址
//,imagePath:URL + "php/" //图⽚修正地址，引⽤了fixedImagePath，如有特殊需求，可⾃⾏配置
,imagePath:"test.mathandcs/"
,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" , ".png" , ".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 = place(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便在我的环境中配置成功了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论