Vditor v1.7.25 发布,支持五线谱,对 MD 渲染进行分包优化

本贴最后更新于 1909 天前,其中的信息可能已经时移世易

v1.7.25 简介

该版本修复了 textarea 转换为 div 带来的一系列问题,建议升级至最新版。

主要特性如下:

  • 支持五线谱渲染、Word 粘贴、全屏预览及复制数学公式源码
  • 提供 toolbar 按钮添加、消息提示及独立 markdown 渲染的接口
  • 支持自定义 emoji,并对原有 emoji 进行整理,数量提升为 1503
  • 对用户细节体验进行优化

在此感谢 jakekwak 提出的一些列 issue。

v1.7.25 升级

  • option.preivew.show?: boolean => option.preivew.mode?: string
  • 移除 option.editorName

v1.7.25 变更记录

  • 116 Vditor 解析   等空格相关的内容解析完后,光标会回到头部 question
  • 115 测试 issues 变 0 invalid
  • 114 封装 Preview enhancement
  • 113 emoji 整理 enhancement
  • 111 emoji problem bug
  • 110 支持 Word 粘贴 feature
  • 109 移除 option.editorName 变量 bug
  • 108 hint.emoji 支持自定义 feature
  • 107 custom emoji "trollface" & "huaji" is not working at demo mode bug
  • 106 添加 Chroma 样式 feature
  • 105 firefox 兼容性 bug
  • 104 vs code 粘贴代码问题 bug
  • 103 光标位置应在正中间 feature
  • 102 安装依赖后自动删除已有的依赖 question
  • 101 video 标签移动端溢出 enhancement
  • 100 esc/选中工具栏中的表情或标题后输入框中的 at 及 emoji 的提示应消失 bug
  • 98 支持 shift + tab feature
  • 99 esc/选中工具栏中的表情或标题后输入框中的 at 及 emoji 的提示应消失 bug
  • 97 添加五线谱支持 feature
  • 96 工具栏没有配置 preview, both, redo, undo 在其他操作时会报错 bug
  • 95 1.6.x 细节 bug 修改 bug
  • 94 数学公示支持源码查看 feature
  • 93 新增预览模式设置接口 feature
  • 92 现在 toolbar 里面有演示的按钮吗 question
  • 91 No default jsDelivr CDN file set development
  • 90 编辑区域底部留白且光标所在位置应在可视区域内 feature
  • 89 自定义 toolbar 事件、添加按钮到 toolbar 上 feature
  • 88 resize 优化 enhancement
  • 87 获取文本时对 HTML 实体进行转换 bug
  • 86 代码分包优化 feature
  • 85 改善提示且提供提示接口 feature
  • 84 支持全屏预览 feature

历史版本变更请浏览这里

五线谱预览

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:|
```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:|   
```

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • darren 1 1 赞同

    当前版本的有序/无序/任务列表仅仅只是在光标处插入了 1. 或者是 * 以及 * [ ] 列表符号而已,并不是真正意义的实现了 markdown 的列表功能

    比如当光标在某段文字中间的时候其实并没有实现列表效果,而且一直点会一直增加,而不是添加列表/取消列表的这种 toggle 效果

    个人愚见哈,我感觉正确的操作应该是:

    1. 光标有选中一段文本的时候,单独将这段文本前后换行空出来,然后再将文字前面加上列表标识
    2. 光标没有选中文本的情况下,直接在当前行最前面添加列表标识符
    3. 当光标已经是处于列表所在行,且没有选中文本的时候 当前列表类型的按钮应该是选中状态,这样可以再次点击反向的取消列表
    4. 当光标已经是处于列表所在行,且选中一段文本或者光标所在行为引用块内时,此时应该支持层级嵌套的列表(列表下的子列表,或者引用块里面的列表)
    5. 当光标所在的地方为代码块或者粗体或者行内代码块内这些不能够添加列表的地方时 列表按钮应该是置灰不让从这些地方生成列表的

    可能还有很多细节……

    1 回复
    1 操作
    darren 在 2019-09-24 14:13:37 更新了该回帖
  • 88250 1 赞同

    考虑得非常细致,感谢建议。对选中区域的操作我们打算在 Vditor 实现所见即所得特性后再考虑实现,因为实现起来确实有点难度,需要有良好的数据结构进行支撑。这个核心数据结构在我们的设计中是 Markdown 语法树,所有操作、转换都是通过操作树来进行实现的,比如渲染 HTML、格式化 Markdown、渲染 AST 图表。

    在你列举的场景中,有一个非常重要的概念就是光标插入位置,要支持这些场景的基础是需要知道光标当前的位置所映射的语法树节点。知道光标对应节点以后就可以根据节点上下文(兄弟/父子节点)和操作(比如转换列表或者加粗)来确定需要如何操作节点,具体实现逻辑估计会参考 Word 来实现,这样大家都比较习惯。

    目前我们正在实现源码映射(Markdown 源码位置和 AST 节点关联),有了这个以后会先实现所见即所得特性,然后再实现快捷操作。技术路线基本还是清晰的,就看细节实现了。

  • will-mei 1 赞同

    五线谱的语法规范是什么, 为什么示例的五线谱里面没有和弦的写法啊.

    1 回复
  • 可以使用 %%staves (chords melody) 将其合并

    ```abc   
    M:C
    L:1/4
    K:C
    V:chords
    "C"y2 "Fm7"y2|"C"y "C#dim7"y "Dm7"y "G7"y||
    V:melody
    c4-|c4||
    ```
    
    1 回复
  • will-mei 1

    应该是我没说清楚, 我的意思是不是写和弦名称, 而是和弦的音符直接写出来, 试了一下现在找到方法了, 好像可以用 & 符号将音符放在一起, 比如:

    ```abc   
    M:C
    L:1/4
    K:C
    V:melody
    "Cmaj7"C4&E4&G4&B4|
    ```
    

    这样就可以直接写出和弦的音符了, (● ˇ ∀ ˇ ●) .