本实例采用百度编辑器版本:ueditor1_3_6-utf8-php 版。
下载下来的目录结构如下:
- dialogs-----------------各种弹出窗口
- themes---------------模板文件夹
- lang--------------- 语言包,
- php---------------------php后台接口(处理文件、视频、图片、远程图片上传)
- third-party-------------第三方插件
- ueditor.all.js------------全局js
- ueditor.config.js------------供用户配置参数的js
- ueditor.parse.js--------------编辑器 函数库js
1、编辑器默认把图片、附件等上传到php/upload目录下,这样的结果通常不是我们想要的,大部分web程序都有一个统一的存放附件文件的目录。因此,需要做一些配置,让上传的附件能传到想要的目录下。
2、打开ueditor.config.js ,在定义变量 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
下增加一个 变量,var upfileroot = '';因为有好几个地方要用到这个变量,所以定义成了一个变量,方便以后修改。
3、查找到以下的地方,依次修改:
,imagePath:URL + "php/" // 改成
,imagePath:upfileroot //URL + "php/"
,scrawlPath:URL+"php/" //改成
,scrawlPath:upfileroot //URL+"php/" ;
有附件上传的几个地方 都做这样的修改。
4、修改php 文件里的文件
把 上传文件修改到您想要的目录下;
php代码 放到压缩包里,里面还加入图片同步上传到阿里云oss存储空间代码。
5、在页面中加入编辑器
首先在页面头部 加入:
<script type="text/javascript" charset="utf-8">
//window.UEDITOR_HOME_URL = "/webroot/admin/style1/skin/ueditor/";
window.UEDITOR_HOME_URL ="/webroot/public_psp/style1/ueditor/";
</script>
<script type='text/javascript' src="ueditor/editor_config.js?p=20140304"></script>
<script type="text/javascript" src="ueditor/editor_all.js?p=20140304"></script>
在 需要加入编辑器的html 代码中
<script name="myContent" id="editor" type="text/plain"><?=$info2[content]?></script>
官方推荐用script标签代替textarea,道理我也没弄清楚。这里无所谓,只要id 正确,用哪种标签都可以;
6、实例化编辑器
//实例化编辑器
var ue = UE.getEditor('editor');
ue.addListener('ready',function(){
// this.focus()
});