├── README.md
├── LICENSE
└── Plugin.php


/README.md:
--------------------------------------------------------------------------------
 1 | # PasteImage
 2 | 为 Typecho 自带编辑器增加粘贴图片上传功能  
 3 | 
 4 | Typecho 最新开发版已经 [直接支持粘贴上传功能](https://github.com/typecho/typecho/commit/0b1096c588a68ac83eac283862fedb459afb3327)，本插件仅供旧版本使用。
 5 | 
 6 | ## 安装方法
 7 | 1. Download ZIP 下载本插件最新版本
 8 | 2. 解压，把 `PasteImage-master` 目录重命名为 `PasteImage` 上传至博客的 `/usr/plugins` 目录下
 9 | 3. 在插件页面启用本插件
10 | 


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


--------------------------------------------------------------------------------
/Plugin.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
  3 | /**
  4 |  * 为自带 Markdown 编辑器增加系统剪贴板中的图片粘贴上传的支持，类似简书写文章页面的编辑框
  5 |  *
  6 |  * @package Paste Image
  7 |  * @author qing
  8 |  * @version 1.0.0
  9 |  * @link https://github.com/zgq354/PasteImage
 10 |  */
 11 | class PasteImage_Plugin implements Typecho_Plugin_Interface
 12 | {
 13 |     /**
 14 |      * 激活插件方法,如果激活失败,直接抛出异常
 15 |      *
 16 |      * @access public
 17 |      * @return void
 18 |      * @throws Typecho_Plugin_Exception
 19 |      */
 20 |     public static function activate()
 21 |     {
 22 |         // 在编辑文章和编辑页面的底部注入代码
 23 |         Typecho_Plugin::factory('admin/write-post.php')->bottom = array('PasteImage_Plugin', 'render');
 24 |         Typecho_Plugin::factory('admin/write-page.php')->bottom = array('PasteImage_Plugin', 'render');
 25 |     }
 26 | 
 27 |     /**
 28 |      * 禁用插件方法,如果禁用失败,直接抛出异常
 29 |      *
 30 |      * @static
 31 |      * @access public
 32 |      * @return void
 33 |      * @throws Typecho_Plugin_Exception
 34 |      */
 35 |     public static function deactivate(){}
 36 | 
 37 |     /**
 38 |      * 获取插件配置面板
 39 |      *
 40 |      * @access public
 41 |      * @param Typecho_Widget_Helper_Form $form 配置面板
 42 |      * @return void
 43 |      */
 44 |     public static function config(Typecho_Widget_Helper_Form $form){}
 45 | 
 46 |     /**
 47 |      * 个人用户的配置面板
 48 |      *
 49 |      * @access public
 50 |      * @param Typecho_Widget_Helper_Form $form
 51 |      * @return void
 52 |      */
 53 |     public static function personalConfig(Typecho_Widget_Helper_Form $form){}
 54 | 
 55 |     /**
 56 |      * 插件实现方法
 57 |      *
 58 |      * @access public
 59 |      * @return void
 60 |      */
 61 |     public static function render()
 62 |     {
 63 | 
 64 |         Typecho_Widget::widget('Widget_Options')->to($options);
 65 |         ?>
 66 | <script>
 67 | // 粘贴文件上传
 68 | $(document).ready(function () {
 69 |     // 上传URL
 70 |     var uploadUrl = '<?php Helper::security()->index('/action/upload'); ?>';
 71 |     // 处理有特定的 CID 的情况
 72 |     var cid = $('input[name="cid"]').val();
 73 |     if (cid) {
 74 |         uploadUrl += '&cid=' + cid;
 75 |     }
 76 | 
 77 |     // 上传文件函数
 78 |     function uploadFile(file) {
 79 |         // 生成一段随机的字符串作为 key
 80 |         var index = Math.random().toString(10).substr(2, 5) + '-' + Math.random().toString(36).substr(2);
 81 |         // 默认文件后缀是 png，在Chrome浏览器中剪贴板粘贴的图片都是png格式，其他浏览器暂未测试
 82 |         var fileName = index + '.png';
 83 | 
 84 |         // 上传时候提示的文字
 85 |         var uploadingText = '[图片上传中...(' + index + ')]';
 86 | 
 87 |         // 先把这段文字插入
 88 |         var textarea = $('#text'), sel = textarea.getSelection(),
 89 |         offset = (sel ? sel.start : 0) + uploadingText.length;
 90 |         textarea.replaceSelection(uploadingText);
 91 |         // 设置光标位置
 92 |         textarea.setSelection(offset, offset);
 93 | 
 94 |         // 设置附件栏信息
 95 |         // 先切到附件栏
 96 |         $('#tab-files-btn').click();
 97 | 
 98 |         // 更新附件的上传提示
 99 |         var fileInfo = {
100 |             id: index,
101 |             name: fileName
102 |         }
103 |         fileUploadStart(fileInfo);
104 | 
105 |         // 是时候展示真正的上传了
106 |         var formData = new FormData();
107 |         formData.append('name', fileName);
108 |         formData.append('file', file, fileName);
109 | 
110 |         $.ajax({
111 |             method: 'post',
112 |             url: uploadUrl,
113 |             data: formData,
114 |             contentType: false,
115 |             processData: false,
116 |             success: function (data) {
117 |                 var url = data[0], title = data[1].title;
118 |                 textarea.val(textarea.val().replace(uploadingText, '![' + title + '](' + url + ')'));
119 |                 // 触发输入框更新事件，把状态压人栈中，解决预览不更新的问题
120 |                 textarea.trigger('paste');
121 |                 // 附件上传的UI更新
122 |                 fileUploadComplete(index, url, data[1]);
123 |             },
124 |             error: function (error) {
125 |                 textarea.val(textarea.val().replace(uploadingText, '[图片上传错误...]\n'));
126 |                 // 触发输入框更新事件，把状态压人栈中，解决预览不更新的问题
127 |                 textarea.trigger('paste');
128 |                 // 附件上传的 UI 更新
129 |                 fileUploadError(fileInfo);
130 |             }
131 |         });
132 |     }
133 | 
134 |     // 监听输入框粘贴事件
135 |     document.getElementById('text').addEventListener('paste', function (e) {
136 |       var clipboardData = e.clipboardData;
137 |       var items = clipboardData.items;
138 |       for (var i = 0; i < items.length; i++) {
139 |         if (items[i].kind === 'file' && items[i].type.match(/^image/)) {
140 |           // 取消默认的粘贴操作
141 |           e.preventDefault();
142 |           // 上传文件
143 |           uploadFile(items[i].getAsFile());
144 |           break;
145 |         }
146 |       }
147 |     });
148 | 
149 | 
150 | 
151 |     //
152 |     // 以下代码均来自 /admin/file-upload-js.php，无奈只好复制粘贴过来实现功能
153 |     //
154 | 
155 |     // 更新附件数量显示
156 |     function updateAttacmentNumber () {
157 |         var btn = $('#tab-files-btn'),
158 |             balloon = $('.balloon', btn),
159 |             count = $('#file-list li .insert').length;
160 | 
161 |         if (count > 0) {
162 |             if (!balloon.length) {
163 |                 btn.html($.trim(btn.html()) + ' ');
164 |                 balloon = $('<span class="balloon"></span>').appendTo(btn);
165 |             }
166 | 
167 |             balloon.html(count);
168 |         } else if (0 == count && balloon.length > 0) {
169 |             balloon.remove();
170 |         }
171 |     }
172 | 
173 |     // 开始上传文件的提示
174 |     function fileUploadStart (file) {
175 |         $('<li id="' + file.id + '" class="loading">'
176 |             + file.name + '</li>').appendTo('#file-list');
177 |     }
178 | 
179 |     // 上传完毕的操作
180 |     var completeFile = null;
181 |     function fileUploadComplete (id, url, data) {
182 |         var li = $('#' + id).removeClass('loading').data('cid', data.cid)
183 |             .data('url', data.url)
184 |             .data('image', data.isImage)
185 |             .html('<input type="hidden" name="attachment[]" value="' + data.cid + '" />'
186 |                 + '<a class="insert" target="_blank" href="###" title="<?php _e('点击插入文件'); ?>">' + data.title + '</a><div class="info">' + data.bytes
187 |                 + ' <a class="file" target="_blank" href="<?php $options->adminUrl('media.php'); ?>?cid='
188 |                 + data.cid + '" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a>'
189 |                 + ' <a class="delete" href="###" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a></div>')
190 |             .effect('highlight', 1000);
191 | 
192 |         attachInsertEvent(li);
193 |         attachDeleteEvent(li);
194 |         updateAttacmentNumber();
195 | 
196 |         if (!completeFile) {
197 |             completeFile = data;
198 |         }
199 |     }
200 | 
201 |     // 增加插入事件
202 |     function attachInsertEvent (el) {
203 |         $('.insert', el).click(function () {
204 |             var t = $(this), p = t.parents('li');
205 |             Typecho.insertFileToEditor(t.text(), p.data('url'), p.data('image'));
206 |             return false;
207 |         });
208 |     }
209 | 
210 |     // 增加删除事件
211 |     function attachDeleteEvent (el) {
212 |         var file = $('a.insert', el).text();
213 |         $('.delete', el).click(function () {
214 |             if (confirm('<?php _e('确认要删除文件 %s 吗?'); ?>'.replace('%s', file))) {
215 |                 var cid = $(this).parents('li').data('cid');
216 |                 $.post('<?php Helper::security()->index('/action/contents-attachment-edit'); ?>',
217 |                     {'do' : 'delete', 'cid' : cid},
218 |                     function () {
219 |                         $(el).fadeOut(function () {
220 |                             $(this).remove();
221 |                             updateAttacmentNumber();
222 |                         });
223 |                     });
224 |             }
225 | 
226 |             return false;
227 |         });
228 |     }
229 | 
230 |     // 错误处理，相比原来的函数，做了一些微小的改造
231 |     function fileUploadError (file) {
232 |         var word;
233 | 
234 |         word = '<?php _e('上传出现错误'); ?>';
235 | 
236 |         var fileError = '<?php _e('%s 上传失败'); ?>'.replace('%s', file.name),
237 |             li, exist = $('#' + file.id);
238 | 
239 |         if (exist.length > 0) {
240 |             li = exist.removeClass('loading').html(fileError);
241 |         } else {
242 |             li = $('<li>' + fileError + '<br />' + word + '</li>').appendTo('#file-list');
243 |         }
244 | 
245 |         li.effect('highlight', {color : '#FBC2C4'}, 2000, function () {
246 |             $(this).remove();
247 |         });
248 |     }
249 | })
250 | </script>
251 | <?php
252 |     }
253 | }
254 | 


--------------------------------------------------------------------------------