Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web components支持 #219

Closed
langyamu opened this issue Jul 24, 2023 · 6 comments
Closed

web components支持 #219

langyamu opened this issue Jul 24, 2023 · 6 comments

Comments

@langyamu
Copy link

What problem does this feature solve?

作者大大你好,在使用过程中主要遇到了以下几个问题:(我用的是一个基于web components 规范的框架)

  1. 编辑器样式引入失败,因为web components的密闭性 无法读取 顶层 style 标签中的样式(我看dist下的代码开头是document.head.appendChild 将编辑器样式给挂上的),目前是手动改了下源码,给style标签加了个id 然后在我自己封的编辑器组件 ready的时候再手动append到里边去。。。
  2. 编辑器事件失效,主要是右键菜单的事件,不太懂,是不是用的时候得自己手动绑定下事件,也有可能是源码里取dom时是从document上取的原因(源码大概看了一下,可能有出入)
  3. 光标问题,第一次加载完成后,光标点击后不闪烁,但是光标位置是对的,输入一段内容后就没问题了

What does the proposed API look like?

是否可以增加一个指定shadowRoot的配置项,或者编辑器在初始化时根据传入的 container 判断是否包含shadow dom 然后进行绑定(事件、样式。。。)

@langyamu
Copy link
Author

  1. 编辑器事件失效,主要是右键菜单的事件,不太懂,是不是用的时候得自己手动绑定下事件,也有可能是源码里取dom时是从document上取的原因(源码大概看了一下,可能有出入)
    又看了下 main.ts 看样子这些事件用的时候得手动实现一下。。😅

@Hufe921
Copy link
Owner

Hufe921 commented Jul 24, 2023

问题1 3,可方便提供一下最小可复现代码:
如:
https://codesandbox.io/
https://codepen.io/
https://stackblitz.com/

@langyamu
Copy link
Author

抱歉,目前没办法提供在线示例,
您可以看一下这个分支:https://github.com/langyamu/wcex-study/tree/canvas-editor
因为目前框架加载包的方式对于 @hufe921/canvas-editor 这种二级路径不太友好

  • 需要将 dist 目录下的 canvas-editor.umd.js canvas-editor.umd.js.map 移动到 canvas-editor 下
  • 并且修改名称为 index.js index.js.map
    • image.png

启动的话 可以参考 npm scripts start
如果提示没有 wcex 可能需要全局安装 @wcex/cli

@langyamu
Copy link
Author

image

@Hufe921
Copy link
Owner

Hufe921 commented Jul 26, 2023

  1. style新增canvas-editor-style id,可以手动将style移动到web component里面
  2. 针对web component下document监听的click事件event.target为组件本身,导致光标无法显示问题已修复。
  3. 针对右键菜单在web component下错误清除副作用,已修复
    可以直接npm run lib手动构建测试,稍后会发布npm包

@Hufe921
Copy link
Owner

Hufe921 commented Jul 27, 2023

v0.9.41

@Hufe921 Hufe921 closed this as completed Jul 27, 2023
ashutosh-jena-mindfire pushed a commit to mindfiredigital/canvas-editor that referenced this issue Feb 5, 2024
ashutosh-jena-mindfire pushed a commit to mindfiredigital/canvas-editor that referenced this issue Feb 5, 2024
ashutosh-jena-mindfire pushed a commit to mindfiredigital/canvas-editor that referenced this issue Feb 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants