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教學有興趣的朋友有所幫助。