1. 程式人生 > >百度富文字編輯器(ueditor)自定義上傳介面(路徑)

百度富文字編輯器(ueditor)自定義上傳介面(路徑)

只針對 1.4.3 jsp 版本其他版本估計也差不多,剛開始上傳圖片各種錯誤,又是配路徑又是導jar包啥的,這都不說了,作為一個前端真的不太會玩這些java的東西,剛好同事搞過,把他的搬來用,他的版本很低1.3.6,高了半天上傳上去是自定義的一個資料夾,就存在tomcat下面的,而我要的是上傳我們的後臺介面,又換成我的版本,搜了很久終於找到正確方法;

主要改三個地方:
1、例項化之前複寫官方的方法 :

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function
(action) {
if (action == 'uploadimage' || action == 'uploadscrawl') { return 'http://192.168.100.162:8080/laobingmng/common/upload.do';//這就是自定義的上傳地址 } else if (action == 'uploadvideo') { return ''; } else { return this._bkGetActionUrl.call(this, action); } }

2、改config.json,就是那個imageFieldName,跟你介面要的一致即可,其他不用改
這裡寫圖片描述

3、改主框架的上傳完成的回到函式,主要是我伺服器返回的資料跟他的條件判斷對不上,上傳圖片沒新增進去,因為原來的資料結構可能跟你的資料結構不一樣,所以你要改一下 ueditor.all.js 裡面的程式碼,我的版本大概在 24518 行,一個叫 callback 的函式

//此處省略數行程式碼
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result =
body.innerText || body.textContent || ''; json = (new Function("return " + result))(); //link = me.options.imageUrlPrefix + json.url;這一行就是官方的程式碼,我改成了下面一句,具體請參考自己資料格式改寫 link = typeof json.data!="undefined"? json.data.url:"http://"+location.hostname+':'+location.port+json.url; if((json.state == 'SUCCESS' && json.url) || json.code==200) { loader = me.document.getElementById(loadingId); loader.setAttribute('src', link); loader.setAttribute('_src', link); loader.setAttribute('title', json.title || ''); loader.setAttribute('alt', json.original || ''); loader.removeAttribute('id'); domUtils.removeClasses(loader, 'loadingclass'); } else { showErrorLoader && showErrorLoader(json.state); }

看下圖
這裡寫圖片描述

以上步驟完成後就可以愉快使用編輯器了
附上自己的功能配置

var config = {
        toolbars: [
            ['fullscreen','undo', 'redo','anchor', //錨點
        'bold', //加粗
        'indent', //首行縮排
        'italic', //斜體
        'underline', //下劃線
        'strikethrough', //刪除線
        'subscript', //下標
        'fontborder', //字元邊框
        'superscript', //上標
        'formatmatch', //格式刷
        'pasteplain', //純文字貼上模式
        'selectall', //全選
        'horizontal', //分隔線
        'removeformat', //清除格式
        'time', //時間
        'date', //日期
        'unlink', //取消連結
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合併單元格
        'mergedown', //下合併單元格
        'deleterow', //刪除行
        'deletecol', //刪除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分單元格
        'deletecaption', //刪除表格標題
        'inserttitle', //插入標題
        'mergecells', //合併多個單元格
        'deletetable', //刪除表格
        ],['cleardoc', //清空文件
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //程式碼語言
        'fontfamily', //字型
        'fontsize', //字號
        'paragraph', //段落格式
        'simpleupload', //單圖上傳
        //'insertimage', //多圖上傳
        'edittable', //表格屬性
        'edittd', //單元格屬性
        'link', //超連結
        'emotion', //表情
        'spechars', //特殊字元
        'searchreplace', //查詢替換
        'map', //Baidu地圖
        'insertvideo', //視訊
        'justifyleft', //居左對齊
        'justifyright', //居右對齊
        'justifycenter', //居中對齊
        'justifyjustify', //兩端對齊
        'forecolor', //字型顏色
        ],['backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //無序列表
        'rowspacingtop', //段前距
        'rowspacingbottom', //段後距
        'pagebreak', //分頁
        'imagenone', //預設
        'imageleft', //左浮動
        'imageright', //右浮動
        //'attachment', //附件
        'imagecenter', //居中
        'wordimage', //圖片轉存
        'lineheight', //行間距
        'edittip ', //編輯提示
        'customstyle', //自定義標題
        'autotypeset', //自動排版
        'touppercase', //字母大寫
        'tolowercase', //字母小寫
        'background', //背景
        'template', //模板
        'scrawl', //塗鴉
        'music', //音樂
        'inserttable', //插入表格
        'print', //列印
        'preview', //預覽
        ]
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true,
        wordCount:false,
        elementPathEnabled:false,
        initialFrameHeight:330,
        initialFrameWidth:750
        }