Merge pull request #73 from yangrunkang/dev-editor-load-failed-to-reload

Feature: 编辑器加载失败可以手动触发重新加载
yangrunkang · Jun 22, 2022 · 96da110 · 96da110
2 parents 7019ad2 + 8ef7fbb
commit 96da110
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/upupor-web/src/main/resources/static/js/cv.js b/upupor-web/src/main/resources/static/js/cv.js
@@ -380,25 +380,38 @@ let cherryConfig = {
  * 加载不同的编辑器js,初始化是同一个
  */
 function initEditor(isComment){
-    if(isComment){
-        _height = '400px';
-        _defaultModel = 'editOnly';
-    }
+    try{
+        $("#editor_load_failure").hide();
+        $("#editor_loading").show();
 
-    let config = Object.assign({}, cherryConfig);
-    window.editor = new Cherry(config);
+        if(isComment){
+            _height = '400px';
+            _defaultModel = 'editOnly';
+        }
 
-    let mdValue = getElementValue("md_value");
-    let htmlValue = getElementValue("html_value");
+        let config = Object.assign({}, cherryConfig);
+        window.editor = new Cherry(config);
 
-    if(cvIsNull(mdValue) && !cvIsNull(htmlValue)){
-        // 将html转为markdown
-        mdValue = window.editor.engine.makeMarkdown(htmlValue);
-    }
+        let mdValue = getElementValue("md_value");
+        let htmlValue = getElementValue("html_value");
+
+        if(cvIsNull(mdValue) && !cvIsNull(htmlValue)){
+            // 将html转为markdown
+            mdValue = window.editor.engine.makeMarkdown(htmlValue);
+        }
 
-    if(!cvIsNull(mdValue)){
-        window.editor.setMarkdown(mdValue);
+        if(!cvIsNull(mdValue)){
+            window.editor.setMarkdown(mdValue);
+        }
+    }catch (e) {
+        $("#editor_load_failure").show();
+        $("#editor_loading").hide();
     }
+
+}
+
+function reloadEditor(isComment) {
+    $.cvLoadBootstrapRichText(isComment)
 }
 
 

diff --git a/upupor-web/src/main/resources/templates/editor/editor.html b/upupor-web/src/main/resources/templates/editor/editor.html
@@ -70,7 +70,7 @@
                         </div>
                         <div class="form-group mb-3">
                             <div class="col-lg-12">
-                                <div th:replace="fragments/comment::loading_editor"></div>
+                                <div th:replace="fragments/comment::loading_editor(false)"></div>
                                 <!--编辑器-->
                                 <input type="hidden" id="md_value" th:value="${editorIndexDto?.content?.contentExtend?.markdownContent}" />
                                 <input type="hidden" id="html_value" th:value="${editorIndexDto?.content?.contentExtend?.detailContent}" />

diff --git a/upupor-web/src/main/resources/templates/fragments/comment.html b/upupor-web/src/main/resources/templates/fragments/comment.html
@@ -30,17 +30,22 @@
       xmlns:th="http://www.thymeleaf.org">
 <body>
 
-<div  th:fragment="loading_editor">
+<div  th:fragment="loading_editor(isComment)">
     <div class="text-center" id="comment_loading">
-        <div class="spinner-grow text-primary" role="status"></div>
-        <p class="text-black-50">编辑器加载中...</p>
-        <p class="text-black-50 small">注: 因最小维护成本需要(eg.最低带宽,无CDN等),编辑器加载可能需要15秒左右,请耐心等待</p>
+        <div id="editor_loading">
+            <div class="spinner-grow text-primary" role="status"></div>
+            <p class="text-black-50">编辑器加载中...</p>
+            <p class="text-black-50 small">注: 因最小维护成本需要(eg.最低带宽,无CDN等),编辑器加载可能需要15秒左右,请耐心等待</p>
+        </div>
+        <p class="text-danger" style="display:none;" id="editor_load_failure">
+            <button class="btn btn-danger btn-sm" th:onclick="reloadEditor([[${isComment}]])">编辑器加载失败,重新加载</button>
+        </p>
     </div>
 </div>
 
 <div th:fragment="comment_box(targetId,source,text)">
     <div>
-        <div th:replace="fragments/comment::loading_editor"></div>
+        <div th:replace="fragments/comment::loading_editor(true)"></div>
         <div th:replace="fragments/editor::upupor-editor-progress"></div>
         <div id="vcr_editor" style="height: 300px; overflow:hidden"></div>
         <input type="hidden" id="reply_to_user" />