ueditor百度编辑器上传PDF并显示

百度编辑器不止可以上传图片和文字,还可以上传文件,但是文件是当成附件来显示的,并不可以直接显示文件的内容,就像下面:

附件显示

这样子来说,对于PDF的文件支持性就不是很好了,所以,可以稍微改造一下,让其可以直接显示我们上传的PDF文档的内容

首先,得解决上传文件的问题,附件的上传按钮如下图:

附件按钮

点击以后,可以上传文件,也可以在已上传的文件中选择:

上传文件


已上传的文件

假如没有这个按钮,则可以去看看是否生成编辑器的时候隐藏了此工具,如果是直接实例化的编辑器,可以在 ueditor 下的 ueditor.config.js 文件里找一下下图,看看是否有此工具:attachment

ueditor.config.js

同样的,假如是在配置ueditor的时候写过工具栏,可以看看是否有在工具栏里加了这个,这个就不贴图了。


默认来说,附件的上传都会允许PDF的文件格式,但假如不支持,打开 ueditor/php/config.json  进行配置的修改添加

config.json

上传图片和文件的功能我就不在这里重复了,网上都有,或者看看我之前上传的文档 tp5插入百度富文本编辑器UEditor


接下来是重点,修改 ueditor.all.js 文件,重新编写上传PDF文档后的html,搜索:插入附件

ueditor.all.js

并修改代码:

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.all.js


这样还不行,ueditor编辑器是会屏蔽 iframe 标签的,所以,我们得把 iframe 标签加入白名单,白名单的操作也在 ueditor.config.js


ueditor.config.js

添加这行代码,,[ ]里是 iframe 标签的属性值,你可以看着修改

iframe: ['src', 'width', 'height', 'style'],


一切都修改好了以后,别忘了保存并清除浏览器的缓存,接着,就是见证奇迹的时刻!!


PDF

资料参考自http://quanzhan.applemei.com/webStack/TWpBME9RPT0=

ueditor富文本上传pdf并能实时预览


以上。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容