Vditor 编辑器

Vditor 编辑器

18,523
12,883

适用于 Halo 的 Vditor 编辑器

下载

安装到 Halo

方式一

如果安装了应用市场插件,可以直接在应用市场中搜索Vditor 编辑器并安装。

方式二

输入你的 Halo 站点地址,点击安装之后会重定向到你 Halo 后台并自动安装,Halo 的版本需要 >= 2.6.0。

方式三

点击手动下载,然后在 Console 上传。

halo-plugin-vditor




GitHub Release

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

编辑器支持数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、graphviz 渲染、plantumlUML图

如果您在使用本插件的过程中发现了BUG或新的建议,欢迎您在 Github ISSUE 中提出

Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

✨特性

  • 集成强大的Markdown编辑器Vditor进Halo中
  • 提供所见即所得(wysiwyg)、即时渲染(ir)、分屏渲染(sv)三种渲染模式
  • 支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML图
  • 支持字符计数
  • 支持在前台注入渲染脚本(需在设置中开启)
  • 更多强大的语法功能请 ->到这<- 查看 (部分功能仍未支持)
  • 支持独有的自定义语法,详细语法请参考 这里

💻使用方式

  1. 下载,目前提供以下下载方式:
  2. 安装,插件安装和更新方式可参考:https://docs.halo.run/user-guide/plugins
  3. 安装完成之后,进入文章新建页面即可在右上角编辑器切换按钮中看到 Vditor 编辑器。

🤖兼容性

下面是当前已知的兼容性问题

  • 在同时使用ToolBench插件时,数学公式、脑图、图表、流程图、甘特图、时序图、五线谱无法正常渲染。由于此插件修改了页面结构,所以不会修复
  • Vditor渲染器不会根据主题暗色模式进行改变,当前仅支持跟随系统暗色模式

📒TODO

如果可以支持的功能将会加入到这个TODO列表中,列表中没有的功能也未必是不能支持的,可能只是开发者没有想到

插件的进度在 Gitea 进行管理,当前Gitea不支持您评论,如果您想讨论Issue可以直接在Github上打开一个Issue并表明要讨论的Gitea Issue,您的回复将会被同步到Gitea。

  • 能够在Halo中运行Vditor编辑器
  • 支持数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、graphviz 渲染、plantumlUML图
  • 添加编辑器默认展示模式设置
  • 优化代码命名
  • 添加打字机模式
  • 支持附件选取插入
  • 支持暗色主题渲染
  • 支持多媒体渲染
  • 拆分配置为编辑器配置与渲染配置两部分
  • 添加多国语言支持 手搓翻译函数实现
  • 跟随主题的暗色模式(joe主题)
  • 将Vditor前台渲染资源全量引入本地
  • 支持代码高亮及复制
  • 自定义暗色模式触发方式
  • 支持AI编写与修改
  • 内置渲染器与ToolBench不兼容

🙏 鸣谢

特别感谢来自 Halo 的投喂

特别感谢Vditor,本插件大部分内容均为此编辑器提供

  • Vditor 一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。
  • Lute:🎼 一款结构化的 Markdown 引擎,支持 Go 和 JavaScript
  • highlight.js:JavaScript syntax highlighter
  • mermaid:Generation of diagram and flowchart from text in a similar manner as Markdown
  • incubator-echarts:A powerful, interactive charting and visualization library for browser
  • abcjs:JavaScript library for rendering standard music notation in a browser

🏗开发日志

🧑‍💻开发环境

插件开发的详细文档请查阅:https://docs.halo.run/developer-guide/plugin/hello-world

git clone git@github.com:justice2001/vditor-mde.git

# 或者当你 fork 之后

git clone git@github.com:{your_github_id}/vditor-mde.git
cd path/to/plugin-starter
# 下载依赖包

# macOS/Linux执行:
chmod a+x download_dist.sh
./download_dist.sh

# Windows
# 要求安装7Zip并将7Zip的文件夹加入Path环境变量
./download_dist.bat
# macOS / Linux
./gradlew pnpmInstall

# Windows
./gradlew.bat pnpmInstall
# macOS / Linux
./gradlew build

# Windows
./gradlew.bat build

修改 Halo 配置文件:

halo:
  plugin:
    runtime-mode: development
    fixedPluginPath:
      - "/path/to/plugin-starter"

🧑‍💼发布

您可以在 Gitea ISSUE 看到该项目的进展

项目发布在 GithubGitee

📄参考文档

安装到 Halo

方式一

如果安装了应用市场插件,可以直接在应用市场中搜索Vditor 编辑器并安装。

方式二

输入你的 Halo 站点地址,点击安装之后会重定向到你 Halo 后台并自动安装,Halo 的版本需要 >= 2.6.0。

方式三

点击手动下载,然后在 Console 上传。

这是一个开源应用,我们推荐优先在开源仓库中提交 issue,以便开发者更好地接收和跟进问题。

去提交 issue