更新上传

Controller/Admin/NotebookController.php

@@ -4,6 +4,7 @@ namespace Plugins\Notebook\Controller\Admin;
 
 use App\Exception\ApiMessageException;
 use App\Controller\AbstractController;
+use App\Provider\Provider;
 use Plugins\Notebook\Request\NotebookRequest;
 use Plugins\Notebook\Service\Admin\NotebookService;
 use App\Middleware\Admin\AuthenticateMiddleware;
@@ -124,4 +125,29 @@ class NotebookController extends AbstractController
 
         return Response::json()->success($data);
     }
+
+    /**
+     * 文件上传
+     *
+     * @return ResponseInterface
+     */
+    #[PostMapping(path: 'file-upload')]
+    public function fileUpload(): ResponseInterface
+    {
+        try {
+            $result = Provider::uploader()->upload($this->request->file('file'));
+        } catch (\Throwable $throwable) {
+            return Response::json()->raw([
+                'errno' => 1,
+                'message' => $throwable->getMessage()
+            ]);
+        }
+
+        return Response::json()->raw([
+            'errno' => 0,
+            'data' => [
+                'url' => $result['save_path']
+            ]
+        ]);
+    }
 }

Install.php

@@ -5,16 +5,31 @@ namespace Plugins\Notebook;
 use App\Interfaces\PluginsInstallInterface;
 use App\Model\Base\Route;
 use App\Util\Hy;
+use App\Util\PluginsInstallHelper;
 use Hyperf\DbConnection\Db;
 
 class Install implements PluginsInstallInterface
 {
 
     public static function run(): void
+    {
+        self::addMenu();
+        self::addResource();
+    }
+
+
+    private static function addMenu(): void
     {
         $table = Route::getPrefix() . Route::table();
 
         // 添加菜单
         Db::insert("INSERT INTO `$table` (`pid`, `type`, `title`, `icon`, `route`, `power_route`, `weigh`, `create_time`, `update_time`, `delete_time`) VALUES (0, 1, '笔记本', 'Document', '/admin/plugins/notebook/lists', NULL, 1, '2023-09-24 12:36:45', '2023-09-24 12:36:45', NULL);");
     }
+
+    private static function addResource(): void
+    {
+        PluginsInstallHelper::addResource(__DIR__ . '/resource/wangeditor_editor@5.1.23_dist_css_style.css', '/static/wangeditor_editor@5.1.23_dist_css_style.css');
+        PluginsInstallHelper::addResource(__DIR__ . '/resource/wangeditor_editor@5.1.23_dist_index.js', '/static/wangeditor_editor@5.1.23_dist_index.js');
+        PluginsInstallHelper::addResource(__DIR__ . '/resource/normalize_8.0.1_normalize.min.css', '/static/normalize_8.0.1_normalize.min.css');
+    }
 }

Uninstall.php

@@ -9,6 +9,6 @@ class Uninstall implements PluginsInstallInterface
 
     public static function run(): void
     {
-        echo "笔记本卸载完成，请手动删除对应菜单\n";
+        echo "笔记本卸载完成，请手动删除对应菜单及对应js和css静态资源\n";
     }
 }

View/Admin/Notebook/lists.blade.php

@@ -1,13 +1,11 @@
 @extends('Admin.layout')
 @section('header')
-    <link rel="stylesheet" href="/froala/froala_editor.pkgd.min.css" />
-    <script src="/froala/froala_editor.pkgd.min.js"></script>
-    <script src="/froala/zh_cn.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
-    <!-- Include Code Mirror JS. -->
-{{--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>--}}
-{{--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>--}}
-
+{{--    <link rel="stylesheet" href="/froala/froala_editor.pkgd.min.css" />--}}
+{{--    <script src="/froala/froala_editor.pkgd.min.js"></script>--}}
+{{--    <script src="/froala/zh_cn.js"></script>--}}
+    <link href="/static/wangeditor_editor@5.1.23_dist_css_style.css" rel="stylesheet">
+    <link href="/static/normalize_8.0.1_normalize.min.css" rel="stylesheet">
+    <script src="/static/wangeditor_editor@5.1.23_dist_index.js"></script>
     <style>
         .notebook-lists.warning-background{
             background-color: #fdf6ec;
@@ -164,10 +162,13 @@
             <div>
                 <input v-model="currentNotebook.title" @change="titleChange" class="edit-title" placeholder="新的笔记">
             </div>
-            <div id="froala-editore"></div>
             <div class="content-shade" v-if="!currentNotebook.title">
                 <div class="logo">notebook</div>
             </div>
+            <div style="border: 1px solid #ccc;">
+                <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
+                <div id="editor-text-area" style="height: calc(100vh - 150px)"></div>
+            </div>
         </el-col>
     </el-row>
 @endsection
@@ -194,21 +195,47 @@
         VueInit.methods.titleChange = function (){
             this.noteBookVersion++;
         }
+        const E = window.wangEditor
+
+        // 切换语言
+        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
+        E.i18nChangeLanguage(LANG)
+
+        VueInit.data.Weditor = null;
+        VueInit.data.Wtoolbar = null;
+
+        VueInit.methods.editorInit = function (content){
+            let editor = E.createEditor({
+                selector: '#editor-text-area',
+                html: content ?? '',
+                config: {
+                    placeholder: 'Type here...',
+                    MENU_CONF: {
+                        uploadImage: {
+                            maxFileSize: 10 * 1024 * 1024,
+                            server: 'file-upload',
+                            fieldName: 'file',
+                            base64LimitSize: 10 * 1024 // 10k 以下插入 base64
+                        }
+                    },
+                    onChange(editor) {
+                        if (VueApp.currentNotebook.content === editor.getHtml()) {
+                            return;
+                        }
+                        VueApp.currentNotebook.content = editor.getHtml();
+                        VueApp.noteBookVersion++;
+                    },
+                    customPaste(editor, event){
 
-        VueInit.methods.editorInit = function (){
-            this.editor = new FroalaEditor("div#froala-editore", {
-                "language": "zh_cn",
-                "height": window.innerHeight - 170,
-                "imageUploadURL": "/admin/common/froala-upload",
-                "fileUploadURL": "/admin/common/froala-upload",
-                "videoUploadURL": "/admin/common/froala-upload",
-                "events": {
-                    "contentChanged": () => {
-                        this.currentNotebook.content = this.editor.html.get();
-                        this.noteBookVersion++;
                     }
                 }
             });
+            E.createToolbar({
+                editor,
+                selector: '#editor-toolbar',
+                config: {}
+            });
+            this.Weditor = editor;
         }
         VueInit.methods.reachBottom = function () {
             if(this.notNotebook){
@@ -234,7 +261,8 @@
             this.currentNotebook = this.notebook[index];
             this.noteBookVersion = 0;
             this.noteBookUpVersion = 0;
-            this.editor.html.set(this.currentNotebook.content);
+            this.Weditor.destroy();
+            this.editorInit(this.currentNotebook.content ?? '');
             this.getLatest();
         }
 
@@ -273,7 +301,7 @@
             }).then(({ data:res }) => {
                 if (res.code === 200) {
                     for (let key in res.data) {
-                        this.currentNotebook[key] = res.data[key] ;
+                        this.currentNotebook[key] = res.data[key];
                     }
                 }else{
                     this.$message.error('创建失败！');
@@ -338,7 +366,8 @@
                 this.currentNotebook.content = res.data.content;
                 this.currentNotebook.title = res.data.title;
                 this.currentNotebook.update_time = res.data.update_time;
-                this.editor.html.set(res.data.content);
+                this.Weditor.destroy();
+                this.editorInit(res.data.content ?? '');
             });
         }
 
@@ -366,6 +395,5 @@
                 }
             })
         }
-
     </script>
 @endsection

resource/normalize_8.0.1_normalize.min.css

@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+/*# sourceMappingURL=normalize.min.css.map */