百度編輯器不止可以上傳圖片和文字惶室,還可以上傳文件,但是文件是當(dāng)成附件來顯示的玄货,并不可以直接顯示文件的內(nèi)容皇钞,就像下面:
這樣子來說,對于PDF的文件支持性就不是很好了松捉,所以贡蓖,可以稍微改造一下苞慢,讓其可以直接顯示我們上傳的PDF文檔的內(nèi)容
首先艰毒,得解決上傳文件的問題朝扼,附件的上傳按鈕如下圖:
點擊以后,可以上傳文件以舒,也可以在已上傳的文件中選擇:
假如沒有這個按鈕趾痘,則可以去看看是否生成編輯器的時候隱藏了此工具,如果是直接實例化的編輯器蔓钟,可以在 ueditor 下的 ueditor.config.js 文件里找一下下圖永票,看看是否有此工具:attachment
同樣的,假如是在配置ueditor的時候?qū)戇^工具欄滥沫,可以看看是否有在工具欄里加了這個侣集,這個就不貼圖了。
默認來說兰绣,附件的上傳都會允許PDF的文件格式世分,但假如不支持,打開 ueditor/php/config.json? 進行配置的修改添加
上傳圖片和文件的功能我就不在這里重復(fù)了缀辩,網(wǎng)上都有臭埋,或者看看我之前上傳的文檔?tp5插入百度富文本編輯器UEditor
接下來是重點踪央,修改 ueditor.all.js 文件,重新編寫上傳PDF文檔后的html瓢阴,搜索:插入附件
并修改代碼:
if(title.indexOf("pdf")>0){
? ??html +='<iframe style="width: 100%;height: 600px;border: 0px;overflow: hidden" width="100%" height="500px" src="'+item.url+'"></iframe>';
}else{
? ??html += '<p style="line-height: 16px;">' + '<img style="vertical-align: middle; margin-right: 2px;" src="'+ icon + '" _src="' + icon + '" />' + '<a style="font-size:12px; color:#0066cc;" href="' + item.url +'" title="' + title + '">' + title + '</a>' + '</p>';
}
這樣還不行畅蹂,ueditor編輯器是會屏蔽?iframe?標簽的,所以荣恐,我們得把 iframe 標簽加入白名單液斜,白名單的操作也在 ueditor.config.js 里
添加這行代碼,叠穆,[ ]里是 iframe 標簽的屬性值少漆,你可以看著修改
iframe: ['src', 'width', 'height', 'style'],
一切都修改好了以后,別忘了保存并清除瀏覽器的緩存痹束,接著检疫,就是見證奇跡的時刻!祷嘶!
資料參考自:http://quanzhan.applemei.com/webStack/TWpBME9RPT0=
以上。