UEditor的配置和使用(单独图片与文件上传)

UEditor配置与使用

一.准备

1.下载
前往UEditor官网下载最新版,分为php,asp,jsp和.net四种版本,当然也可以直接下载完整版,这里以jsp为例

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

2.部署
直接拷贝ueditor目录到项目根目录下,打开ueditor/jsp/lib,将里面的jar包拷贝到WEB-INF/lib目录下
这里要注意和原本的jar包之前可能会发生版本冲突,请自行选择

3.测试
按照下列代码,引入ueditor.config.js和ueditor.all.js两个文件,初始化文本或者定义文本域都可以,实例化编辑器.如果看到ueditor编辑器说明部署成功.

    <script id="container" name="content" type="text/plain"> 这里写你的初始化内容 script>
    
    <script type="text/javascript" src="ueditor.config.js">script>
    
    <script type="text/javascript" src="ueditor.all.js">script>
    
    <script type="text/javascript"> var ue = UE.getEditor('container'); script>

二.基本使用

基本使用文档已经说的很清楚了,不在累述

详情见文档:http://fex.baidu.com/ueditor/

三.常用使用配置

1.图片上传配置
ueditor/jsp/config.json,这里是一些配置信息,如果你希望使用图片上传功需要对此做一些配置.

//这里是配置图片的访问路径,一般会填写工程的项目名称,比如/News
"imageUrlPrefix": "",

//这里是配置图片的是图片的存储路径,建议改成根目录下某个文件夹,便于管理,例如/resource/image/,后面的是文件名,这个看源码下的注释就好了
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

2.调整编辑器层次
在使用easyui+ueditor的时候,经常点击按钮但是没有窗口,这是因为其他窗口遮挡了ueditor的窗口,可以通过调整编辑器层次来解决,打开ueditor/ueditor.config.js

//这里是调整编辑器层次,默认为990,将之改成9999即可
,zIndex : 9999,

3.单独使用ueditor的图片上传
很多时候我们只需要使用到图片上传功能,这时候可以进行一下配置
首先打开uditor/dialogs/image/image.js,定位editor.execCommand,做以下修改

editor.fireEvent('beforeinsertimage',list);//增加这句,不然无法触发事件
editor.execCommand('insertimage', list);

然后,建一个demo.jsp,如下

<input type="text" id="image" name="image">
<a href="javascript:void(0)" onclick="upImage()">上传图片a><br>
<img id="showImage" src="style/img/noimg.png">


<textarea id="uploadImage">textarea>

<script type="text/javascript"> var _editor = UE.getEditor("uploadImage",{ initialFrameWidth:800, initialFrameHeight:300, }); _editor.ready(function (){ //设置编辑器不可用(事实上不可以设置不可用...所以注释掉,以观后效) //_editor.setDisabled(); //隐藏编辑器,因为只使用上传功能 _editor.hide(); //侦听图片上传 _editor.addListener('beforeInsertImage',function(t,arg){ //将图片地址赋给input $("#image").attr("value",arg[0].src); //将图片地址赋给img的src,实现预览 $("#showImage").attr("src",arg[0].src); }); }); //上传dialog function upImage(){ var myImage = _editor.getDialog("insertimage"); myImage.open(); } script>

这里可能会出现能上传图片,也能在预览里看见,但是无法input无法获取图片地址,可以尝试

//$("#image").attr("value",arg[0].src);//注释掉这行
$("#image").val(arg[0].src); //添加这行....感觉一样,但是有时能解决

4.单独使用ueditor的文件上传
首先,在ueditor/dialogs/attachment/attachment.js里,定位editor.execCommand,做以下修改

editor.fireEvent('afterUpfile', filesList);//添加这句话
editor.execCommand('insertfile', list);

然后,创建demo.jsp,如下

文件：<input type="text" id="file" />
<a href="javascript:void(0);" onclick="upFiles();">上传文件a>


<textarea id="uploadFile">textarea>

<script type="text/javascript"> var _editor = UE.getEditor("uploadFile",{ initialFrameWidth:800, initialFrameHeight:300, }); _editor.ready(function () { //设置编辑器不可用(事实上不可以设置不可用...所以注释掉,以观后效) //_editor.setDisabled(); //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏 _editor.hide(); //侦听文件上传 _editor.addListener('afterUpfile', function (t, arg) { $("#file").attr("value", _editor.options.filePath + arg[0].url); }) }); //弹出文件上传的对话框 function upFiles() { var myFiles = _editor.getDialog("attachment"); myFiles.open(); } script>

5.使用ueditor图片的在线管理功能
使用过图片上传会知道UEditor还有一个在线管理功能,就是可以看到上传的图片列表,但是事实上这个功能有个bug

building