markdown编辑器

resources/assets/dcat/plugins/editor-md/plugins/image-dialog/image-dialog.js

@@ -158,6 +158,8 @@
                             var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
                             var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);
 
+                            json = json.substr(json.indexOf('{'));
+
                             json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");
 
                             if (json.success === 1)

resources/views/form/markdown.blade.php

@@ -0,0 +1,16 @@
+<div class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">
+
+    <label for="{{$id}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
+
+    <div class="{{$viewClass['field']}}">
+
+        @include('admin::form.error')
+
+        <div class="{{$class}}" id="{{$id}}" name="{{$name}}" placeholder="{{ $placeholder }}" {!! $attributes !!} ></div>
+
+        <template id="{{$id}}-template">{{ old($column, $value) }}</template>
+
+        @include('admin::form.help-block')
+
+    </div>
+</div>

src/Admin.php

@@ -248,6 +248,7 @@ class Admin
                 $router->post('form', 'HandleFormController@handle')->name('form');
                 $router->post('value', 'ValueController@handle')->name('value');
                 $router->post('tinymce/upload', 'TinymceController@upload')->name('tinymce.upload');
+                $router->post('editor-md/upload', 'EditorMDController@upload')->name('editor-md.upload');
             });
         });
     }

src/Controllers/EditorMDController.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace Dcat\Admin\Controllers;
+
+use Illuminate\Filesystem\FilesystemAdapter;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class EditorMDController
+{
+    public function upload(Request $request)
+    {
+        $file = $request->file('editormd-image-file');
+        $dir = trim($request->get('dir'), '/');
+        $disk = $this->disk();
+
+        $newName = $this->generateNewName($file);
+
+        $disk->putFileAs($dir, $file, $newName);
+
+        return ['success' => 1, 'url' => $disk->url("{$dir}/$newName")];
+    }
+
+    protected function generateNewName(UploadedFile $file)
+    {
+        return uniqid(md5($file->getClientOriginalName())).'.'.$file->getClientOriginalExtension();
+    }
+
+    /**
+     * @return \Illuminate\Contracts\Filesystem\Filesystem|FilesystemAdapter
+     */
+    protected function disk()
+    {
+        $disk = request()->get('disk') ?: config('admin.upload.disk');
+
+        return Storage::disk($disk);
+    }
+}

src/Form.php

@@ -80,6 +80,7 @@ use Symfony\Component\HttpFoundation\Response;
  * @method Field\Timezone               timezone($column, $label = '')
  * @method Field\KeyValue               keyValue($column, $label = '')
  * @method Field\Tel                    tel($column, $label = '')
+ * @method Field\Markdown               markdown($column, $label = '')
  */
 class Form implements Renderable
 {
@@ -153,6 +154,7 @@ class Form implements Renderable
         'timezone'       => Field\Timezone::class,
         'keyValue'       => Field\KeyValue::class,
         'tel'            => Field\Tel::class,
+        'markdown'       => Field\Markdown::class,
     ];
 
     /**

src/Form/EmbeddedForm.php

@@ -57,6 +57,7 @@ use Illuminate\Support\Collection;
  * @method Field\Timezone               timezone($column, $label = '')
  * @method Field\KeyValue               keyValue($column, $label = '')
  * @method Field\Tel                    tel($column, $label = '')
+ * @method Field\Markdown               markdown($column, $label = '')
  */
 class EmbeddedForm
 {

src/Form/Field/Markdown.php

@@ -0,0 +1,191 @@
+<?php
+
+namespace Dcat\Admin\Form\Field;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Form\Field;
+use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Support\JavaScript;
+
+/**
+ * @see https://pandao.github.io/editor.md/
+ */
+class Markdown extends Field
+{
+    protected static $css = [
+        '@admin/dcat/plugins/editor-md/css/editormd.min.css'
+    ];
+
+    protected static $js = [
+        '@admin/dcat/plugins/editor-md/lib/raphael.min.js',
+        '@admin/dcat/plugins/editor-md/editormd.min.js',
+    ];
+
+    /**
+     * 编辑器配置
+     *
+     * @var array
+     */
+    protected $options = [
+        'height'             => 500,
+        'codeFold'           => true,
+        'saveHTMLToTextarea' => true, // 保存 HTML 到 Textarea
+        'searchReplace'      => true,
+        'emoji'              => true,
+        'taskList'           => true,
+        'tocm'               => true,         // Using [TOCM]
+        'tex'                => true,         // 开启科学公式TeX语言支持，默认关闭
+        'flowChart'          => false,        // 流程图支持，默认关闭
+        'sequenceDiagram'    => false,        // 时序/序列图支持，默认关闭,
+        'imageUpload'        => true,
+        'autoFocus'          => true,
+    ];
+
+    protected $language = '@admin/dcat/plugins/editor-md/languages/en.js';
+
+    protected $disk;
+
+    protected $imageUploadDirectory = 'markdown/images';
+
+    /**
+     * 开启 HTML 标签解析.
+     * style,script,iframe|on*
+     *
+     * @param string $decode
+     *
+     * @return $this
+     */
+    public function htmlDecode($decode)
+    {
+        $this->options['htmlDecode'] = &$decode;
+
+        return $this;
+    }
+
+    /**
+     * 设置编辑器容器高度.
+     *
+     * @param int $height
+     *
+     * @return $this
+     */
+    public function height($height)
+    {
+        $this->options['height'] = $height;
+
+        return $this;
+    }
+
+
+    /**
+     * 设置文件上传存储配置.
+     *
+     * @param string $disk
+     *
+     * @return $this
+     */
+    public function disk(string $disk)
+    {
+        $this->disk = $disk;
+
+        return $this;
+    }
+
+    /**
+     * 设置图片上传文件夹.
+     *
+     * @param string $dir
+     *
+     * @return $this
+     */
+    public function imageDirectory(string $dir)
+    {
+        $this->imageUploadDirectory = $dir;
+
+        return $this;
+    }
+
+    /**
+     * 自定义图片上传接口.
+     *
+     * @param string $url
+     *
+     * @return $this
+     */
+    public function imageUrl(string $url)
+    {
+        return $this->options(['imageUploadURL' => admin_url($url)]);
+    }
+
+    /**
+     * 设置语言包路径.
+     *
+     * @param string $url
+     *
+     * @return $this
+     */
+    public function languageUrl(string $url)
+    {
+        $this->language = $url;
+
+        return $this;
+    }
+
+    /**
+     * 初始化js.
+     */
+    protected function setUpScript()
+    {
+        $this->options['path'] = admin_asset('@admin/dcat/plugins/editor-md/lib').'/';
+        $this->options['name'] = $this->column;
+        $this->options['placeholder'] = $this->placeholder();
+        $this->options['readonly'] = ! empty($this->attributes['readonly']) || ! empty($this->attributes['disabled']);
+
+        if (empty($this->options['imageUploadURL'])) {
+            $this->options['imageUploadURL'] = $this->defaultImageUploadUrl();
+        }
+
+        $this->options['onload'] = JavaScript::make(
+            <<<JS
+function () {
+    this.setMarkdown($('#{$this->id}-template').html());
+}
+JS
+        );
+
+        if (config('app.locale') !== 'zh-CN') {
+            Admin::js($this->language);
+        }
+
+        $opts = JavaScript::format($this->options);
+
+        $this->script = "editormd(\"{$this->id}\", {$opts});";
+    }
+
+    /**
+     * @return string
+     */
+    protected function defaultImageUploadUrl()
+    {
+        return Helper::urlWithQuery(
+            route('dcat.api.editor-md.upload'),
+            [
+                '_token' => csrf_token(),
+                'disk'   => $this->disk,
+                'dir'    => $this->imageUploadDirectory,
+            ]
+        );
+    }
+
+    /**
+     * @return string
+     */
+    public function render()
+    {
+        $this->setUpScript();
+
+        Admin::style('.editormd-fullscreen {z-index: 99999999;}');
+
+        return parent::render();
+    }
+}

src/Form/NestedForm.php

@@ -61,6 +61,7 @@ use Illuminate\Support\Collection;
  * @method Field\Timezone               timezone($column, $label = '')
  * @method Field\KeyValue               keyValue($column, $label = '')
  * @method Field\Tel                    tel($column, $label = '')
+ * @method Field\Markdown               markdown($column, $label = '')
  */
 class NestedForm
 {

src/Widgets/Form.php

@@ -72,6 +72,7 @@ use Illuminate\Validation\Validator;
  * @method Field\Timezone       timezone($column, $label = '')
  * @method Field\KeyValue       keyValue($column, $label = '')
  * @method Field\Tel            tel($column, $label = '')
+ * @method Field\Markdown       markdown($column, $label = '')
  */
 class Form implements Renderable
 {