前端应用文章模块并显示

app/admin/view/article/add.php

@@ -68,7 +68,7 @@
             <div class="layui-input-block">
                 <div id="editor—wrapper" id="content" name="content" style="border: 1px solid #ccc;">
                     <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
-                    <div id="editor-container" style="height: 500px;"><!-- 编辑器 --></div>
+                    <div id="editor-container" style="height: 800px;"><!-- 编辑器 --></div>
                 </div>
             </div>
         </div>
@@ -174,9 +174,7 @@
                     if (res.code == 0) {
                         layer.msg(res.msg, { icon: 1 });
                         setTimeout(function () {
-                            var index = parent.layer.getFrameIndex(window.name);
-                            parent.layer.close(index);
-                            parent.location.reload();
+                            window.location.href = '{:url("article/articlelist")}';
                         }, 1000);
                     } else {
                         layer.msg(res.msg, { icon: 2 });
@@ -185,12 +183,6 @@
             });
             return false;
         });
-
-        // 返回上一页
-        function goBack() {
-            var index = parent.layer.getFrameIndex(window.name);
-            parent.layer.close(index);
-        }
     });
 
 </script>
@@ -200,14 +192,63 @@
     const { createEditor, createToolbar } = window.wangEditor
 
     const editorConfig = {
+        MENU_CONF: {},
         placeholder: '请输入内容...',
         onChange(editor) {
             const html = editor.getHtml()
-            // console.log('editor content', html)
-            // 也可以同步到 <textarea>
         },
     }
 
+    // 配置图片上传
+    editorConfig.MENU_CONF['uploadImage'] = {
+        server: '{:url("index/upload_imgs")}',
+        fieldName: 'file',
+        maxFileSize: 10 * 1024 * 1024, // 10M
+        maxNumberOfFiles: 10,
+        allowedFileTypes: ['image/*'],
+        meta: {
+            token: 'xxx'
+        },
+        metaWithUrl: true,
+        headers: {
+            Accept: 'text/x-json'
+        },
+        timeout: 5 * 1000, // 5s
+
+        onBeforeUpload(file) {
+            console.log('准备上传图片', file)
+            return file
+        },
+        onProgress(progress) {
+            console.log('上传进度', progress)
+        },
+        onSuccess(file, res) {
+            console.log('上传成功', file, res)
+        },
+        onFailed(file, res) {
+            layer.msg('上传失败：' + res.msg, { icon: 2 })
+            console.log('上传失败', file, res)
+        },
+        onError(file, err, res) {
+            layer.msg('上传出错：' + err.message, { icon: 2 })
+            console.error('上传出错', file, err, res)
+        },
+        customInsert(res, insertFn) {
+            // res 即服务端的返回结果
+            if (res.code === 0 && res.data) {
+                // 从res.data中获取src字段
+                const url = String(res.data.src || '');
+                if (url) {
+                    insertFn(url);
+                } else {
+                    layer.msg('图片地址无效', { icon: 2 });
+                }
+            } else {
+                layer.msg('图片上传失败', { icon: 2 });
+            }
+        }
+    }
+
     const editor = createEditor({
         selector: '#editor-container',
         html: '<p><br></p>',
@@ -223,4 +264,11 @@
         config: toolbarConfig,
         mode: 'default', // or 'simple'
     })
+</script>
+
+<script>
+    //返回文章列表
+    function goBack() {
+        window.location.href = '{:url("article/articlelist")}';
+    }
 </script>