博客变为论坛，修改编辑器为正常编辑器

2022-05-05 01:11:09 +08:00
parent f701baaf04
commit 69941133b8
28 changed files with 457 additions and 187 deletions
--- a/src/main/resources/templates/blog/write.html
+++ b/src/main/resources/templates/blog/write.html
@@ -3,9 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>问答-Quinn</title>
+    <title>论坛-Quinn</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
-    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
+    <link rel="stylesheet" th:href="@{/wangedit/css/wang.style.css}"/>

    <style>
        .nav-underline .nav-link {
@@ -51,7 +51,9 @@
                        <div class="col-md-12 mb-3">
                            <p>文章内容</p>
                            <div id="blog-content">
-                                <textarea required name="content" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
+								<div id="editor-toolbar"></div>
+								<div id="editor-text-area" style="height: 400px;border: 1px solid lightgrey"></div>
+								<textarea id="blog-textarea" name="content" style="display: none;"></textarea>
                            </div>
                        </div>

@@ -73,51 +75,58 @@
 <script th:src="@{/js/jquery-ui.min.js}"></script>
 <script th:src="@{/live/js/addlive2d.js}"></script>

-<script th:src="@{/editormd/editormd.js}"></script>
+<script th:src="@{/wangedit/js/wang.min.js}"></script>
 <script type="text/javascript">
-    var testEditor;
-    $(function() {
-        testEditor = editormd("blog-content", {
-            width : "100%",
-            height : 500,
-            syncScrolling : "single",
-            path : "/editormd/lib/",
-            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
-            // [TOCM]  [TOC] 自动生成目录
-            tocm : true,
-            tocContainer : "",
-            tocDropdown   : false,
-            tocStartLevel : 1,     // Parse beginning of H2, Default value 1
-            emoji: true,
-            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
-            flowChart : true,             // 开启流程图支持，默认关闭
-            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
-            //图片上传
-            imageUpload : true,
-            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
-            imageUploadURL : "/question/write/file/upload",
-            onload : function() {
-                console.log('onload', this);
-            },
-            /*指定需要显示的功能按钮*/
-            toolbarIcons : function() {
-                return ["undo","redo","|",
-                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
-                    "list-ul","list-ol","hr","|",
-                    "link","reference-link","image",
-                    "code-block","table","datetime","emoji","html-entities","|",
-                    "search","watch","preview","fullscreen"]
-            },
-            onfullscreen : function() {
-                console.log("onfullscreen");
-                document.getElementsByClassName("navbar")[0].style.display="none";
-            },
-            onfullscreenExit : function() {
-                console.log("onfullscreenExit");
-                document.getElementsByClassName("navbar")[0].style.display="";
-            }
-        });
-    });
+	const E = window.wangEditor
+
+	// 切换语言
+	const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
+	E.i18nChangeLanguage(LANG)
+
+	const editorConfig = {
+	  placeholder: '请输入...',
+	  scroll: true, // 禁止编辑器滚动
+	  MENU_CONF: {
+	    uploadImage: {
+	      fieldName: 'your-fileName',
+	      base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
+	    }
+	  },
+	  onChange(editor) {
+	    // console.log(editor.getHtml())
+		// $('#blog-textarea').value = editor.getHtml()
+		const content = editor.children
+		// const contentStr = JSON.stringify(content)
+		// document.getElementById('blog-textarea').value = contentStr
+		const html = editor.getHtml()
+		$('#blog-textarea').val(html)
+	  }
+	}
+
+	// 先创建 editor
+	const editor = E.createEditor({
+	  selector: '#editor-text-area',
+	  content: [],
+	  // html: '',
+	  config: editorConfig
+	})
+
+	// 创建 toolbar
+	const toolbar = E.createToolbar({
+	  editor,
+	  selector: '#editor-toolbar',
+	  config: {
+	    excludeKeys: 'fullScreen',
+	  }
+	})
+
+	// 点击空白处 focus 编辑器
+	$('#editor-text-area').addEventListener('click', e => {
+	  if (e.target.id === 'editor-text-area') {
+	    editor.blur()
+	    editor.focus(true) // focus 到末尾
+	  }
+	})
 </script>

 </body>