search

cycleccc / wangEditor-next

wangEditor-next —— Open-source web rich text editor, based on slate.js. wangEditor-next —— 开源 Web 富文本编辑器，基于 slate.js。
https://cycleccc.github.io/docs/
MIT License
74 stars 14 forks source link

插入和上传视频的前面会自动添加一个空行，无法删除 #55

Closed hanpandeng closed 1 month ago

hanpandeng commented 1 month ago

问题描述

插入视频和上传视频会在视频上方自动添加一个空白行，无法删除； 有没有什么方法能在插入、上传视频时不要自动加入一个空行

wangEditor 版本

"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12",

是否查阅了文档 ？

是/否 是

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？） 官网demo上传视频可以复现

cycleccc commented 1 month ago

我晚上看一下，table 插入时应该替换空行，原来的 wangEditor 没做这个处理。

cycleccc commented 1 month ago

已更新，可在 demo 测试

hanpandeng commented 1 month ago

已更新，可在 demo 测试

已在提供的demo中复验，可以解决问题（插入视频时不会自动添加空行）； 请问我需要怎么做才能在我的代码中解决这个问题

cycleccc commented 1 month ago

想要不改变包的情况下解决这个问题你可能需要排除 wangeditor 自带的 video module ，复制并加入判断选择区是否为空行的逻辑 具体看官方文档 自定义扩展 以及 排除工具栏key 主要步骤就是

  1. 排除原有的插入视频功能
  2. 复制原有的 insert video 代码
  3. 插入该 issue 关联的 fix commit
  4. 将功能注册到 wangeditor 即可

或是使用我更改的包的最新版，哈哈。

cycleccc commented 1 month ago

还有一个办法，复制该 issue 关联的 fix commit，fork 一份 wangeditor 代码，发个私包，也可以解决。

hanpandeng commented 1 month ago

想要不改变包的情况下解决这个问题你可能需要排除 wangeditor 自带的 video module ，复制并加入判断选择区是否为空行的逻辑 具体看官方文档 自定义扩展 以及 排除工具栏key 主要步骤就是

  1. 排除原有的插入视频功能
  2. 复制原有的 insert video 代码
  3. 插入该 issue 关联的 fix commit
  4. 将功能注册到 wangeditor 即可

或是使用我更改的包的最新版，哈哈。

我安装你的包后，报了一个错，我检查了我的代码不确定是什么原因导致的

Error: Cannot resolve a DOM node from Slate node: {"text":""}

安装版本是： "@wangeditor-next/editor": "^5.3.9", "@wangeditor-next/editor-for-vue2": "^1.0.2"

hanpandeng commented 1 month ago

我看最新的安装是^5.3.11，我需要升级到这个版本来解决插入视频有空行的问题吗

hanpandeng commented 1 month ago

想要不改变包的情况下解决这个问题你可能需要排除 wangeditor 自带的 video module ，复制并加入判断选择区是否为空行的逻辑 具体看官方文档 自定义扩展 以及 排除工具栏key 主要步骤就是

  1. 排除原有的插入视频功能
  2. 复制原有的 insert video 代码
  3. 插入该 issue 关联的 fix commit
  4. 将功能注册到 wangeditor 即可

或是使用我更改的包的最新版，哈哈。

我安装你的包后，报了一个错，我检查了我的代码不确定是什么原因导致的

Error: Cannot resolve a DOM node from Slate node: {"text":""}

安装版本是： "@wangeditor-next/editor": "^5.3.9", "@wangeditor-next/editor-for-vue2": "^1.0.2"

我尝试在demo中复现这个问题，但是没有复现出来 demo安装版本： "@wangeditor-next/editor": "^5.2.5", "@wangeditor-next/editor-for-vue2": "^1.0.2"

请问这个是我自己代码导致的问题吗

cycleccc commented 1 month ago

https://stackblitz.com/edit/react-4osjqn "@wangeditor-next/editor": "^5.3.5", "@wangeditor-next/editor-for-react": "^1.0.2", 使用这个次版本 2已经过了，现在用的3，5.3.x 那时候 table 合并功能添加了很多代码，所以升了次版本号

hanpandeng commented 1 month ago

我在使用在npm查到最新的包版本是5.3.11，安装时却报没有这个版本的错误无法安装 image

cycleccc commented 1 month ago

用了镜像源吗，镜像源会比 npm 慢一些 https://npmmirror.com/package/@wangeditor-next/editor image 我现在手动同步 npmmirror 了，但还是慢

hanpandeng commented 1 month ago

镜像确实慢一些，我从你发了最新版本的包就开始更新，尝试了很多遍，现在才更新到最新版本

hanpandeng commented 1 month ago

我在下午安装wangeditor-next后碰到Error: Cannot resolve a DOM node from Slate node: {"text":""}报错，到现在始终未找到解决办法，文档看过很多遍，甚至我把demo运行到我本地也还是报这个错误； 一旦我尝试给富文本赋值就会报这个错: 使用this.html=value或者this.editor.setHtml(value) 我把包的版本降低也不行 我不明白是我本地的webpack和slate有冲突还是其他什么原因 我使用@wangeditor/editor就不会报错 请问有什么办法能解决这个问题吗 ERROR Cannot resolve a DOM node from Slate node: {"text":""} at Object.toDOMNode (webpack-internal:///./node_modules/@wangeditor-next/editor/dist/index.esm.js:50:34600) at Object.toDOMPoint (webpack-internal:///./node_modules/@wangeditor-next/editor/dist/index.esm.js:50:35548) at Object.toDOMRange (webpack-internal:///./node_modules/@wangeditor-next/editor/dist/index.esm.js:50:35141) at rI (webpack-internal:///./node_modules/@wangeditor-next/editor/dist/index.esm.js:50:67871) at eval (webpack-internal:///./node_modules/@wangeditor-next/editor/dist/index.esm.js:50:83200)

cycleccc commented 1 month ago

我 demo 拉到本地看一下

https://github.com/cycleccc/react-wangeditor-demo 你 fork 一份 ，本地试试这个，我刚拉到本地试了一边没有问题，如果能复现的话，我具体看看问题是啥

hanpandeng commented 1 month ago

我 demo 拉到本地看一下

https://github.com/cycleccc/react-wangeditor-demo 你 fork 一份 ，本地试试这个，我刚拉到本地试了一边没有问题，如果能复现的话，我具体看看问题是啥

我 fork 了你的 vue2-wangeditor-demo 链接：https://github.com/hanpandeng/vue2-wangeditor-demo clone到本地直接运行没有报错，我升级@wangeditor-next/editor 版本到 5.3.11就会报我上面说的错误 Error: Cannot resolve a DOM node from Slate node: {"text":""} image image

cycleccc commented 1 month ago

太奇怪了，还是没复现，是 node 16 ？版本正确的话没道理会运行不了呀 image

hanpandeng commented 1 month ago

我的node版本是20.10.0 image 你可以打开控制台看下控制台输出的信息 image

hanpandeng commented 1 month ago

我把node版本回退到V16.19.0还是一样的报错

cycleccc commented 1 month ago

收到，已复现，有点致命，我会优先修复这个bug，暂时不要使用5.3.x了

hanpandeng commented 1 month ago

收到，已复现，有点致命，我会优先修复这个bug，暂时不要使用5.3.x了

大概什么时间发布修复的版本呢

cycleccc commented 1 month ago

如果急用的话，可以切换 5.3.12-alpha.2 ，我回滚了 5.3.2 至 5.3.3 的 合并单元格的代码。

cycleccc commented 1 month ago

平时时间不多，看看周末能不能解决这个问题。

hanpandeng commented 1 month ago

如果急用的话，可以切换 5.3.12-alpha.2 ，我回滚了 5.3.2 至 5.3.3 的 合并单元格的代码。

请问5.3.12-alpha.2版本合并了去除添加视频前面自动加空行的代码吗

cycleccc commented 1 month ago

这个5.3.11就有，只回滚了 table module 的代码，其它的都在。

hanpandeng commented 1 month ago

更新到5.3.12-alpha.2版本依然存在Error: Cannot resolve a DOM node from Slate node: {"text":""}报错 具体复现步骤： 富文本无内容时进行插入或上传视频操作，在控制台可以看到连续四个报错信息

如果富文本有内容的话进行插入或添加视频操作就不会报错

image

cycleccc commented 1 month ago

今天在发正式包，这几天npm出问题了半天才把包发好，在国内这一点实在难受。

cycleccc commented 1 month ago

头疼，这是另外的问题了

cycleccc commented 1 month ago

异步选区问题，解决了，晚上多测一下就发版

cycleccc commented 1 month ago

我在 5.3.13 解决了插入视频异步选区异常的问题。

hanpandeng commented 1 month ago

我在 5.3.13 解决了插入视频异步选区异常的问题。

已安装最新包复测，确实解决上述提到的问题 为表感谢，请你喝杯奶茶，收款账号发一下

hanpandeng commented 1 month ago

还有一个小问题比较尴尬，引入"@wangeditor-next"样式会导致富文本编辑器的高度不能自动向下延长，使内容超出编辑器。引入“@wangeditor”样式则不会出现这种问题。 操作场景： 1.上传视频时 2.上传图片时

image image

cycleccc commented 1 month ago

我在 5.3.13 解决了插入视频异步选区异常的问题。

已安装最新包复测，确实解决上述提到的问题 为表感谢，请你喝杯奶茶，收款账号发一下

加个微信吧，ylf2991205548，喝奶茶感谢了，可以随便给点，很有纪念意义，哈哈。😆

hanpandeng commented 1 month ago

我在 5.3.13 解决了插入视频异步选区异常的问题。

已安装最新包复测，确实解决上述提到的问题 为表感谢，请你喝杯奶茶，收款账号发一下

加个微信吧，ylf2991205548，喝奶茶感谢了，可以随便给点，很有纪念意义，哈哈。😆

加你了