基本完成新的编辑器;

2026-03-03 16:24:28 +08:00 · 2022-03-04 12:11:06 +08:00
parent 578969d97d
commit 1a7718be0c
6 changed files with 615 additions and 565 deletions
--- a/view/admin/post/edit_content.html
+++ b/view/admin/post/edit_content.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>内容管理</title>
+    {include file="common/_require"}
+    <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
+    <script>
+        var currentHeaderNavItem = 'Post-{$Request.param.type|default="1"}';
+        var currentLeftNavItem = 'post-{$Request.param.type|default="1"}';
+    </script>
+
+
+    <style>
+        html,
+        body {
+            background-color: #fff;
+            height: 100%;
+            overflow: hidden;
+            color: #333;
+        }
+
+        #top-container {
+            border-bottom: 1px solid #e8e8e8;
+            padding-left: 30px;
+        }
+
+        #editor-toolbar {
+
+            background-color: #FCFCFC;
+            margin: 0 auto;
+        }
+
+        #content {
+            height: calc(100% - 440px);
+            background-color: rgb(245, 245, 245);
+            overflow-y: auto;
+            position: relative;
+        }
+
+        #editor-container {
+            width: 850px;
+            margin: 30px auto 30px auto;
+            background-color: #fff;
+            padding: 20px 50px 50px 50px;
+            border: 1px solid #e8e8e8;
+            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
+        }
+
+        #title-container {
+            padding: 20px 0;
+            border-bottom: 1px solid #e8e8e8;
+        }
+
+        #title-container input {
+            font-size: 30px;
+            border: 0;
+            outline: none;
+            width: 100%;
+            line-height: 1;
+        }
+
+        #editor-text-area {
+            min-height: 500px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+
+<body class="layui-layout-body">
+
+    <div class="layui-layout layui-layout-admin">
+        {include file="common/_header"}
+
+        {include file="common/left_post"}
+
+        <div class="layui-body">
+
+            <div style="">
+                <div class="">
+
+                    <div style="border: 1px solid #e8e8e8;">
+                        <div id="editor-toolbar"></div>
+                    </div>
+                    <div id="content">
+                        <div id="editor-container">
+                            <div id="title-container">
+                                <input id="title-input" value="{$post->title}">
+                            </div>
+                            <div id="editor-text-area"></div>
+                        </div>
+                    </div>
+                    <div id="content-data" style="display: none;">{:urlencode($post->content_html)}</div>
+                </div>
+            </div>
+        </div>
+
+
+        {include file="common/_footer"}
+
+    </div>
+
+
+    <script>
+
+
+        var lastContent = '';
+
+        var contentSaveLock = true;
+
+        function autoSaveContent() {
+
+
+            if (contentSaveLock) {
+                setTimeout(() => {
+                    autoSaveContent();
+                }, 5000);
+            } else {
+                contentSaveLock = true;
+                $.post('{:url("update")}', {
+                    content_html: editor.getHtml(),
+                    id: '{$post->id}'
+                }, function (result) {
+
+                    setTimeout(() => {
+                        autoSaveContent();
+                    }, 5000);
+                })
+            }
+
+
+        }
+
+        const E = window.wangEditor;
+
+        const editorConfig = { MENU_CONF: {} }
+        editorConfig.placeholder = '请输入内容'
+        editorConfig.scroll = false // 禁止编辑器滚动
+        editorConfig.MENU_CONF['uploadImage'] = {
+            fieldName: 'file',
+        }
+        editorConfig.onChange = (editor) => {
+            console.log('content', editor)
+            contentSaveLock = false;
+        }
+
+        // 先创建 editor
+        const editor = E.createEditor({
+            selector: '#editor-text-area',
+            content: [],
+            html: decodeURIComponent($('#content-data').html()),
+            config: editorConfig
+        })
+
+        // 创建 toolbar
+        const toolbar = E.createToolbar({
+            editor,
+            selector: '#editor-toolbar',
+            config: {
+                excludeKeys: 'fullScreen',
+            },
+
+        })
+
+        setTimeout(() => {
+            $('#content').height(window.innerHeight - $('#editor-toolbar').outerHeight() - 30 - 45 - 7)
+        }, 300);
+
+
+        // 点击空白处 focus 编辑器
+        document.getElementById('editor-text-area').addEventListener('click', e => {
+            if (e.target.id === 'editor-text-area') {
+                editor.blur()
+                editor.focus(true) // focus 到末尾
+            }
+        })
+
+
+        $('#title-input').change(function () {
+            window.loading = layer.load()
+            $.post('{:url("update")}', {
+                title: $('#title-input').val(),
+                id: '{$post->id}'
+            }, function (result) {
+                layer.close(window.loading)
+
+
+            })
+        })
+
+
+    </script>
+
+</body>
+
+</html>