UEditor配置與使用

一.準備

1.下載
前往UEditor官網下載最新版,分為php,asp,jsp和.net四種版本,當然也可以直接下載完整版,這裡以jsp為例

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>

二.基本使用

基本使用文件已經說的很清楚了,不在累述

三.常用使用配置

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