diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d6f95f..86e4ffe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,11 @@ # 更新记录 -### TODO v1.6.0 +### v1.6.1 -- [ ] 更换vditor版本为官方版本 (pending vditor 3.9.9) -- [ ] 修复所见即所得模式下使用工具栏修改属性不生效的问题 (pending vditor 3.9.9) +- 🐛 修复单页文章加载Vditor资源时 version 未成功替换问题 `#27` +- 🐛 添加遗漏的 plantuml 渲染器 `#28` +- 🐛 修复多媒体链接无法渲染的问题 +- 🐛 修复多媒体渲染的大小问题 ### v1.6.0 diff --git a/doc/test/halo-render.md b/doc/test/halo-render.md new file mode 100644 index 0000000..6bdf1e4 --- /dev/null +++ b/doc/test/halo-render.md @@ -0,0 +1,47 @@ +```halo +tips:info +test1 +``` + +```halo** +tips:warn +22222 +``` + +```halo +tips:default +DEFAULT TIPS +``` + +```halo +tips:success +SUCCESS TIPS +``` + +```halo +tips:danger +DANGER TIPS +``` + +```halo +git:[@github/justice2001/halo-plugin-vditor] +``` + +```halo +gallery:grid[Grid] +![/截屏2024-01-17%2015.53.25](/upload/截屏2024-01-17%2015.53.25.png) +![123](/upload/截屏2024-01-17%2014.11.28.png) +``` + +```halo +gallery:linear +![/截屏2024-01-17%2015.53.25](/upload/截屏2024-01-17%2015.53.25.png) +![123](/upload/截屏2024-01-17%2014.11.28.png) +``` + + +![截屏2024-01-17 15.53.25.png](/upload/截屏2024-01-17%2015.53.25.png) + +![截屏2024-01-17 15.53.25.png](/upload/截屏2024-01-17%2015.53.25.png) + +![截屏2024-01-17 14.11.28.png](/upload/截屏2024-01-17%2014.11.28.png) diff --git a/doc/test/render.md b/doc/test/render.md new file mode 100644 index 0000000..0e3d959 --- /dev/null +++ b/doc/test/render.md @@ -0,0 +1 @@ +[WIP] \ No newline at end of file diff --git a/doc/test/test_case.md b/doc/test/test_case.md new file mode 100644 index 0000000..f90d364 --- /dev/null +++ b/doc/test/test_case.md @@ -0,0 +1,51 @@ +# 测试文档[WIP] + +为了保证插件更新过程的正常运行，需要进行下面的测试用例，测试包含下面几个大类： + +1. 基础功能，包含插件的基础设置功能，运行状态 +2. 插件配置，包含所有插件的配置功能 +3. 拓展功能，包含插件的拓展项测试 +4. 文档测试，检查插件在前台、编辑器中的显示状态 + +## 基础功能 + +- 编辑器是否正常加载 +- 编辑器能否正常使用 +- 前台是否能够正常渲染 + +## 插件配置 + +- 编辑器配置 + - 默认渲染模式是否正常工作 + - 打字机模式是否正常开启 + - 编辑器代码块渲染是否能够正常关闭 + - 启用快速插入功能是否正常启用（使用见下方用例） + - 是否能够禁用代码块隐藏 +- 文件格式 + - 能否正常限制上传的格式 +- 渲染 + - `内置渲染器` 能否正常禁用渲染器 + - `暗色模式` 切换主题，检查能否正常适配主题暗色模式 + - `渲染媒体标签` 检查渲染媒体标签是否正常运作 + - `仅在Markdown模式下渲染` 是否能够禁用在其他编辑器下渲染 +- 开发者配置 + - `启用Debugger` Debugger能否正常工作 + +## 拓展功能 + +WIP + +## 文档测试 + +借助文档测试，可以判断编辑器及渲染器能否正常渲染文章，这包含下列几种情况 + +- 编辑器能否正常工作 +- 能否在文章页面进行渲染 +- 能否在单页进行渲染 +- 能否兼容PJAX + +文章列表如下 + +- [Vditor 官方用例](vditor.md) +- [渲染器用例](render.md) +- [Halo Render测试](halo-render.md) \ No newline at end of file diff --git a/doc/test/vditor.md b/doc/test/vditor.md new file mode 100644 index 0000000..728de2f --- /dev/null +++ b/doc/test/vditor.md @@ -0,0 +1,396 @@ +Vditor 是一款**所见即所得**编辑器，支持 *Markdown*。 + +* 不熟悉 Markdown 可使用工具栏或快捷键进行排版 +* 熟悉 Markdown 可直接排版，也可切换为分屏预览 + +更多细节和用法请参考 [Vditor - 浏览器端的 Markdown 编辑器](https://ld246.com/article/1549638745630)，同时也欢迎向我们提出建议或报告问题，谢谢 ❤️ + +## 教程 + +这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。 + +> 引用文本：Markdown is a text formatting syntax inspired + +## 语法指导 + +### 普通内容 + +这段内容展示了在内容里面一些排版格式，比如： + +- **加粗** - `**加粗**` +- *倾斜* - `*倾斜*` +- ~~删除线~~ - `~~删除线~~` +- `Code 标记` - `` `Code 标记` `` +- [超级链接](https://ld246.com) - `[超级链接](https://ld246.com)` +- [username@gmail.com](mailto:username@gmail.com) - `[username@gmail.com](mailto:username@gmail.com)` + +### 提及用户 + +@Vanessa 通过 `@User` 可以在内容中提及用户，被提及的用户将会收到系统通知。 + +> NOTE: +> +> 1. @用户名之后需要有一个空格 +> 2. 新手没有艾特的功能权限 + +### 表情符号 Emoji + +支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成，可在个人设置中[设置常用表情](https://ld246.com/settings/function)。 + +#### 一些表情例子 + +😄 😆 😵 😭 😰 😅 😢 😤 😍 😌 +👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢 + +### 大标题 - Heading 3 + +你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。 + +> NOTE: 别忘了 # 后面需要有空格！ + +#### Heading 4 + +##### Heading 5 + +###### Heading 6 + +### 图片 + +``` +![alt 文本](http://image-path.png) +![alt 文本](http://image-path.png "图片 Title 值") +``` + +支持复制粘贴直接上传。 + +### 代码块 + +#### 普通 + +``` +*emphasize* **strong** +_emphasize_ __strong__ +var a = 1 +``` + +#### 语法高亮支持 + +如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如: + +##### 演示 Go 代码高亮 + +```go +package main + +import "fmt" + +func main() { + fmt.Println("Hello, 世界") +} +``` + +##### 演示 Java 高亮 + +```java +public class HelloWorld { + + public static void main(String[] args) { + System.out.println("Hello World!"); + } + +} +``` + +> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ... + +### 有序、无序、任务列表 + +#### 无序列表 + +- Java + - Spring + - IoC + - AOP +- Go + - gofmt + - Wide +- Node.js + - Koa + - Express + +#### 有序列表 + +1. Node.js + 1. Express + 2. Koa + 3. Sails +2. Go + 1. gofmt + 2. Wide +3. Java + 1. Latke + 2. IDEA + +#### 任务列表 + +- [x] 发布 Sym +- [x] 发布 Solo +- [ ] 预约牙医 + +### 表格 + +如果需要展示数据什么的，可以选择使用表格。 + +| header 1 | header 2 | +| -------- | -------- | +| cell 1 | cell 2 | +| cell 3 | cell 4 | +| cell 5 | cell 6 | + +### 隐藏细节 + +
+这里是摘要部分。 +这里是细节部分。 +
+ +### 段落 + +空行可以将内容进行分段，便于阅读。（这是第一段） + +使用空行在 Markdown 排版中相当重要。（这是第二段） + +### 链接引用 + +[链接文本][链接标识] + +[链接标识]: https://b3log.org + +``` +[链接文本][链接标识] + +[链接标识]: https://b3log.org +``` + +### 数学公式 + +多行公式块： + +$$ +\frac{1}{ +\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ +\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { +1+\frac{e^{-6\pi}} +{1+\frac{e^{-8\pi}}{1+\cdots}} +} +} +$$ + +行内公式： + +公式 $a^2 + b^2 = \color{red}c^2$ 是行内。 + +### 脑图 + +```mindmap +- 教程 +- 语法指导 + - 普通内容 + - 提及用户 + - 表情符号 Emoji + - 一些表情例子 + - 大标题 - Heading 3 + - Heading 4 + - Heading 5 + - Heading 6 + - 图片 + - 代码块 + - 普通 + - 语法高亮支持 + - 演示 Go 代码高亮 + - 演示 Java 高亮 + - 有序、无序、任务列表 + - 无序列表 + - 有序列表 + - 任务列表 + - 表格 + - 隐藏细节 + - 段落 + - 链接引用 + - 数学公式 + - 脑图 + - 流程图 + - 时序图 + - 甘特图 + - 图表 + - 五线谱 + - Graphviz + - 多媒体 + - 脚注 +- 快捷键 +``` + +### 流程图 + +```mermaid +graph TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end +``` + +### 时序图 + +```mermaid +sequenceDiagram + Alice->>John: Hello John, how are you? + loop Every minute + John-->>Alice: Great! + end +``` + +### 甘特图 + +```mermaid +gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2019-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2019-01-12 , 12d + another task : 24d +``` + +### 图表 + +```echarts +{ + "title": { "text": "最近 30 天" }, + "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } }, + "legend": { "data": ["帖子", "用户", "回帖"] }, + "xAxis": [{ + "type": "category", + "boundaryGap": false, + "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"], + "axisTick": { "show": false }, + "axisLine": { "show": false } + }], + "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }], + "series": [ + { + "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3, + "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"] + }, + { + "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2, + "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"] + }, + { + "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1, + "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"] + } + ] +} +``` + +### 五线谱 + +```abc +X: 24 +T: Clouds Thicken +C: Paul Rosen +S: Copyright 2005, Paul Rosen +M: 6/8 +L: 1/8 +Q: 3/8=116 +R: Creepy Jig +K: Em +|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\ +"C7"_B2A "B7"=B3|"Em"EEE E2G| +"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\ +1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe| +"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\ +"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:| +``` + +### Graphviz + +```graphviz +digraph finite_state_machine { + rankdir=LR; + size="8,5" + node [shape = doublecircle]; S; + node [shape = point ]; qi + + node [shape = circle]; + qi -> S; + S -> q1 [ label = "a" ]; + S -> S [ label = "a" ]; + q1 -> S [ label = "a" ]; + q1 -> q2 [ label = "ddb" ]; + q2 -> q1 [ label = "b" ]; + q2 -> q2 [ label = "b" ]; +} +``` + +### Flowchart + +```flowchart +st=>start: Start +op=>operation: Your Operation +cond=>condition: Yes or No? +e=>end + +st->op->cond +cond(yes)->e +cond(no)->op +``` + +### 多媒体 + +支持 v.qq.com，youtube.com，youku.com，coub.com，facebook.com/video，dailymotion.com，.mp4，.m4v，.ogg，.ogv，.webm，.mp3，.wav 链接解析 + +https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html + +### 脚注 + +这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。 + +[^1]: 第一个脚注定义。 + +[^bignote]: 脚注定义可使用多段内容。 + + 缩进对齐的段落包含在这个脚注定义内。 + + ``` + 可以使用代码块。 + ``` + + 还有其他行级排版语法，比如**加粗**和[链接](https://b3log.org)。 + +``` +这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。 +[^1]: 第一个脚注定义。 +[^bignote]: 脚注定义可使用多段内容。 + + 缩进对齐的段落包含在这个脚注定义内。 + + ``` + 可以使用代码块。 + ``` + + 还有其他行级排版语法，比如**加粗**和[链接](https://b3log.org)。 +``` + +## 快捷键 + +我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://ld246.com/article/1474030007391)（或者按 "`?` "😼） diff --git a/gradle.properties b/gradle.properties index 625fdf5..2877f83 100644 --- a/gradle.properties +++ b/gradle.properties @@ -1 +1 @@ -version=1.6.0-SNAPSHOT +version=1.6.1-SNAPSHOT diff --git a/src/main/java/top/mczhengyi/vditor/extension/VditorSinglePageContentHandler.java b/src/main/java/top/mczhengyi/vditor/extension/VditorSinglePageContentHandler.java index 0cbab6b..091ea5c 100644 --- a/src/main/java/top/mczhengyi/vditor/extension/VditorSinglePageContentHandler.java +++ b/src/main/java/top/mczhengyi/vditor/extension/VditorSinglePageContentHandler.java @@ -4,6 +4,7 @@ import com.google.common.base.Throwables; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf4j; +import org.pf4j.PluginWrapper; import org.springframework.stereotype.Component; import reactor.core.publisher.Mono; import run.halo.app.plugin.ReactiveSettingFetcher; @@ -16,6 +17,8 @@ import top.mczhengyi.vditor.utils.ScriptUtils; @Slf4j public class VditorSinglePageContentHandler implements ReactiveSinglePageContentHandler { private final ReactiveSettingFetcher reactiveSettingFetcher; + + private final PluginWrapper pluginWrapper; @Override public Mono handle(SinglePageContentContext contentContext) { return reactiveSettingFetcher.fetch("render", RenderConfig.class) @@ -23,7 +26,8 @@ public class VditorSinglePageContentHandler implements ReactiveSinglePageContent // 启用条件：开启渲染器，在启用仅Markdown渲染时当前页面为Markdown if (renderConfig.getEnableRender() && (!renderConfig.getOnlyMarkdown() || contentContext.getRawType().equals("markdown"))) { - contentContext.setContent(ScriptUtils.renderScript(renderConfig) + "\n" + contentContext.getContent()); + var content = ScriptUtils.renderScript(renderConfig) + "\n" + contentContext.getContent(); + contentContext.setContent(ScriptUtils.setContentProperty(content, pluginWrapper)); } return contentContext; }) diff --git a/src/main/resources/static/external/media-render.js b/src/main/resources/static/external/media-render.js index fa90007..2012131 100644 --- a/src/main/resources/static/external/media-render.js +++ b/src/main/resources/static/external/media-render.js @@ -1,8 +1,5 @@ vditorRender.addExternal((conf) => { console.log("Run External Function: Media Render!") - let mediaRenderOption = document.getElementById("vditor-render").dataset.mediarender - if (mediaRenderOption==="true") { - let article = document.getElementById("vditor-render").parentElement; - Vditor.mediaRender(article) - } + let root = document.getElementById("vditor-article-sign").parentElement; + Vditor.mediaRender(root) }) \ No newline at end of file diff --git a/src/main/resources/static/render-utils.js b/src/main/resources/static/render-utils.js index a3e30e3..6f9eced 100644 --- a/src/main/resources/static/render-utils.js +++ b/src/main/resources/static/render-utils.js @@ -54,6 +54,7 @@ Vditor.abcRender(root, CDN) Vditor.graphvizRender(root, CDN) Vditor.flowchartRender(root, CDN) + Vditor.plantumlRender(root, CDN) // Run External Plugin functionList.forEach(func => { func({ diff --git a/src/main/resources/static/themes/dark.css b/src/main/resources/static/themes/dark.css index 7cc3527..741fdd3 100644 --- a/src/main/resources/static/themes/dark.css +++ b/src/main/resources/static/themes/dark.css @@ -11,3 +11,17 @@ Modified from vditor content_theme .language-graphviz polygon { fill: rgba(66, 133, 244, .36); } + +.vditor-reset .iframe__video { + display: block; + margin: 0 auto !important; + min-width: 80%; + min-height: 36vh; + border: none; +} + +.vditor-reset video { + display: block; + margin: 0 auto !important; + min-width: 80%; +} \ No newline at end of file diff --git a/src/main/resources/static/themes/light.css b/src/main/resources/static/themes/light.css index aa1be9a..1b89938 100644 --- a/src/main/resources/static/themes/light.css +++ b/src/main/resources/static/themes/light.css @@ -1,4 +1,18 @@ /** This is a theme for halo-plugin-vditor Modified from vditor content_theme - */ \ No newline at end of file + */ + +.vditor-reset .iframe__video { + display: block; + margin: 0 auto !important; + min-width: 80%; + min-height: 36vh; + border: none; +} + +.vditor-reset video { + display: block; + margin: 0 auto !important; + min-width: 80%; +} \ No newline at end of file