类百度富文本编辑器文件上传。

在项目安开发中，有一个需求是用户需上传特定的text文件，根据此文件判断设备的状态。

以上是需求，此时需要在页面上用到文件上传的功能，原始的文件上传样式不好看，自己此段时间一直都在用layui前端框架写页面，本想用layui官网上给的文件上传功能的，但是经理说上传的文件不能只显示文件名，

还要配上一张图片。layui上传文件的模式都是：

类百度富文本编辑器文件上传。

显然这个版本的文件上传还没有符合项目的需要。

在接下来的对比中，看到了百度富文本编辑器的文件上传和图片上传样式：
类百度富文本编辑器文件上传。

因为这个功能是在百度富文本编辑器工具栏中的，想要用这个功能，第一就是需要中上传文件是在编辑内容的情况下，配置百度富文本自定义上传。第二就是看它的源码，自己分析把这个功能剥离出来。

无奈里面的配置信息有点多，只好在网上查看相关的类百度富文本编辑器上传单独使用的功能，看到了一篇文章正是讲单独使用百度富文本编辑器文件上传和图片上传的。具体是看谁的博客的我也给忘了，反正是按照Ta说的自己动手试了试还可以，

在这里先简单说下实现过程：

首先下载百度富文本，下载完解压后放在自己web项目webapps下面。

类百度富文本编辑器文件上传。

接下来是写一个简单的demo.jsp页面：

类百度富文本编辑器文件上传。

一定要引入相应的ueditor.config.js和ueditor.all.js。

原文上是写的附件上传和图片上传两个的，但是用于需要，我只测试了附件上传，所以这里的代码也都是针对附件上传的。

处理相应的js配置：

类百度富文本编辑器文件上传。

js代码为：

 1 <script type="text/javascript">
 2  
 3     // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
 4  var uploadEditor = UE.getEditor("uploadEditor", {
 5         isShow: false,
 6         focus: false,
 7         enableAutoSave: false,
 8         autoSyncData: false,
 9         autoFloatEnabled:false,
10         wordCount: false,
11         sourceEditor: null,
12         scaleEnabled:true,
13         toolbars: [["attachment"]]
14     });
15  
16     // todo::some code
17  
18 </script>
19 <script type="text/javascript">
20 uploadEditor.ready(function () {
21     // 监听插入附件
22     uploadEditor.addListener("afterUpfile",_afterUpfile);
23 });
24 
25 document.getElementById('j_upload_file_btn').onclick = function () {
26     var dialog = uploadEditor.getDialog("attachment");
27     dialog.title = '附件上传';
28     dialog.render();
29     dialog.open();
30 };
31 
32 function _afterUpfile(t, result) {
33     var fileHtml = '';
34     for(var i in result){
35         fileHtml = '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
36     }
37     document.getElementById('upload_file_wrap').innerHTML = fileHtml;
38 }
39 </script>

View Code