首頁  >  文章  >  後端開發  >  百度ueditor 上傳圖片後如何設定樣式

百度ueditor 上傳圖片後如何設定樣式

WBOY
WBOY原創
2016-08-08 09:33:071317瀏覽

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量級,可定制,注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼,涵蓋流行富文本編輯器特色功能,獨創多種全新編輯操作模式。

下面看看UEditor上傳圖片後,在內容展示會修改圖片樣式。但是表情也是img標籤,所以全域修改是有問題的,

所以只能著手修改一下插件的程式碼。

首先找到圖片上傳的伺服器段檔案。這裡主要是php講解

找到php目錄下Uploader.class.php 337行

public function getFileInfo()
   {
       return array(
           "state" => $this->stateInfo,
           "url" => $this->fullName,
           "title" => $this->fileName,
           "original" => $this->oriName,
           "type" => $this->fileType,
	   "class"=> "aaa"
           "size" => $this->fileSize,

       );
   }

這樣回傳的json 多一個class 屬性的值

 

一種是修改js

找到ueditor.all.js 中 24461 如下程式碼

修改js

function callback(){
try{
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;
if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('class', json.class || ''); //添加行代码
loader.setAttribute('title', json.title || '');
loader.setAttribute('alt', json.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe, 'load', callback);
}

 

這樣上傳下圖片你就能看見上傳的圖片都多了個樣式。

以上就介紹了百度ueditor 上傳圖片後如何設定樣式,包含了百度ueditor方面的內容,希望對PHP教學有興趣的朋友有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn