登录 注册

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

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

新功能截图

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 图片代码显示 改进功能

历史版本变更请浏览这里。

昆明 位置
2 感谢
8 回帖
3
2
1.9k 284 304 242 281 33 8 22 712

相关帖子

8 回帖
Vditor v3.4.7 发布，支持自定义自动补全

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • zhangfeibiao • • 1 评论
    订阅者 捐赠者

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

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

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

    1 回复
    只有声音，没有视频。你更新到 3.4.7 试试
    Vanessa •
    @Vanessa 我看了一下，这个视频好像没办法放大，但是右键保存到本地是可以播放的。
    expoli •
  • Vanessa •
    订阅者 付费者 作者 MOD

    你用最新版使一下，回车的话 3 会消失，我不太清楚你的按键情况。

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

  • liuzihui •

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

    1 回复
  • Vanessa •
    订阅者 付费者 作者 MOD

    可参照以下代码：

    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
我们终此一生，就是要摆脱他人的期待，找到真正的自己。 昆明
回帖
8940
 帖子
756
 积分
140998