1

View/Admin/Notebook/lists.blade.php

@@ -162,13 +162,12 @@
             <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: 500px"></div>
+                <div id="editor-text-area" style="height: calc(100vh - 150px)"></div>
             </div>
         </el-col>
     </el-row>
@@ -196,44 +195,43 @@
         VueInit.methods.titleChange = function (){
             this.noteBookVersion++;
         }
+        const E = window.wangEditor
 
-        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++;
-            //         }
-            //     }
-            // });
+        // 切换语言
+        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: '<p><br></p>',
+                html: content ?? '',
                 config: {
                     placeholder: 'Type here...',
                     MENU_CONF: {
                         uploadImage: {
-                            fieldName: 'your-fileName',
-                            base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
+                            maxFileSize: 10 * 1024 * 1024,
+                            server: '{{ \App\Util\Hy::route()->to([\App\Controller\Admin\CommonController::class, 'upload'])->url() }}',
+                            fieldName: 'image',
+                            base64LimitSize: 10 * 1024 // 10k 以下插入 base64
                         }
                     },
                     onChange(editor) {
-                        console.log(editor.getHtml())
+                        if (VueApp.currentNotebook.content === editor.getHtml()) {
+                            return;
+                        }
+                        VueApp.currentNotebook.content = editor.getHtml();
+                        VueApp.noteBookVersion++;
                     }
                 }
-            })
+            });
             E.createToolbar({
                 editor,
                 selector: '#editor-toolbar',
                 config: {}
             });
-
             this.Weditor = editor;
         }
         VueInit.methods.reachBottom = function () {
@@ -260,7 +258,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();
         }
 
@@ -364,7 +363,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 ?? '');
             });
         }
 
@@ -392,42 +392,5 @@
                 }
             })
         }
-
-        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.wangEditorInit = function (){
-            let editor = E.createEditor({
-                selector: '#editor-text-area',
-                html: '<p><br></p>',
-                config: {
-                    placeholder: 'Type here...',
-                    MENU_CONF: {
-                        uploadImage: {
-                            fieldName: 'your-fileName',
-                            base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
-                        }
-                    },
-                    onChange(editor) {
-                        console.log(editor.getHtml())
-                    }
-                }
-            })
-            E.createToolbar({
-                editor,
-                selector: '#editor-toolbar',
-                config: {}
-            });
-
-            this.Weditor = editor;
-        }
-
     </script>
 @endsection