wangeditor-team / wangeditor-for-vue3 Goto Github PK

View Code? Open in Web Editor NEW

32.0 5.0 17.0 578 KB

wangEditor v5 Vue3 component

Home Page: https://www.wangeditor.com/

HTML 2.04% Vue 82.88% TypeScript 9.79% JavaScript 5.29%

wangeditor vue3

wangeditor-for-vue3's People

Contributors

Stargazers

Watchers

Forkers

tekintian 551685830 heftykoo jeffrey-mu caipeng1989 iablee jilyblue007 charles-rich johnzhaoxiaohu mekumiao ningminynwa singleparty lty0311 dh-fantasy mrgyao cycleccc

wangeditor-for-vue3's Issues

在vue3中将wangeditor封装为子组件子组件在watch中获取不到新值而onMounted可以获取到新值

初始化报异常

编辑器能正常显示，也能正常输入内容，获取到输入内容的值，初始化的时候无法显示初始值。

初始化的时候报如下异常，查看代码 tokenizePlaceholders 是 prism 里面的。

       Uncaught TypeError: Cannot read properties of undefined (reading 'tokenizePlaceholders')

没有ts的声明文件吗

vue3+ts我引入就给我提示没有找到wangeditor的声明文件，官方有提供吗，还是需要自己声明

V5.1.9报错

V5.1.9会报以下错误：
The requested module '/node_modules/.vite/deps/@wangeditor_editor-for-vue.js?v=c9b4b35f' does not provide an export named 'getEditor' (at Editor.vue:24:1)

提供的demo可复现这个问题。
https://github.com/liuqh0609/editor-vue3-demo

这个demo的yarn.lock锁了5.1.8版本，需要手动升级一下才能复现这个问题

有问题可以先参考该demo，如果无法解决您的问题，可以提对应的Issue

📌 wangEditor-vue3-demo

可否补充一下Editor中onCreated这类事件函数的props定义，现在用在tsx组件中会类型报错

编辑器输出 <p><br></p> 影响表单验证

官方虽然通过插件的形式，可以解决问题。
wangeditor-team/wangEditor#4619
是否考虑集成至wangEditor-for-vue3这个组件中？

vue3中 v5版本输入中文后再输入空格或者回车中文会消失，同情况英文没事

系统：ubuntu20.04

浏览器：chrome Version 100.0.4896.60

复现步骤，https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1

导入模板和script就可以复现

vite+vue3 会提示错误

vite2.8 vue3.2
安装了@wangeditor/editor-for-vue@next

编辑器的config里面全是这个。
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (:2:14)]
自定义粘贴和自定义弹窗都失效

实现编辑区域高自适应，建议官方采纳

import {useWindowSize, useElementBounding, toValue} from '@vueuse/core'
/**
 * 编辑器自适应高度
 *
 * @export
 * @param {HTMLElement} selector
 */
export function useAutoHeight(selector: HTMLElement) {
  if (selector) {
    setTimeout(() => {
      const { height: windowHeight } = useWindowSize()
      // scroll 元素 w-e-text-container
      const scrollElement = selector.firstChild as HTMLElement
      // 记录 windowHeight
      const lastWindowHeight = ref(toValue(windowHeight))

      // 初始化 scroll 元素 height
      const { height: scrollHeight } = useElementBounding(scrollElement)
      scrollElement.style.height = `${toValue(scrollHeight)}px`

      // 监听 windowHeight
      watch(windowHeight, (height) => {
        const changeHeight = toValue(height) - toValue(lastWindowHeight)
        lastWindowHeight.value = toValue(height)
        scrollElement.style.height = `${toValue(scrollHeight) + changeHeight}px`
      })
    })
  }
}

改造 Editor.vue

+ // 编辑器自适应高度 - onCreated 前初始化编辑区域高、监听 resize
+ useAutoHeight(box.value)
context.emit('onCreated', editor)

初始化编辑器内容

建议在 onCreated 内进行

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  valueHtml.value = '<p>初始化编辑器内容</p>'
}