图片可以粘贴上传/点击可放大查看图片

Application/Home/Controller/PageController.class.php

@@ -239,6 +239,9 @@ class PageController extends BaseController {
     //上传图片
     public function uploadImg(){
         $qiniu_config = C('UPLOAD_SITEIMG_QINIU') ;
+        if ($_FILES['editormd-image-file']['name'] == 'blob') {
+            $_FILES['editormd-image-file']['name'] .= '.jpg';
+        }
         if (!empty($qiniu_config['driverConfig']['secrectKey'])) {
           //上传到七牛
           $Upload = new \Think\Upload(C('UPLOAD_SITEIMG_QINIU'));

Public/js/item/show.js

@@ -295,6 +295,28 @@ function iFrameHeight() {
     return false;
   });
   
+  //监听来自iframe的消息。如果传递图片url过来则默认打开之
+  window.addEventListener('message', function(e){
+     var img_url =e.data;
+      var json = {
+          "title": "", //相册标题
+          "id": 123, //相册id
+          "start": 0, //初始显示的图片序号，默认0
+          "data": [   //相册包含的图片，数组格式
+              {
+                "alt": "",
+                "pid": 666, //图片id
+                "src": img_url, //原图地址
+                "thumb": img_url //缩略图地址
+              }
+            ]
+          }
+        layer.photos({
+          photos: json
+          ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
+        });
+  }, false);
+  
 })
 
 

Public/js/item/show_single_page.js

@@ -1,97 +1,128 @@
+$(function() {
+  hljs.initHighlightingOnLoad();
 
-$(function(){
-    hljs.initHighlightingOnLoad();
-
-    var EditormdView = editormd.markdownToHTML("page_md_content", {
-      htmlDecode      : "style,script,iframe",  // you can filter tags decode
-      emoji           : true,
-      taskList        : true,
-      tex             : true,  // 默认不解析
-      flowChart       : true,  // 默认不解析
-      sequenceDiagram : true,  // 默认不解析
-    });
-    
-    //为所有table标签添加bootstap支持的表格类
-    $("table").addClass("table table-bordered table-hover");
-    //当表格列数过长时将自动出现滚动条
-    $.each($('table'), function() {
-        $(this).prop('outerHTML', '<div style="width: 100%;overflow-x: auto;">'+$(this).prop('outerHTML')+'</div>');
-    });
-
-      //超链接都在新窗口打开
-    $('a[href^="http"]').each(function() {
-          $(this).attr('target', '_blank');
-    });
-    if (!isMobile()) {
-      $("th").css("min-width","77px");
-    };
-
-    //lightbox
-    //增加返回顶部按钮
-    $.goup({
-          trigger: 100,
-          bottomOffset: 150,
-          locationOffset: 100,
-          title: lang["back_to_top"] ,
-          titleAsText: true,
-          containerColor:"#08c",
-      });
+  var EditormdView = editormd.markdownToHTML("page_md_content", {
+    htmlDecode: "style,script,iframe", // you can filter tags decode
+    emoji: true,
+    taskList: true,
+    tex: true, // 默认不解析
+    flowChart: true, // 默认不解析
+    sequenceDiagram: true, // 默认不解析
+  });
 
-    if( isMobile() || $(window).width() < 1000){
-          AdaptToMobile();
-      }
+  //为所有table标签添加bootstap支持的表格类
+  $("table").addClass("table table-bordered table-hover");
+  //当表格列数过长时将自动出现滚动条
+  $.each($('table'), function() {
+    $(this).prop('outerHTML', '<div style="width: 100%;overflow-x: auto;">' + $(this).prop('outerHTML') + '</div>');
+  });
 
-    $(window).resize(function(){
-      if( isMobile()){
-          AdaptToMobile();
-      }
+  //超链接都在新窗口打开
+  $('a[href^="http"]').each(function() {
+    $(this).attr('target', '_blank');
+  });
+  if (!isMobile()) {
+    $("th").css("min-width", "77px");
+  };
 
-      else if($(window).width() < 1000){
-          AdaptToMobile();
-      }else{
-        window.location.reload();
-      }
-    });
+  //lightbox
+  //增加返回顶部按钮
+  $.goup({
+    trigger: 100,
+    bottomOffset: 150,
+    locationOffset: 100,
+    title: lang["back_to_top"],
+    titleAsText: true,
+    containerColor: "#08c",
+  });
+
+  if (isMobile() || $(window).width() < 1000) {
+    AdaptToMobile();
+  }
+
+  $(window).resize(function() {
+    if (isMobile()) {
+      AdaptToMobile();
+    } else if ($(window).width() < 1000) {
+      AdaptToMobile();
+    } else {
+      window.location.reload();
+    }
+  });
 
-    history.replaceState(null, null, $("#share-item-link").html());
+  history.replaceState(null, null, $("#share-item-link").html());
 
   //分享项目
-  $("#share").click(function(){
+  $("#share").click(function() {
     $("#share-modal").modal();
-      //延迟绑定分享事件
-        setTimeout(function(){
-          $('#copy-item-link').zclip(
-          {
-            path: DocConfig.pubile +'/jquery.zclip/ZeroClipboard.swf',
-            copy:function()
-            {
-              return $('#share-item-link').html();
-            },
-            afterCopy: function() {
-              show_top_msg("已经成功复制到剪切板",2000);
-            }
-          });
-
-        },500);
+    //延迟绑定分享事件
+    setTimeout(function() {
+      $('#copy-item-link').zclip({
+        path: DocConfig.pubile + '/jquery.zclip/ZeroClipboard.swf',
+        copy: function() {
+          return $('#share-item-link').html();
+        },
+        afterCopy: function() {
+          show_top_msg("已经成功复制到剪切板", 2000);
+        }
+      });
+
+    }, 500);
     return false;
   });
 
-    $("table thead tr").css({"background-color":"#08c","color":"#fff"});
-    $("table tr").each(function(){
-    if($(this).find("td").eq(1).html()=="object" || $(this).find("td").eq(1).html()=="array[object]")
-    {
-      $(this).css({"background-color":"#99CC99","color":"#000"});
+  $("table thead tr").css({
+    "background-color": "#08c",
+    "color": "#fff"
+  });
+  $("table tr").each(function() {
+    if ($(this).find("td").eq(1).html() == "object" || $(this).find("td").eq(1).html() == "array[object]") {
+      $(this).css({
+        "background-color": "#99CC99",
+        "color": "#000"
+      });
     }
 
-    });
+  });
+  
+  function AdaptToMobile() {
+    $(".doc-container").css("width", "90%");
+    $("#doc-body").css("width", "90%");
+    $("#header").css("height", "20px");
+    $(".doc-title-box").css("margin", "20px 20px 0px 20px");
+    $("#footer").css("font-size", "11pt");
+    $(".tool-bar").hide();
+  }
 
-});
+  //图片点击放大
+  $("#page_md_content img").click(function() {
+    var img_url = $(this).attr("src");
+    //如果不在iframe里，则直接当前窗口打开
+    if (self == top) {
+      var json = {
+        "title": "", //相册标题
+        "id": 123, //相册id
+        "start": 0, //初始显示的图片序号，默认0
+        "data": [ //相册包含的图片，数组格式
+          {
+            "alt": "",
+            "pid": 666, //图片id
+            "src": img_url, //原图地址
+            "thumb": img_url //缩略图地址
+          }
+        ]
+      }
+
+      layer.photos({
+        photos: json,
+        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
+      });
+
+    } else {
+      //如果在iframe里，则直接传url给父窗口
+      top.postMessage(img_url, '*');
+    }
+
+  });
 
-function AdaptToMobile(){
-  $(".doc-container").css("width","90%");
-  $("#doc-body").css("width","90%");
-  $("#header").css("height","20px");
-  $(".doc-title-box").css("margin","20px 20px 0px 20px");
-  $("#footer").css("font-size","11pt");
-  $(".tool-bar").hide();
-}
+});

Public/js/page/edit.js

@@ -433,4 +433,66 @@ $("#add-page-comments").click(function(){
     }
     $("#save-btn-group").removeClass("open");
     return false;
+});
+
+/** 粘贴上传图片 **/
+document.getElementById("editormd").addEventListener('paste', function(e) {
+    var clipboard = e.clipboardData;
+    for(var i=0,len=clipboard.items.length; i<len; i++) {
+        if(clipboard.items[i].kind == 'file' || clipboard.items[i].type.indexOf('image') > -1) {
+            var imageFile = clipboard.items[i].getAsFile();
+            var form = new FormData;
+            form.append('t', 'ajax-uploadpic');
+            form.append('editormd-image-file', imageFile);
+            var layer_index = {};
+            var callback = function(type, data){
+                type = type || 'before';
+                var $the = $('#content');
+                switch(type){
+                    // 开始上传
+                    case 'before':
+                       layer_index = layer.load(1, {
+                        shade: [0.1,'#fff'] //0.1透明度的白色背景
+                      });
+                        break;
+                    // 服务器返回错误
+                    case 'error':
+                        $the.attr('disabled', false);
+                        layer.close(layer_index);
+                        layer.alert('图片上传失败');
+                        break;
+                    // 上传成功
+                    case 'success':
+                        $the.attr('disabled', false);
+                        layer.close(layer_index);
+                        if (data.success == 1 ) {
+                            var value = '![]('+data.url+')';
+                           editormd.insertValue(value); 
+                        }else{
+                          layer.alert(data.message);
+                        }
+                        
+                        break;
+                }
+            };
+            $.ajax({
+                url: "?s=home/page/uploadImg",
+                type: "POST",
+                dataType: "json",
+                data: form,
+                processData: false,
+                contentType: false,
+                beforeSend: function() {
+                    callback('before');
+                },
+                error: function() {
+                    callback('error');
+                },
+                success: function(data) {
+                    callback('success', data);
+                }
+            })
+            e.preventDefault();
+        }
+    }
 });

Public/js/page/index.js

@@ -43,5 +43,36 @@ $(function(){
     }
 
     });
+    
+    //图片点击放大
+    $("#page_md_content img").click(function(){
+      var  img_url = $(this).attr("src");
+      //如果不在iframe里，则直接当前窗口打开
+      if (self == top) {
+          var json = {
+              "title": "", //相册标题
+              "id": 123, //相册id
+              "start": 0, //初始显示的图片序号，默认0
+              "data": [   //相册包含的图片，数组格式
+                  {
+                    "alt": "",
+                    "pid": 666, //图片id
+                    "src": img_url, //原图地址
+                    "thumb": img_url //缩略图地址
+                  }
+                ]
+              }
+
+            layer.photos({
+              photos: json
+              ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
+            });
+
+      }else{
+        //如果在iframe里，则直接传url给父窗口
+        top.postMessage(img_url, '*');
+      }
+
+    });
 
 })

composer.json

@@ -5,7 +5,7 @@
     "description": "ShowDoc is a tool greatly applicable for an IT team to share documents online",
     "keywords": ["showdoc","documents","Api"],
     "homepage": "https://github.com/star7th/showdoc",
-    "version":"v1.3.8",
+    "version":"v1.4.0",
     "license": "Apache-2.0",
     "authors": [
         {