hufe921/canvas-editor

rich text editor by canvas/svg

Hi,this is Hufe. 👋

canvas-editor's Issues

当图片出现跨域时，无法执行打印

version

0.9.28

Link to minimal reproduction

No response

Steps to reproduce

复制一个有服务端跨域限制图片，然后执行打印

What is expected?

打印报错：Draw.ts:523 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

What is actually happening?

能正常打印

System Info

No response

Any additional comments?

No response

是否对将项目改成monorepo的pr感兴趣？

What problem does this feature solve?

对于富文本编辑器一个很好的实践，同时，完成度也很高，非常感谢开源。

原因是想增加vue、react的示例的时候，发现核心代码editor和示例是揉在一起的，如果使用monorepo管理，可以更好的组织代码。当然，可能您这样做，有自己的考量

What does the proposed API look like?

您是否会对这样的pr感兴趣？还是说目前的重心主要是项目的稳定，架构方面不会做较大的修改？

连页模式数据比较多时显示白屏

canvas的尺寸太大造成的

defaultTrMinHeight不起作用，defaultRowMargin影响表格行高

version

0.9.29

Link to minimal reproduction

No response

Steps to reproduce

初始化的时候，设置defaultTrMinHeight，表格行高没有变化，但是设置defaultRowMargin的时候，表格行高会跟着变化。

What is expected?

defaultRowMargin对文字的行高起作用；defaultTrMinHeight对表格的最小行高起作用。

What is actually happening?

初始化的时候，设置defaultTrMinHeight，表格行高没有变化，但是设置defaultRowMargin的时候，表格行高会跟着变化。

System Info

No response

Any additional comments?

No response

页眉页脚可编辑功能大概什么时候可以试用呢？

现在有个新项目，我想使用这个编辑器

在文档中用ctrl+c复制文本，只要光标在control后面，貌似粘贴不了。

表格问题

version

0.9.27

Link to minimal reproduction

No response

Steps to reproduce

1、表格在文档最前面的时候，表格前面有一行空行，不能删除；见图

2、表格高度，目前 可以随着文字增加而变高，但是 不能随着文字的减少而缩减；

What is expected?

1、表格在文档最前面的时候，希望不要有空行，就算有空行希望可以删除；
2、表格行高可以随文字内容动态变化；

What is actually happening?

1、表格在文档最前面的时候，表格前面有一行空行，不能删除；见图

2、表格高度，目前 可以随着文字增加而变高，但是 不能随着文字的减少而缩减；

System Info

No response

Any additional comments?

No response

保存和导入功能

What problem does this feature solve?

建议后续添加保存和导入功能，现在看来写作都是一次性的。

What does the proposed API look like?

none

Error with paste option in context menu in firefox

version

0.9.31

Link to minimal reproduction

No response

Steps to reproduce

Open the context menu and select the paste option.

What is expected?

Paste option in context menu works normally.

What is actually happening?

Exception occurs: Uncaught (in promise) TypeError: navigator.clipboard.readText is not a function.

As shown in the previous image.

System Info

System: Windows 11
Browser: Firefox 111.0.1

Any additional comments?

No response

使用executeInsertElementList重复插入包含control的数据，control数据会重复多次渲染。

关于目录功能

What problem does this feature solve?

首先先膜拜一下大佬，感谢感谢。
最近也在看富文本的几个技术方向，放弃了slate.js，正好看到这个项目，很棒。
不知最近有没有目录功能的计划，简单看了下代码应该挺麻烦的。
我也尝试一下，争取提pr

What does the proposed API look like?

目录功能可能涉及：

1. 正文/标题区分 设置api
2. 数字编号、符号 设置api
3. 页面内插入表目录 api
4. 获取目录结构 api（用于生成目录导航）

After setting the paper direction and then changing the paper size, the page is displayed incorrect.

version

0.9.31

Link to minimal reproduction

No response

Steps to reproduce

1. Set paper direction, e.g. landscape.
2. Set page size, e.g. A5.
3. Position of footer and main content in a wrong position.

What is expected?

Should fit the paper size correctly.

What is actually happening?

https://drive.google.com/file/d/1fiLr6gDKh3Qc-K2JP2SR_TD6ajcrhJl0/view?usp=sharing

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 193.17 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.1.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: 112.0.1722.58
    Firefox: 112.0.1
    Safari: 16.4

Any additional comments?

Is it possible to modify it this way?

public setPaperSize(width: number, height: number) {
    const dpr = window.devicePixelRatio
    this.options.width = width
    this.options.height = height
    this.container.style.width = `${this.getWidth()}px`
    this.pageList.forEach((p, i) => {
      p.width = this.getWidth() * dpr // replace width with this.getWidth()
      p.height = this.getHeight() * dpr // replace height with this.getHeight()
      p.style.width = `${this.getWidth() }px`
      p.style.height = `${this.getHeight() }px`
      this._initPageContext(this.ctxList[i])
    })
    this.render({
      isSubmitHistory: false,
      isSetCursor: false
    })
  }

License

Great project.
Is there a license for this project? For example, MIT, Apache, etc. If there is, could you please add the license information to the project.
Thank you

留个联系方式

能给个联系方式吗，我觉得你编辑器的风格很适合我们的需求，能不能交流下。

{占位符}后面按Enter，然后再按Backspace，会显示为：{占位符}占位符

自动分页模式能每页自动增加页头吗？或者页眉可以编辑也行？

表格相关问题

version

0.9.23

Link to minimal reproduction

No response

Steps to reproduce

1、表格内文字现在不能垂直居中
2、纵向合并单元格后，在合并单元格内点击回车，第一行会跟着增高
3、表格整体没有复制功能

What is expected?

希望作者可以解决帮忙解决上述问题

What is actually happening?

1、表格内文字现在不能垂直居中
2、纵向合并单元格后，在合并单元格内点击回车，第一行会跟着增高
3、表格整体没有复制功能

System Info

No response

Any additional comments?

No response

defaultTdHeight配置好像没有起作用

version

0.9.23

Link to minimal reproduction

No response

Steps to reproduce

defaultTdHeight配置项没有起作用

What is expected?

defaultTdHeight配置项起作用

What is actually happening?

defaultTdHeight配置项没有起作用

System Info

No response

Any additional comments?

No response

emoji或生僻字无法显示编辑

输入emoji表情如：😀 或生僻字录入后无法正常显示或编辑

表格文字显示异常

version

0.9.28

Link to minimal reproduction

No response

Steps to reproduce

删除所有内容，然后插入表格，在第一个单元格输入文字

What is expected?

正常排版

What is actually happening?

文字排版异常

System Info

Chrome

Any additional comments?

No response

Page numbering setup suggestion

What problem does this feature solve?

Hi, I saw that the page number setting options were improved which looks great.

I would like to suggest the implementation of some more configuration possibilities, which can make the editor more robust and flexible, are the following:

• Option to configure where the pagination should appear header or footer. It is currently fixed to the footer;
• Option to configure from which page the pagination should start, ex: from page 2, then page 1 would not display number.
• Option to define exceptions where the page number should NOT appear, eg page 5, 6, 7; then the editor would show the number on all pages except those reported.

The last two suggestions could also be applied to setting up the header/footer. From which page the header/footer can be displayed, or which pages the header/footer will NOT be displayed.

What does the proposed API look like?

I imagine these settings could be defined in the editor's configuration, in the 'pageNumber' property, and applied when the editor is rendering the pages.

I don't know if it's easy to implement, and if you're interested in these proposals. I believe that the editor will meet the most diverse scenarios with these additional settings.

Again congratulations on the project. Hugs.

如果用了右对齐后，再按Backspace键直接到上一行末尾了

version

0.9.28

Link to minimal reproduction

No response

Steps to reproduce

1、将本行文字右对齐；
2、点击Backspace；

What is expected?

往前缩进

What is actually happening?

本行文字跳到上一行末尾了

System Info

No response

Any additional comments?

No response

关于更丰富自由的初始化配置控制。

What problem does this feature solve?

通过自由选择控制渲染配置，能产生自由的布局与更大的应用场景。
此前，我一直在寻找一款可自由控制光标和虚拟键盘弹出(移动端)的富文本编辑器、我使用了contentEditable来实现但效果不是很好（受到输入法实现的影响）。

What does the proposed API look like?

当前我希望让这个库允许初始化时关闭header、footer及pageNumber等独特场景下的渲染，以便实现纯编辑器的效果，对此：

1. 应该直接让header或footer的option类型可为false？
2. 还是增加编辑器模式进行区分？
3. 还是激进的考虑把main作为base,让header和footer作为扩展继承main，从而打开更自由的扩展和布局（类html）？

当然渐进地全部实现貌似是更好的选择，只是我还不清楚其中有哪些期望的功能会带来更多的问题。我相信这对于扩展应该是有帮助的，分块布局或许能带来更好的规划？例如想要实现导航目录和文档备注仅需要将其填充到一个横向布局的块内元素，至于其是否作为独立插件以及如何进行数据交互则是细节实现了。

表格最后一列向左拖动到目标位置后，再将表格最后一列向右拖动到目标位置停止拖动表格位置没有变化

version

v0.9.27

Link to minimal reproduction

No response

Steps to reproduce

1、拖动表格最后一列向左移动
2、向左拖动到目标位置后停止向左拖动
3、再次向右拖动到目标位置后，停止拖动
4、向右拖动到目标位置放下后表格位置未发生变化（期望位置在最后拖动位置）

What is expected?

表格最后一列应该在步骤3的位置

What is actually happening?

表格最后一列的位置还原了（步骤2），未发生位置变化

System Info

No response

Any additional comments?

No response

表格移动到下一页后，再回退到上一页，就变成两个表格了，并没有合并

能实现内容块的编辑模式吗？

被这个编辑器惊艳到了。做的很棒。想知道能实现想钉钉文档里的编辑器效果吗？

你好，可以直接导入个svg文件吗？

What problem does this feature solve?

你好，可以直接导入个svg文件吗，然后在上面做一些编辑？

What does the proposed API look like?

你好，可以直接导入个svg文件吗，然后在上面做一些编辑？

导出word和文档末尾追加内容

是否有导出word的方法？
有在文档末尾追加文字的API吗？

有相关的操作文档吗

这个编辑器非常棒，已star，有没有相关的文档，例如前后端的配置等等。谢谢!

打印模糊问题

version

main

Link to minimal reproduction

No response

Steps to reproduce

现象：打印出来的字体显示效果是模糊的
调优：手动在打印时，调高canvas的scale缩放比例，可以提高清晰度，但是太高了会导致空白，稍微调高一些也只是改善而没有彻底解决。

What is expected?

类似Office或者腾讯在线文档，打印出来的字笔画是清晰正常的。
看起来可能时toDataUrl时生成图片的清晰度问题，不知道有没有什么更好的解决方案。

What is actually happening?

打印字体模糊

System Info

No response

Any additional comments?

No response

Error when selecting all table rows

version

Error when selecting all table rows

Link to minimal reproduction

No response

Steps to reproduce

With the mouse select all the lines of the table, as exemplified in the video below.

canvas-editor.Mozilla.Firefox.2023-04-12.14-06-58.mp4

What is expected?

That the error is not thrown: Uncaught TypeError: R is undefined.

What is actually happening?

After selecting all rows in the table, releasing the mouse button throws an exception.

System Info

System: Windows 11
Browsers: Firefox 111.0.1; Edge 112.0.1722.39; Chrome 111.0.5563.147.

Any additional comments?

No response

表格分页

你好，使用过程中，发现表格分页功能还不是很完善，例如跨页的表格在修改列宽的时候，不能够同步，请问有计划什么时候完善表格的分页功能吗？
另外：能否加个qq交流一下，我的是838472035。

EMAIL

HI 兄弟，方便留个邮箱或者微信吗？想交流一下

如果文档开头使用control[type=text]，且文档只有这个元素，则无法删除这个control，是什么原因呢？

Error with copy and cut in firefox

Hello, I realized that the copy and cut functionality is giving an error in firefox. Follow the picture...

By the way, I would like to congratulate you for the initiative, it is a great project!!

页眉页脚内容编辑

页眉页脚内容编辑功能，有没有计划？
有没有实现的思路？
方便留个邮箱或者微信吗？想交流一下

fontsize能直接设置多少像素吗？

fontsize现在只能executeSizeAdd和executeSizeMinus去增加或减小，能直接设置多少像素吗？

请问是否支持续打功能？

What problem does this feature solve?

希望支持续打功能

What does the proposed API look like?

希望支持续打功能

打印问题

目前打印输出的是图片，有没有计划实现非图片打印方式

没有数据回写接口

version

0.9.23

Link to minimal reproduction

No response

Steps to reproduce

只有数据获取接口，没有数据回写接口

What is expected?

希望作者大神能够提供

What is actually happening?

只有数据获取接口，没有数据回写接口

System Info

No response

Any additional comments?

No response

搜狗输入法无法正确定位

version

0.9.23

Link to minimal reproduction

No response

Steps to reproduce

在mac系统使用搜狗输入法输入中文

What is expected?

没有文字候选框出现，或定位错误

What is actually happening?

应该显示文字候选框并正确定位

System Info

macos

Any additional comments?

No response

文字重叠问题

version

0.9.19

Link to minimal reproduction

No response

Steps to reproduce

原网站运行没问题，移到项目后运行出现文字重叠问题。

What is expected?

What is actually happening?

System Info

No response

Any additional comments?

No response

打开的功能菜单在点击页面其他位置时不自动关闭

version

main

Link to minimal reproduction

https://hufe.club/canvas-editor/

Steps to reproduce

1. 打开页面
2. 点击“水印”或“纸张类型”，会弹出功能菜单
3. 鼠标点击页面其他地方

What is expected?

打开的功能菜单能在失焦的时候能自动关闭

What is actually happening?

弹出的功能菜单如果不再次点击相应图标会一直显示

System Info

No response

Any additional comments?

No response

粘贴wps的高亮背景时样式丢失

version

main

Link to minimal reproduction

https://hufe.club/canvas-editor/

Steps to reproduce

1. 打开页面
2. 在WPS中对文本增加高亮的背景样式，如
   
3. 将文本复制并粘贴到编辑器中

What is expected?

如上图，高亮设置的文本显示其正确的背景样式

What is actually happening?

高亮样式丢失，如图

System Info

No response

Any additional comments?

No response

Contribution guidelines

Hi, it's a fantastic project!

It would be great if you add some contribution guidelines or some roadmap with the priorities to start to get more contributions.

我也是做文档排版编辑软件的可以加QQ群649023932交流

我的作品如下，欢迎技术交流
http://hcview.cn/demo/HCEmrViewLib/index.html

Issue with selection using Shift + Left/Right

Hi, I noticed the implementation of selection using Shift key. But when testing I realized that if you invert the direction key, the selection does not work in the normal way, which should 'clear" a character.

What happens is that the selection continues to be added, but from the reverse side. An example image follows.

Reinforcing that you are doing an excellent job, hugs.

表格能否提供方法隐藏边框线？

What problem does this feature solve?

表格的边框线能否有方法可以隐藏呢？

What does the proposed API look like?

表格的边框线能否有方法可以隐藏呢？

表格复制粘贴，表格过长会出现异常截取，且截断后面的数据没展示。

version

0.9.19

Link to minimal reproduction

No response

Steps to reproduce

What is expected?

复制粘贴过长的表格

What is actually happening?

复制粘贴过长的表格

System Info

No response

Any additional comments?

No response

更多的功能请求

What problem does this feature solve?

首先，你太优秀了。做到了我想做但是做不到的事情，感谢你的贡献，好想请你喝☕️...

期待以下功能实现，不知你这边是否有兴趣纳入到你的next features。

1. 获取文档所有输入元素控件的值集合
2. 根据输入元素控件Id或编码读取/设置当前值，是否可见，是否必填（支持批量）
3. 给输入元素控件添加扩展属性
4. 动态规则和动态表达式配置：如一个下拉框有两个选项（A、B）实现级联操作，选择A时控制一些输入元素或段落可见并且内容必填，选择B时其它处理。
5. 编辑器中插入前端自定义组件（如：前端angular/vue开发的自定义图表组件插入到文档中）
6. 文档修改痕迹展示
7. 文档修订，批注功能

What does the proposed API look like?

我不知道这些功能该如何实现，以及您是否对这些内容感兴趣。
期待你的反馈，再次感谢你的贡献。