Merge commit '8b14b54f43528937cf1ef78771555c16965d5f20' as 'PasteImage'

PasteImage/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Zou Guoqing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PasteImage/Plugin.php

@@ -0,0 +1,253 @@
+<?php
+if (!defined('__TYPECHO_ROOT_DIR__')) exit;
+/**
+ * 为自带 Markdown 编辑器增加系统剪贴板中的图片粘贴上传的支持，类似简书写文章页面的编辑框
+ *
+ * @package Paste Image
+ * @author qing
+ * @version 1.0.0
+ * @link https://github.com/zgq354/PasteImage
+ */
+class PasteImage_Plugin implements Typecho_Plugin_Interface
+{
+    /**
+     * 激活插件方法,如果激活失败,直接抛出异常
+     *
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function activate()
+    {
+        // 在编辑文章和编辑页面的底部注入代码
+        Typecho_Plugin::factory('admin/write-post.php')->bottom = array('PasteImage_Plugin', 'render');
+        Typecho_Plugin::factory('admin/write-page.php')->bottom = array('PasteImage_Plugin', 'render');
+    }
+
+    /**
+     * 禁用插件方法,如果禁用失败,直接抛出异常
+     *
+     * @static
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function deactivate(){}
+
+    /**
+     * 获取插件配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form 配置面板
+     * @return void
+     */
+    public static function config(Typecho_Widget_Helper_Form $form){}
+
+    /**
+     * 个人用户的配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form
+     * @return void
+     */
+    public static function personalConfig(Typecho_Widget_Helper_Form $form){}
+
+    /**
+     * 插件实现方法
+     *
+     * @access public
+     * @return void
+     */
+    public static function render()
+    {
+
+        Typecho_Widget::widget('Widget_Options')->to($options);
+        ?>
+<script>
+// 粘贴文件上传
+$(document).ready(function () {
+    // 上传URL
+    var uploadUrl = '<?php Helper::security()->index('/action/upload'); ?>';
+    // 处理有特定的 CID 的情况
+    var cid = $('input[name="cid"]').val();
+    if (cid) {
+        uploadUrl += '&cid=' + cid;
+    }
+
+    // 上传文件函数
+    function uploadFile(file) {
+        // 生成一段随机的字符串作为 key
+        var index = Math.random().toString(10).substr(2, 5) + '-' + Math.random().toString(36).substr(2);
+        // 默认文件后缀是 png，在Chrome浏览器中剪贴板粘贴的图片都是png格式，其他浏览器暂未测试
+        var fileName = index + '.png';
+
+        // 上传时候提示的文字
+        var uploadingText = '[图片上传中...(' + index + ')]';
+
+        // 先把这段文字插入
+        var textarea = $('#text'), sel = textarea.getSelection(),
+        offset = (sel ? sel.start : 0) + uploadingText.length;
+        textarea.replaceSelection(uploadingText);
+        // 设置光标位置
+        textarea.setSelection(offset, offset);
+
+        // 设置附件栏信息
+        // 先切到附件栏
+        $('#tab-files-btn').click();
+
+        // 更新附件的上传提示
+        var fileInfo = {
+            id: index,
+            name: fileName
+        }
+        fileUploadStart(fileInfo);
+
+        // 是时候展示真正的上传了
+        var formData = new FormData();
+        formData.append('name', fileName);
+        formData.append('file', file, fileName);
+
+        $.ajax({
+            method: 'post',
+            url: uploadUrl,
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (data) {
+                var url = data[0], title = data[1].title;
+                textarea.val(textarea.val().replace(uploadingText, '![' + title + '](' + url + ')'));
+                // 触发输入框更新事件，把状态压人栈中，解决预览不更新的问题
+                textarea.trigger('paste');
+                // 附件上传的UI更新
+                fileUploadComplete(index, url, data[1]);
+            },
+            error: function (error) {
+                textarea.val(textarea.val().replace(uploadingText, '[图片上传错误...]\n'));
+                // 触发输入框更新事件，把状态压人栈中，解决预览不更新的问题
+                textarea.trigger('paste');
+                // 附件上传的 UI 更新
+                fileUploadError(fileInfo);
+            }
+        });
+    }
+
+    // 监听输入框粘贴事件
+    document.getElementById('text').addEventListener('paste', function (e) {
+      var clipboardData = e.clipboardData;
+      var items = clipboardData.items;
+      for (var i = 0; i < items.length; i++) {
+        if (items[i].kind === 'file' && items[i].type.match(/^image/)) {
+          // 取消默认的粘贴操作
+          e.preventDefault();
+          // 上传文件
+          uploadFile(items[i].getAsFile());
+          break;
+        }
+      }
+    });
+
+
+
+    //
+    // 以下代码均来自 /admin/file-upload-js.php，无奈只好复制粘贴过来实现功能
+    //
+
+    // 更新附件数量显示
+    function updateAttacmentNumber () {
+        var btn = $('#tab-files-btn'),
+            balloon = $('.balloon', btn),
+            count = $('#file-list li .insert').length;
+
+        if (count > 0) {
+            if (!balloon.length) {
+                btn.html($.trim(btn.html()) + ' ');
+                balloon = $('<span class="balloon"></span>').appendTo(btn);
+            }
+
+            balloon.html(count);
+        } else if (0 == count && balloon.length > 0) {
+            balloon.remove();
+        }
+    }
+
+    // 开始上传文件的提示
+    function fileUploadStart (file) {
+        $('<li id="' + file.id + '" class="loading">'
+            + file.name + '</li>').appendTo('#file-list');
+    }
+
+    // 上传完毕的操作
+    var completeFile = null;
+    function fileUploadComplete (id, url, data) {
+        var li = $('#' + id).removeClass('loading').data('cid', data.cid)
+            .data('url', data.url)
+            .data('image', data.isImage)
+            .html('<input type="hidden" name="attachment[]" value="' + data.cid + '" />'
+                + '<a class="insert" target="_blank" href="###" title="<?php _e('点击插入文件'); ?>">' + data.title + '</a><div class="info">' + data.bytes
+                + ' <a class="file" target="_blank" href="<?php $options->adminUrl('media.php'); ?>?cid='
+                + data.cid + '" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a>'
+                + ' <a class="delete" href="###" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a></div>')
+            .effect('highlight', 1000);
+
+        attachInsertEvent(li);
+        attachDeleteEvent(li);
+        updateAttacmentNumber();
+
+        if (!completeFile) {
+            completeFile = data;
+        }
+    }
+
+    // 增加插入事件
+    function attachInsertEvent (el) {
+        $('.insert', el).click(function () {
+            var t = $(this), p = t.parents('li');
+            Typecho.insertFileToEditor(t.text(), p.data('url'), p.data('image'));
+            return false;
+        });
+    }
+
+    // 增加删除事件
+    function attachDeleteEvent (el) {
+        var file = $('a.insert', el).text();
+        $('.delete', el).click(function () {
+            if (confirm('<?php _e('确认要删除文件 %s 吗?'); ?>'.replace('%s', file))) {
+                var cid = $(this).parents('li').data('cid');
+                $.post('<?php Helper::security()->index('/action/contents-attachment-edit'); ?>',
+                    {'do' : 'delete', 'cid' : cid},
+                    function () {
+                        $(el).fadeOut(function () {
+                            $(this).remove();
+                            updateAttacmentNumber();
+                        });
+                    });
+            }
+
+            return false;
+        });
+    }
+
+    // 错误处理，相比原来的函数，做了一些微小的改造
+    function fileUploadError (file) {
+        var word;
+
+        word = '<?php _e('上传出现错误'); ?>';
+
+        var fileError = '<?php _e('%s 上传失败'); ?>'.replace('%s', file.name),
+            li, exist = $('#' + file.id);
+
+        if (exist.length > 0) {
+            li = exist.removeClass('loading').html(fileError);
+        } else {
+            li = $('<li>' + fileError + '<br />' + word + '</li>').appendTo('#file-list');
+        }
+
+        li.effect('highlight', {color : '#FBC2C4'}, 2000, function () {
+            $(this).remove();
+        });
+    }
+})
+</script>
+<?php
+    }
+}

PasteImage/README.md

@@ -0,0 +1,7 @@
+# PasteImage
+为 Typecho 自带编辑器增加粘贴图片上传功能
+
+## 安装方法
+1. Download ZIP 下载本插件最新版本
+2. 解压，把 `PasteImage-master` 目录重命名为 `PasteImage` 上传至博客的 `/usr/plugins` 目录下
+3. 在插件页面启用本插件