Skip to content

Commit

Permalink
🐛 Fix #24
Browse files Browse the repository at this point in the history
  • Loading branch information
justice2001 committed Feb 2, 2024
1 parent d48f8aa commit ed5f59c
Show file tree
Hide file tree
Showing 10 changed files with 101 additions and 69 deletions.
7 changes: 4 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 0 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
# halo-plugin-vditor

---

## NEXT VERSION

- ✨ 使用新的快速插入表单,界面更美观
- ✨ 支持渲染其他插件/主题的自定义组件(需要开发者支持)
- ✨ 允许用户禁用HTML代码块隐藏的特性

---

本插件将Vditor整合进Halo,支持所见即所得编辑模式。 Support English (*Only Editor)!

编辑器支持数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、graphviz 渲染、plantumlUML图
Expand Down
3 changes: 2 additions & 1 deletion build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@ build {
}

halo {
version = '2.11.3'
version = '2.12'
superAdminUsername = 'admin'
superAdminPassword = 'admin'
externalUrl = 'http://localhost:8090'
debug = true
}
2 changes: 1 addition & 1 deletion download_dist.bat
Original file line number Diff line number Diff line change
@@ -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%
Expand Down
5 changes: 5 additions & 0 deletions src/main/java/top/mczhengyi/vditor/utils/ScriptBuilder.java
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ public ScriptBuilder stylesheet(String path, String id) {
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();
}
Expand Down
9 changes: 5 additions & 4 deletions src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,19 @@ 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")) {
script.script("dark-mode/dark-%s.js".formatted(renderConfig.getDarkMode()), "dark-mode");
}
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();
}

Expand Down
3 changes: 2 additions & 1 deletion src/main/resources/static/external/halo-renders.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/static/external/media-render.js
Original file line number Diff line number Diff line change
@@ -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") {
Expand Down
20 changes: 20 additions & 0 deletions src/main/resources/static/pjax.js
Original file line number Diff line number Diff line change
@@ -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")
}
109 changes: 61 additions & 48 deletions src/main/resources/static/render.js
Original file line number Diff line number Diff line change
@@ -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)

0 comments on commit ed5f59c

Please sign in to comment.