Vditor v3.4.7 发布,支持自定义自动补全

本贴最后更新于 1311 天前,其中的信息可能已经斗转星移

新功能截图

Ant Design 主题

image.png

自动补全

imagetcknp0z.png

YAML Front Matter

image1zkqkaf.png

简介

该版本主要特性如下:

  • 对原有 at 进行自定义扩展,支持诸如 #@(( 等自定义符号的自动补全
  • 支持 YAML Front Matter
  • 支持 Mark 标记
  • 支持日语
  • 增加 Ant Design 主题
  • 改进大量细节

升级

  • @ 扩展为自定义符号 options.hint.at => options.hint.extend: IHintExtend[]

文档更新

  • 删除线快捷键修改为 ⌘-D
  • 支持 mark 标记,并为其添加对应的配置 options.preview.markdown.mark

变更记录

  • 717 在 IR 模式下插入特殊字符的 bug 修复缺陷
  • 719 支持 ==Mark== 标记语法 引入特性
  • 711 调试工具栏图颜色不适配暗黑主题 改进功能
  • 718 脚注太长浮层渲染溢出 修复缺陷
  • 716 insertValue 无法插入 html 文本 改进功能
  • 714 preview 数学公式解析问题 修复缺陷
  • 709 操作栏按钮快速点击问题「ir」「wysiwyg」模式 改进功能
  • 706 光标非正常移动 修复缺陷
  • 676 请求:增加 Ant Design 主题 引入特性
  • 703 codeblock with backspace(IR) 修复缺陷
  • 708 linkToImgUrl 方法添加 token 改进功能
  • 701 复制到微信、知乎的改进 改进功能
  • 684 图片使用引用风格时的解析问题 修复缺陷
  • 698 图片上传解析问题 修复缺陷
  • 696 图片参考式解析问题 修复缺陷
  • 694 Fix expandmarker for node element 修复缺陷
  • 697 修复 Lute 类型的定义 开发重构
  • 687 Code 内 Enter/Backspace/Delete 可能不触发 input,并导致 Code 不及时渲染 改进功能
  • 685 options.icon 增加判断如果没有该属性则不引入 js 改进功能
  • 689 存在软换行时,选中文本执行 Backspace,会导致内容异常 修复缺陷
  • 686 修正 Issue:Code 内 Delete 键可能删除过多内容 & Code 内 回车后光标位置异常 修复缺陷
  • 681 修正 ExpandMarker 规则,避免无法取消选中区域 修复缺陷
  • 653 [Feature Request] Hashtag 引入特性
  • 441 对标 Typora 反馈 改进功能
  • 669 links problem(Wysiwyg) 改进功能
  • 667 lists (SV) 修复缺陷
  • 446 改进复制粘贴链接体验 引入特性
  • 658 SV 模式打字机模式问题 修复缺陷
  • 655 SV 模式代码块开始标记符 info 后回车问题 修复缺陷
  • 656 SV 模式有序列表延续问题 修复缺陷
  • 654 SV 模式 Placeholder 显示问题 修复缺陷
  • 650 全选剪切及任务列表样式和点击问题改进 修复缺陷
  • 636 SV 模式 Setext 标题问题 修复缺陷
  • 647 即时渲染模式输入 ``` 后会弹出 hint,此时执行 undo 后, hint 不消失 改进功能
  • 643 支持 YAML Front Matter 引入特性
  • 648 added ja_JP lang 改进功能
  • 644 粘贴多行代码时,避免代码段与当前行内容混淆在一起 改进功能
  • 639 列表嵌套代码块后输入中文的问题 修复缺陷
  • 641 清空 undo 栈后,第一次编辑操作无法进行记录 修复缺陷
  • 640 options.icon 无法进行切换 改进功能
  • 638 ir 模式下图片编辑时很难触发 md 图片代码显示 改进功能

历史版本变更请浏览这里

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • zhangfeibiao 1 评论

    请问下 markdown 表格语法渲染不出来是因为没有部署 lute_http 吗?
    |-|-| 这种格式解析不出来,一定要 |---|---|

    部署 lute_http 解析正常了,已解决
    zhangfeibiao
  • expoli 2 评论

    v3.4.1 版本、分屏预览模式下,自动格式化有问题,序号排序之后两次回车撤销序号之后,格式错乱,会自动添加空格缩进、导致格式错乱。
    具体演示如下、其它编辑模式下没问题:

    1 回复
    只有声音,没有视频。你更新到 3.4.7 试试
    Vanessa
    @Vanessa 我看了一下,这个视频好像没办法放大,但是右键保存到本地是可以播放的。
    expoli
  • 你用最新版使一下,回车的话 3 会消失,我不太清楚你的按键情况。

    PS:我这里用 QQ 录屏上传是正常的。
    QQ20200831114848.mp4

  • liuzihui

    您好 请问下 自动补全里面的列表的数据可以实时查询吗,输入 @ 后再输入内容,再用内容的字段去查询用户列表。目前我这个做法不会出现自动补全的选择框,请问是什么原因呢

    1 回复
  • 可参照以下代码:

    hint: {
          extend: [
            {
              key: '@',
              hint: (key) => {
                let atUsers = []
                $.ajax({
                  ...
    	      async: false,
                  success: function (result) {
                      atUsers = result.data.map((item) => {
                        item.value = `@${item.userName}`
                        item.html = `<img src='${item.userAvatarURL}'/> ${item.userName}`
                        return item
                      })
                  },
                })
                return atUsers
              },
            }],
        }
    
    1 回复
  • liuzihui 2 评论

    感谢您的回复,我参照您的代码改过之后,在 return atUsers 前打印出来的数据,数据格式都是没有问题的

    Q954CG8J77JQR066.png

    但还是未弹出选择用户的下拉框,请问还有什么需要注意的吗?

    hint: {
              extend: [
                {
                  key: '@',
                  hint: (key) => {
                    const data = {
                      filter: key,
                      pageNo: 1,
                      pageSize: 3
                    }
                    let atUsers = []
                    this.$api.getUserByFilterNoAsync(data).then((res) => {
                      if (res.list) {
                        console.log('res', res.list)
                        atUsers = res.list.map((item) => {
                          item.value = `${item.id}`
                          item.html = `<img src='${item.avatar}'/> ${item.nickname}`
                          console.log('item', item)
                          return item
                        })
                        this.$nextTick(() => {
                          console.log('atUsers', atUsers)
                          return atUsers
                        })
                      }
                    })
                  }
                }]
            }
    
    需要使用同步
    Vanessa 1
    @Vanessa 感谢大佬 问题已解决!
    liuzihui
  • liuzihui 4 评论

    @Vanessa 大佬~请问下 选择完 @ 用户后的回调在哪呀,我不知道在哪写储存用户信息用户 id

    搞定了?
    Vanessa
    @Vanessa 还没有,选择完 @ 用户需要把 id 传给后端,想问下选择用户时的回调是啥呀,或者有什么地方可以储存选择的用户 id 吗
    liuzihui
    @liuzihui 把所有内容传后后台,后台解析
    Vanessa
    @Vanessa 好的 谢谢~~大佬!!
    liuzihui
  • tainylong 1 评论

    @Vanessa 补全后 如何自定义格式保存 还有 删除的时候 能否完整的删除 不要逐字删除

    用 md 保存即可
    Vanessa
请输入回帖内容 ...
Vanessa MOD
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明