v1.7.25 简介 该版本修复了 textarea 转换为 div 带来的一系列问题,建议升级至最新版。 主要特性如下: 支持五线谱渲染、Word 粘贴、全屏预览及复制数学公式源码 提供 toolbar 按钮添加、消息提示及独立 Markdown 渲染的接口 支持自定义 emoji,并对原有 emoji 进行整理,数 ..

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

v1.7.25 简介

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

主要特性如下:

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

v1.7.25 升级

v1.7.25 变更记录

历史版本变更请浏览这里

五线谱预览

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

    Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。在线试用请移步 https://hacpai.com/guide/markdown

    35 引用 • 403 回帖 • 6 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等。

    1167 引用 • 3196 回帖 • 539 关注
  • Markdown

    Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过类似 HTML 的标记语法,它可以使普通文本内容具有一定的格式,具体语法请参考 Markdown 教程

    99 引用 • 679 回帖 • 592 关注
  • 发布新闻
    7 引用 • 70 回帖
5 回帖
请输入回帖内容...
  • Vanessa

    可以使用 %%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 回复
  • 其他回帖
  • 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 回复
  • 查看更多回帖