重写附件功能

static/css/markdown.css

@@ -195,8 +195,6 @@ body{
     font-style: normal;
 }
 
-
-
 .manual-editor-status{
     position: absolute;
     left: 0;
@@ -208,4 +206,100 @@ body{
     color: #555;
     background-color: #FAFAFA;
     z-index: 1000;
-}
+    line-height: 30px;
+}
+.manual-editor-status .item{
+    display: inline-block;
+    margin-right: 10px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+.attach-drop-panel{
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+.attach-drop-panel .webuploader-element-invisible{
+    width: 500px;
+    height: 100px;
+    position: absolute;
+    top: 0;
+
+}
+.attach-drop-panel .webuploader-pick{
+    color: #ccc;
+    text-align: center;
+    margin: 20px 20px 15px!important;
+    padding: 5px!important;
+    font-size: 65px;
+    cursor: pointer;
+    border: 2px dotted #999;
+    display: block!important;
+    background: #ffffff;
+}
+.attach-drop-panel .webuploader-pick:hover{
+    color: #333;
+    border-color: #333;
+}
+.attach-list{
+
+    background:#ffffff;
+    font-size: 12px;
+}
+.attach-list .attach-item{
+    padding: 8px 10px;
+    line-height: 36px;
+    border: 1px solid #ddd;
+    border-bottom: none;
+    border-top-left-radius:3px;
+    border-top-right-radius:3px;
+}
+.attach-list .attach-item:last-child{
+    border-bottom: 1px solid #ddd;
+    border-bottom-left-radius:3px;
+    border-bottom-right-radius:3px;
+}
+.attach-list .attach-item .progress{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    height: 10px;
+}
+.attach-list .attach-item .form-control{
+    width: 60%;
+    float: left;
+}
+
+.attach-list .attach-item .text{
+    display: inline-block;
+    padding: 0 15px;
+}
+.attach-list .attach-item .close{
+    float: right;
+    display: inline-block;
+    padding: 8px 0;
+    color: #586069;
+    background: #ffffff;
+    font-size: 16px;
+}
+.attach-list .attach-item .close:hover {
+    color: #333;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

static/js/editor.js

@@ -140,6 +140,23 @@ function pushDocumentCategory($node) {
     }
     window.documentCategory.push($node);
 }
+/**
+ * 将数据重置到Vue列表中
+ * @param $lists
+ */
+function pushVueLists($lists) {
+    for(var i in window.vueApp.lists){
+        var item = window.vueApp.lists[i];
+        window.vueApp.lists.$remove(item);
+    }
+
+    for(var j in $lists){
+        var item = $lists[j];
+        window.vueApp.lists.push(item);
+    }
+    console.log(window.vueApp.lists)
+    $("#attachInfo").text(" " + window.vueApp.lists.length + " 个附件")
+}
 
 //实现小提示
 $("[data-toggle='tooltip']").hover(function () {

static/js/html-editor.js

@@ -1,16 +1,17 @@
 $(function () {
-
+    wangEditor.config.mapAk = window.baiduMapKey;
     window.addDocumentModalFormHtml = $(this).find("form").html();
     wangEditor.config.printLog = false;
     window.editor = new wangEditor('htmlEditor');
     editor.config.uploadImgUrl = window.imageUploadURL;
-    editor.config.uploadImgFileName = "editormd-file-file";
+    editor.config.uploadImgFileName = "editormd-image-file";
     editor.config.uploadParams = {
         "editor" : "wangEditor"
     };
     wangEditor.config.menus.splice(0,0,"|");
     wangEditor.config.menus.splice(0,0,"save");
     wangEditor.config.menus.splice(0,0,"release");
+    wangEditor.config.menus.splice(29,0,"attach")
 
     //移除地图、背景色
     editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
@@ -81,6 +82,8 @@ $(function () {
                 pushDocumentCategory(node);
                 window.selectNode = node;
 
+                pushVueLists(res.data.attach);
+
             }else{
                 layer.msg("文档加载失败");
             }

static/wangEditor/plugins/attach-menu.js

@@ -0,0 +1,47 @@
+(function () {
+
+    // 获取 wangEditor 构造函数和 jquery
+    var E = window.wangEditor;
+    var $ = window.jQuery;
+
+    // 用 createMenu 方法创建菜单
+    E.createMenu(function (check) {
+
+        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
+        var menuId = 'attach';
+
+        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
+        if (!check(menuId)) {
+            return;
+        }
+
+        // this 指向 editor 对象自身
+        var editor = this;
+
+        // 创建 menu 对象
+        var menu = new E.Menu({
+            editor: editor,  // 编辑器对象
+            id: menuId,  // 菜单id
+            title: '附件', // 菜单标题
+
+            // 正常状态和选中状态下的dom对象，样式需要自定义
+            $domNormal: $('<a href="#" tabindex="-1"><i class="fa fa-paperclip" aria-hidden="true" name="release"></i></a>'),
+            $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="fa fa-paperclip" aria-hidden="true" name="release"></i></a>')
+        });
+
+
+        // 菜单正常状态下，点击将触发该事件
+        menu.clickEvent = function (e) {
+            $("#uploadAttachModal").modal("show");
+        };
+
+
+        // 菜单选中状态下，点击将触发该事件
+        menu.clickEventSelected = function (e) {
+
+        };
+        // 增加到editor对象中
+        editor.menus[menuId] = menu;
+    });
+
+})();