Code Monkey home page Code Monkey logo

halo-plugin-vditor's Introduction

halo-plugin-vditor

本插件将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不兼容

🙏 鸣谢

特别感谢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 [email protected]:justice2001/vditor-mde.git

# 或者当你 fork 之后

git clone [email protected]:{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-plugin-vditor's People

Contributors

justice2001 avatar ruibaby avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

ruibaby

halo-plugin-vditor's Issues

即时渲染模式下拖拽图片base64显示过长

开启即时渲染模式,拖拽图片进行上传,文件会被转化成base64,内容显示过长,有数页之多,导致浏览器卡顿甚至假死的现象,无法正常使用和编辑,严重影响体验
Snipaste_2023-12-27_11-22-11

关于行内公式渲染等问题

  1. 行内公式问题
    数字以行内公式的形式呈现时需要在$符后额外再打一个空格才能渲染,例如$12$无法渲染,需要$ 12$才可以,这点是否有待改进?

  2. 编辑器能否和主题一样使用自定义的字体

关于自定义块

现在的自定义的快捷按钮,只支持编辑器内置的,未来有没有机会在设置提供一个让用户自行定义的快捷插块,然后支持导出导入配置等,以配合主题提供更便捷的功能。或者让主题提供一个配置文件,然后插件直接读取完成一个不同主题拥有不同便捷插入按钮的功能?

插件非常好用,感谢付出!!!

建议为静态资源添加版本号参数

RT,建议为静态资源添加版本号参数,用于在升级后更新资源缓存。

public static String basicScript(RenderConfig renderConfig) {
return """
<link rel="stylesheet" type="text/css" href="/plugins/vditor-mde/assets/static/dist/index.css" id="vditor-style" />
<script src="/plugins/vditor-mde/assets/static/dist/method.min.js"></script>
<script src="/plugins/vditor-mde/assets/static/render.js" id="vditor-render"
data-dark="%s" data-mediaRender="%s"></script>
""".formatted(renderConfig.getDarkMode(), renderConfig.getMediaRender());
}

可以参考:https://github.com/halo-dev/plugin-search-widget/blob/7390bfa4d6c436dd44dc00b1ef4c80de98f2899e/src/main/java/run/halo/search/widget/SearchWidgetHeadProcessor.java#L37

与Halo界面样式适配问题

开启插件后,应用vditor编辑器,鼠标放在右边区域滑动鼠标滚轮出现滚动条,哪怕没有键入任何内容
image

对于PJAX支持不完善的问题

问题描述:

情况1

图片

在目前的设置下,通过Hao主页进入文章

图片
图片

因为使用了pjax,所以并没有触发渲染。

情况2

即使从主页先进入Halo原生编辑器编写的页面
如:https://developer-zeng.com/archives/1704211071862
图片
然后通过侧栏切入:https://developer-zeng.com/archives/1706092867029
图片
依然没有进行渲染
图片

疑惑:

  • <仅在Markdown模式下渲染> 是如何控制渲染时机的?
  • 关闭 <仅在Markdown模式下渲染> 后,理应在正常 Halo原生编辑器编写的页面 就加载渲染代码,但是似乎没有加载?

添加自定义语法的能力

Vditor上游已经完成对自定义渲染器的支持,下个版本插件会尝试加入自定义渲染器的能力。

提供替换jsdelivr的设置选项

image
如图,插件使用了大量jsdelivr代理的js文件,然而总所周知的原因访问速度很慢
希望能提供设置选项让用户能用大陆镜像站地址去替换掉这些地址

编辑已发布文章的内容,只更改图片链接,不更改文章文字内容,点发布,提示发布成功,但实际不会保存新图片链接

系统信息
外部访问地址: https://blog.209902.xyz/
启动时间: 2024-01-17 01:35
版本: 2.11.3
构建时间: 2023-12-27 12:13
Git Commit: 8e9b07d
Java: IBM Semeru Runtime Open Edition / 17.0.9+9
数据库: H2 / 2.2.224
操作系统: Linux / 5.10.0-8-amd64
已激活主题: Dream
已启动插件:
Vditor编辑器
对象存储(Amazon S3 协议)
RSS
应用市场
搜索组件
Sitemap
评论组件
使用的哪种方式运行?
Docker Compose

在线站点地址
https://blog.209902.xyz/archives/1705491991649

发生了什么?
发现个BUG,Halo博客,Markdown编辑器(Vditor Markdown),编辑已发布文章的内容,只更改图片链接(更换图床,换新链接但图片还是那一张),不更改文章文字内容,点发布,提示发布成功,但实际不会保存新图片链接,再点编辑还是原来的图片链接,我还以为是CDN的问题,排查了半天才发现是Halo或者是Markdown编辑器的问题。

解决办法,更新图片链接的时候,也要更改文字内容,加个文字标点什么的都行(空格不行)。

在halo提了issue,他回复说是编辑器插件的问题,让我来这边提

相关日志输出
No response

附加信息
No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.