🐛 Fix https://github.com/justice2001/halo-plugin-vditor/issues/24

Fix #59
Wait test

CHANGELOG.md

@@ -5,12 +5,13 @@
 - [ ] 更换vditor版本为官方版本 (pending vditor 3.9.9)
 - [ ] 修复所见即所得模式下使用工具栏修改属性不生效的问题 (pending vditor 3.9.9)
 
-### v1.5.2
+### v1.6.0
 
-- ✨ 添加Vditor Debugger设置
+- ⬆️ 修改Vditor为官方版本(Vditor 3.9.9)
+- ✨ 添加 Vditor Debugger 设置
 - 🐛 修复行内公式渲染的问题 #22
 - 🐛 修复操作栏修改属性不生效的问题 #20 \[vditor]
-- ⬆️ 修改Vditor为官方版本(Vditor 3.9.9)
+- 🐛 修复在 PJAX 主题下渲染器无法正常处理的问题 #24
 
 ### v1.5.1
 

README.md

@@ -1,15 +1,5 @@
 # halo-plugin-vditor
 
----
-
-## NEXT VERSION
-
-- ✨ 使用新的快速插入表单，界面更美观
-- ✨ 支持渲染其他插件/主题的自定义组件（需要开发者支持）
-- ✨ 允许用户禁用HTML代码块隐藏的特性
-
----
-
 本插件将Vditor整合进Halo，支持所见即所得编辑模式。 Support English (*Only Editor)!
 
 编辑器支持数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、graphviz 渲染、plantumlUML图

build.gradle

@@ -41,8 +41,9 @@ build {
 }
 
 halo {
-    version = '2.11.3'
+    version = '2.12'
     superAdminUsername = 'admin'
     superAdminPassword = 'admin'
     externalUrl = 'http://localhost:8090'
+    debug = true
 }

download_dist.bat

@@ -1,7 +1,7 @@
 cd src/main/resources/static
 if exist dist rmdir /s /q dist
 echo %cd%
-bitsadmin /transfer https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz %cd%\vditor.tgz
+bitsadmin /transfer vditorDownloadJob https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz %cd%\vditor.tgz
 7z x vditor.tgz
 7z x vditor.tar
 move /y %cd%\package\dist %cd%

src/main/java/top/mczhengyi/vditor/utils/ScriptBuilder.java

@@ -29,6 +29,11 @@ public class ScriptBuilder {
         return  this;
     }
 
+    public ScriptBuilder sign(String signId) {
+        this.script.append("<div data-type=\"sign\" id=\"vditor-%s\"></div>".formatted(signId));
+        return this;
+    }
+
     public String getScript() {
         return this.script.toString();
     }

src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java

@@ -11,9 +11,10 @@ public class ScriptUtils {
 
     public static String renderScript(RenderConfig renderConfig) {
         ScriptBuilder script = new ScriptBuilder();
-        script.stylesheet("vditor-render.css", "style")
+        script.sign("article-sign")
+            .stylesheet("vditor-render.css", "style")
             .script("https://cdn.jsdelivr.net/npm/vditor@3.9.9/dist/method.min.js", "methods")
-            .script("render.js", "render");
+            .script("render.js", "render"); // 标记文章位置
         if (renderConfig.getMediaRender())
             script.script("external/media-render.js", "media");
         if (!renderConfig.getDarkMode().equals("disabled")) {
@@ -21,8 +22,8 @@ public class ScriptUtils {
         }
         script.script("halo-renders/index.js", "halo-render-js")
                 .stylesheet("halo-renders/index.css", "halo-render-css")
-                .script("external/halo-renders.js", "halo-render");
-        script.innerScript("initRender()");
+                .script("external/halo-renders.js", "halo-render")
+                .script("pjax.js", "vditor-pjax"); // 完成操作后渲染
         return script.getScript();
     }
 

src/main/resources/static/external/halo-renders.js

@@ -1,5 +1,6 @@
-addExternal((conf) => {
+vditorRender.addExternal((conf) => {
     document.querySelectorAll(".language-halo").forEach(el => {
+        console.log(el.parentElement)
         // TODO: Vditor未对getHTML的代码进行处理
         el.parentElement.outerHTML = HaloJs.renderHalo(
                 el.textContent,

src/main/resources/static/external/media-render.js

@@ -1,4 +1,4 @@
-addExternal((conf) => {
+vditorRender.addExternal((conf) => {
     console.log("Run External Function: Media Render!")
     let mediaRenderOption = document.getElementById("vditor-render").dataset.mediarender
     if (mediaRenderOption==="true") {

src/main/resources/static/pjax.js

@@ -0,0 +1,20 @@
+if (!window.vditorPjax) {
+    window.vditorPjax = true
+    // 当网页已经准备就绪则直接执行渲染任务
+    if (document.readyState === "complete") {
+        vditorRender.render()
+    } else {
+        window.addEventListener('load', () => vditorRender.render())
+    }
+    // 兼容 PJAX
+    $(document).on('pjax:complete', function() {
+        vditorRender.render()
+        console.log("[Vditor Render] PJAX END")
+    })
+    // 兼容 Jquery-Pjax
+    $(document).on('pjax:end', function() {
+        vditorRender.render()
+        console.log("[Vditor Render] PJAX END")
+    })
+    console.log("[Vditor Render] PJAX Injected")
+}

src/main/resources/static/render.js

@@ -1,54 +1,67 @@
-const THEME_PREFIX="/plugins/vditor-mde/assets/static/themes"
-const CDN = "https://cdn.jsdelivr.net/npm/vditor@3.9.9"
+(function (win) {
+    if (win.vditorRender) return;
 
-/** 拓展处理 ({dark}) => void */
-let functionList = []
-let darkMode = false
+    const THEME_PREFIX="/plugins/vditor-mde/assets/static/themes"
+    const CDN = "https://cdn.jsdelivr.net/npm/vditor@3.9.9"
 
-/**
- * 处理渲染
- * @param func
- */
-function addExternal(func) {
-    functionList.push(func)
-}
+    /** 拓展处理 ({dark}) => void */
+    let functionList = []
+    let darkMode = false
 
-/**
- * 设置暗色模式
- * @param {Boolean} dark
- */
-function setDarkMode(dark = false) {
-    darkMode = dark
-}
+    /**
+     * 处理渲染
+     * @param func
+     */
+    function addExternal(func) {
+        functionList.push(func)
+    }
 
-/**
- * 渲染
- * @param dark
- */
-function render(dark) {
-    Vditor.setContentTheme(dark?"dark":"light", THEME_PREFIX)
-    const root = document.getElementById("vditor-render").parentElement
-    root.classList.add("vditor-reset")
-    // Render
-    const renderTheme = dark?"dark":"classic"
-    Vditor.mathRender(root, {cdn: CDN})
-    Vditor.mindmapRender(root, CDN, renderTheme)
-    Vditor.mermaidRender(root, CDN, renderTheme)
-    Vditor.chartRender(root, CDN, renderTheme)
-    Vditor.abcRender(root, CDN)
-    Vditor.graphvizRender(root, CDN)
-    Vditor.flowchartRender(root, CDN)
-    // Run External Plugin
-    functionList.forEach(func => {
-        func({
-            dark
+    /**
+     * 设置暗色模式
+     * @param {Boolean} dark
+     */
+    function setDarkMode(dark = false) {
+        darkMode = dark
+    }
+
+    /**
+     * 渲染
+     * @param elId 搜寻位置
+     */
+    function vditorRender(elId="vditor-article-sign") {
+        Vditor.setContentTheme(darkMode?"dark":"light", THEME_PREFIX)
+        let root = document.getElementById(elId)
+        if (!root) {
+            console.log("[Vditor Render] Can't Found Article Root Element!");
+            return
+        }
+        root = root.parentElement
+        root.classList.add("vditor-reset")
+        // Render
+        const renderTheme = darkMode?"dark":"classic"
+        Vditor.mathRender(root, {cdn: CDN})
+        Vditor.mindmapRender(root, CDN, renderTheme)
+        Vditor.mermaidRender(root, CDN, renderTheme)
+        Vditor.chartRender(root, CDN, renderTheme)
+        Vditor.abcRender(root, CDN)
+        Vditor.graphvizRender(root, CDN)
+        Vditor.flowchartRender(root, CDN)
+        // Run External Plugin
+        functionList.forEach(func => {
+            func({
+                darkMode
+            })
         })
-    })
-}
+    }
 
-/**
- * 页面加载完成时处理任务
- */
-function initRender() {
-    window.addEventListener("load", () => render(darkMode))
-}
+    win.vditorRender = {
+        THEME_PREFIX,
+        CDN,
+        functionList,
+        darkMode,
+        addExternal,
+        setDarkMode,
+        vditorRender,
+        render: vditorRender
+    }
+})(window)