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,如下

<!-- 略去引入js -->
<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,如下

<!-- 略去引入js -->

文件：<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

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

UEditor配置与使用

一.准备

二.基本使用

三.常用使用配置

猜你喜欢