add uploader

FileUploadAsset.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\web\AssetBundle;
+
+class FileUploadAsset extends AssetBundle
+{
+	// The files are not web directory accessible, therefore we need
+	// to specify the sourcePath property. Notice the @vendor alias used.
+	public $sourcePath = '@bower/blueimp-file-upload';
+	public $css = [
+        'css/jquery.fileupload.css',
+        'css/jquery.fileupload-ui.css',
+    ];
+    public $js = [
+    	'js/vendor/jquery.ui.widget.js',
+    	'js/jquery.iframe-transport.js',
+        'js/jquery.fileupload.js',
+        'js/jquery.fileupload-process.js',
+        'js/jquery.fileupload-image.js',
+        'js/jquery.fileupload-validate.js',
+        'js/jquery.fileupload-ui.js',
+    ];
+    public $depends = [
+		'yiichina\mdeditor\TmplAsset',
+		'yiichina\mdeditor\LoadImageAsset',
+        'yiichina\mdeditor\UploaderAsset',
+		//'yiichina\mdeditor\GalleryAsset',
+    ];
+}

GalleryAsset.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\web\AssetBundle;
+
+class GalleryAsset extends AssetBundle
+{
+	// The files are not web directory accessible, therefore we need
+	// to specify the sourcePath property. Notice the @vendor alias used.
+	public $sourcePath = '@bower/blueimp-gallery';
+	public $css = [
+        'css/blueimp-gallery.min.css',
+    ];
+    public $js = [
+    	'js/jquery.blueimp-gallery.min.js',
+    ];
+    public $depends = [
+        'yii\web\JqueryAsset',
+        'yii\bootstrap\BootstrapAsset',
+    ];
+}

LoadImageAsset.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\web\AssetBundle;
+
+class LoadImageAsset extends AssetBundle
+{
+	// The files are not web directory accessible, therefore we need
+	// to specify the sourcePath property. Notice the @vendor alias used.
+	public $sourcePath = '@bower/blueimp-load-image/js';
+    public $js = [
+        'load-image.all.min.js',
+    ];
+    public $depends = [
+        'yii\web\JqueryAsset',
+    ];
+}

MdEditor.php

@@ -1,9 +1,9 @@
 <?php
 
 namespace yiichina\mdeditor;
-
 use yii\Helpers\Html;
 use yii\helpers\Json;
+use yii\web\JsExpression;
 
 /**
  * This is just an example.
@@ -14,6 +14,7 @@ class MdEditor extends \yii\widgets\InputWidget
     public $codeMirror;
     public $buttons;
     public $disabledButtons;
+    public $allowUpload = true;
 
     public function init()
     {
@@ -27,6 +28,12 @@ public function init()
         if(!empty($this->codeMirror)) {
             $optionsArray['codeMirror'] = $this->codeMirror;
         }
+        if($this->allowUpload) {
+		    FileUploadAsset::register($view);
+		    echo Uploader::widget();
+		    $optionsArray['buttons']['link']['action'] = new JsExpression("function() { $.setUploader(this, 'file'); }");
+            $optionsArray['buttons']['image']['action'] = new JsExpression("function(e) { $.setUploader(this, 'image') }");
+        }
         if(!empty($this->buttons)) {
             $optionsArray['buttons'] = $this->buttons;
         }

TmplAsset.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\web\AssetBundle;
+
+class TmplAsset extends AssetBundle
+{
+	// The files are not web directory accessible, therefore we need
+	// to specify the sourcePath property. Notice the @vendor alias used.
+	public $sourcePath = '@bower/blueimp-tmpl';
+    public $js = [
+    	'js/tmpl.min.js',
+    ];
+    public $depends = [
+        'yii\web\JqueryAsset',
+        'yii\bootstrap\BootstrapAsset',
+    ];
+}

Uploader.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\base\Widget;
+
+/**
+ * This is just an example.
+ */
+class Uploader extends Widget
+{
+    public $debug = false;
+
+    public function init()
+    {
+        parent::init();
+    }
+
+    public function run()
+    {
+        return $this->render('uploader');
+    }
+}

UploaderAsset.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace yiichina\mdeditor;
+use yii\web\AssetBundle;
+
+class UploaderAsset extends AssetBundle
+{
+	// The files are not web directory accessible, therefore we need
+	// to specify the sourcePath property. Notice the @vendor alias used.
+	public $sourcePath = '@vendor/yiichina/yii2-md-editor/assets';
+	public $css = [
+    ];
+    public $js = [
+    	'js/uploader.js',
+    ];
+    public $depends = [
+        'yii\web\JqueryAsset',
+        'yii\bootstrap\BootstrapAsset',
+    ];
+}

assets/js/uploader.js

@@ -0,0 +1,11 @@
+(function ($) {
+    'use strict';
+    jQuery.extend({
+        setUploader: function(obj, type) {
+            if(type == 'image') {
+
+            }
+            $('#uploader').modal();
+        }
+    });
+})(window.jQuery);

views/uploader.php

@@ -0,0 +1,84 @@
+<!-- Modal -->
+<div class="modal fade" id="uploader" tabindex="-1" role="dialog" aria-labelledby="uploaderLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="uploaderLabel">插入链接</h4>
+            </div>
+            <div class="modal-body">
+                <ul class="nav nav-tabs">
+                    <li class="active"><a href="#url" data-toggle="tab">链接地址</a></li>
+                    <li><a href="#upload" data-toggle="tab">上传文件</a></li>
+                    <li><a href="#history" data-toggle="tab">历史文件</a></li>
+                </ul>
+                <div class="tab-content" style="margin-top: 10px;">
+                    <div class="tab-pane fade in active" id="url">
+                        <div class="form-group">
+                            <label for="exampleInputEmail1">链接URL</label>
+                            <input type="text" class="form-control" id="link-url" placeholder="链接URL">
+                        </div>
+                        <div class="form-group">
+                            <label for="exampleInputPassword1">链接文本</label>
+                            <input type="text" class="form-control" id="link-title" placeholder="链接文本">
+                        </div>
+                    </div>
+                    <div class="tab-pane fade" id="upload">
+                        <!-- The file upload form used as target for the file upload widget -->
+                        <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
+                            <!-- Redirect browsers with JavaScript disabled to the origin page -->
+                            <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
+                            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
+                            <div class="row fileupload-buttonbar">
+                                <div class="col-lg-7">
+                                    <!-- The fileinput-button span is used to style the file input field as button -->
+                                    <span class="btn btn-success fileinput-button">
+                                        <i class="glyphicon glyphicon-plus"></i>
+                                        <span>添加文件...</span>
+                                        <input type="file" name="files[]" multiple>
+                                    </span>
+                                    <button type="submit" class="btn btn-primary start">
+                                        <i class="glyphicon glyphicon-upload"></i>
+                                        <span>开始上传</span>
+                                    </button>
+                                    <button type="reset" class="btn btn-warning cancel">
+                                        <i class="glyphicon glyphicon-ban-circle"></i>
+                                        <span>取消上传</span>
+                                    </button>
+                                    <button type="button" class="btn btn-danger delete">
+                                        <i class="glyphicon glyphicon-trash"></i>
+                                        <span>删除</span>
+                                    </button>
+                                    <input type="checkbox" class="toggle">
+                                    <!-- The global file processing state -->
+                                    <span class="fileupload-process"></span>
+                                </div>
+                                <!-- The global progress state -->
+                                <div class="col-lg-5 fileupload-progress fade">
+                                    <!-- The global progress bar -->
+                                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
+                                         aria-valuemax="100">
+                                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
+                                    </div>
+                                    <!-- The extended global progress state -->
+                                    <div class="progress-extended">&nbsp;</div>
+                                </div>
+                            </div>
+                            <!-- The table listing the files available for upload/download -->
+                            <table role="presentation" class="table table-striped">
+                                <tbody class="files"></tbody>
+                            </table>
+                        </form>
+                    </div>
+                    <div class="tab-pane fade" id="history">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-success" data-dismiss="modal">插入</button>
+            </div>
+        </div>
+    </div>
+</div>