vanessa219 / vditor

♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.

Hey 👋, I'm Vanessa!

我在链滴的近期动态

⭐️ Star 个人主页 后会自动更新，最近更新时间：2024-05-27 08:39:03

📝 帖子   💬 评论   🗣 回帖   🌙 清月   👨‍💻 用户   🏷️ 标签   ⭐️ 关注   👍 赞同   💗 感谢   💰 打赏   🗃 收藏

• 💗💬 点击导航标题时，经常由于鼠标的瞬间小位移，把单击误判为“拖动标题”

  @Vanessa 这种“闪烁”确实在一定程度上会有干扰（尤其是需要快速跳转查看的时候），最好是拖动一段距离之后才算开始拖动 [视频]

• 💗📝 点击导航标题时，经常由于鼠标的瞬间小位移，把单击误判为“拖动标题”

  正常情况 正常情况下，当我点中导航栏中某个标题，然后按住左键，稍微移动鼠标，就会悬浮出该标题名，并跟随鼠标移动，见下面视频，这是正常案例。 [视频]异常情况（让我不爽的地方） 异常情况是，当我鼠标在导航栏移动到某个标题然后点击打开时，有时候软件会误判我要点击该标题然后拖动，从而会出现拖动时才有的画面，对此我相当难受。见 ..

• 💬 点击导航标题时，经常由于鼠标的瞬间小位移，把单击误判为“拖动标题”

  感谢反馈，下个版本调整到必须大于 2px，还麻烦再体验体验 [链接]

• 🗣 思源内置的任务列表需要如何设置才能隐藏完成的项目呢？

  @iamqiz 呃，标题上说的是隐藏，正文退而求其次说的能下沉也行。应该要优先隐藏吧

• 🗣 思源内置的任务列表需要如何设置才能隐藏完成的项目呢？

  @iamqiz 用楼下的方法就可以了，这个是对楼下的补充。这个有其他必须使用的场景再添加即可。

• 💗💬 取消分屏 没有快捷键, 有考虑吗? 再按一下取消分屏, 感觉还挺爽的

  @Vanessa 需求：取消分屏 支持配置快捷键

• 💗📝 取消分屏 没有快捷键, 有考虑吗? 再按一下取消分屏, 感觉还挺爽的

• 🗣 取消分屏 没有快捷键, 有考虑吗? 再按一下取消分屏, 感觉还挺爽的

  这个可以建个 issue 给我，快捷键默认留空即可。

vditor's Issues

所见即所得模式录音bug

• 所见即所得模式下录音后切换至普通的编辑模式，整个编辑界面会被遮罩锁死，只能再次通过点击录音/停止录音后解除编辑模式下的录音遮罩
• audio音频标签控件从编辑模式切换回所见即所得模式后无法正确渲染，直接html文本片段输出了

tip 会遮挡住输入框的上部

add row 添加快捷键

1. more cell (suggestion: shift+tab)
2. how to escape (same as other shortcut key shift+ctrl+e)
   

视频解析问题

http://www.mp4ba.cc/guochanju/563.html 不应该解析成视频。

wysiwyg 性能优化

通过局部渲染进行性能优化。

统一后端接口规范

请求统一

请求方法使用 POST，参数为 body JSON。

• markdown

   {
       "markdownText": ""
   }

• at

    {
        "name": ""
    }

• upload

  FormData
  

• fetch upload

  {
      "url": ""
  }

返回值统一

{
    "code": 0,
    "msg": "",
    "data": "json type"
}

引用多层嵌套无法一次性回到最外层

编辑预览同步滚动改进

https://hacpai.com/article/1558270349379/comment/1566437781465?r=88250

可基于源码映射来进行改进，编辑区中间一行位置映射到某个 DOM 节点上，这样就非常精确了。

wysiwyg 切换后，列表紧凑模式错误

First loaded

after ctrl+shift+m, ctrl+shift+m

添加 option.value

当前如果在react中使用父组件传递过来的defaultValue值时无法通过数据流渲染到vditor，只能通过setValue方法处理，该方法只能在compoenntDidUpdate中调用，可能存在堆栈溢出的现象。

wysiwyg 时代码块、流程图等直接进行渲染，不展示源码

支持以下站点、视频、音频解析：

支持以下站点、视频、音频解析：

• youtu
• youku
• qq
• coub
• facebook

---

• .mp4
• .m4v
• .ogg
• .ogv
• .webm

---

• .mp3
• .wav

Originally posted by @Vanessa219 in b3log/vditor#117 (comment)

代码渲染问题，抛出KaTeX的错误信息。

输入下面的文本，发出错误：

对象的赋值是个引用的过程，上列中$b=new a; $c=$b; 其实等效于$b=new a; $c=&$b;

支持站点、视频、音频解析

Is is possible to support to embed youtube link ( see https://ckeditor.com/ckeditor-5/demo/ )

looks like below image

添加支持思维导图的功能

有序列表顺序错误

When pressed 'Enter' key, is it correct to add one more line?

Vditor.preview不能渲染

在vue中我有两个组件使用了Vditor，组件A用的是Vditor.preview，代码如下:

mounted() {
       Vditor.preview(document.getElementById('vditorPreview'),this.html, {
           className: 'preview vditor-reset vditor-reset--anchor',
           hljs: {
           lineNumber: true,
                    enable: true
           },
           speech: {
                enable: true,
           },
           anchor: true
     })
}

打开后报错

 Cannot read property 'options' of undefined

另一个组件B用的是编辑模式,代码如下:

mounted() {
      this.vditor = new Vditor('vditorEdit', {
          height: 600,
          tab: '\t',
          preview:{
                delay: 200,
          }
      })
}

现在的问题是打开A会报上面的错误，然后我再打开B是正常的，再回去打开A又不报错了，如果再次刷新，还是报错

two 'enter' at code block

1. Is it correct two 'enter' at end of line?
   

2. Is there any keyboard shortcut key?
   

添加 CDN 配置

如果使用 CommonJS 模式，CDN 读取依旧为官方的，需要添加配置项

标题前的段落结尾为 `\n` 时，标题的选中和取消会关联到 `\n`

支持 CDN 快速切换

• 将对应版本的 https://cdn.jsdelivr.net/npm/vditor@版本号/dist 目录拷贝到 cdn 下
• 为 IOptions, IPreviewOptions 配置及 highlightRender, mathRenderByLute, mathRender, abcRender, chartRender, mermaidRender 方法参数加 cdn 配置

wysiwyg 表格添加居中居左居右

编辑到最底部时，回车不会滚动到最下面

编辑模式，一直按回车，最终超出编辑区域，滚动条不会滚动到最底部

Setext Heading 2 处理

same three dashs(---), not working at header

Heading 2

Horizontal rules

---

为列表 indent 和 outdent 添加快捷键

所见即所得

需要设计 DOM 结构、考虑局部渲染。DOM 结构依赖 https://github.com/88250/lute 生成

支持类似 Typora 的即时渲染模式（保留 Markdown 标记符）

Can you do like this ( Typora markdown editor)

CDN 切换优化

移除打包时对 package.json 的配置，否则在 import 后无法修改 cdn

在内联数学公式前进行删除操作会删除公式

first click, delete key after second click

When code copied and pasted....

wysiwyg 块工具栏添加文字说明

没有预览界面时依旧出现预览耗时提示

列表 marker 错误

1. Tab and back-tab is not working
2. changed from - to *
   

block code 拷贝后变为 inline code

Unorderlist + Link 会缩进

报错:Lute is not defined

Unexpected token '<'
 ReferenceError: Lute is not defined

希望添加快捷键自定义和离线版本

用着很舒服，想要有个离线版本的

<details> 改进

1. can not add anything
2. can not delete
   

菜单栏上的按钮会触发 form 提交事件

H6 回车 解析问题

插入链接优化

为 wysiwyg 代码块添加快捷键

no cursor after tab

1. no cursor after tab(indent)
2. seperate list between Java and go
   

When copy & paste the link

after ctrl+k

复制代码按钮错误

https://hacpai.com/article/1549638745630/comment/1575874052029?r=Vanessa

反斜杠转义处理

上传时支持 xhr.setRequestHeader 设置

options.upload.headers

merge list

添加 debugger，为开发时显示日志