wangEditor-for-vue3 icon indicating copy to clipboard operation
wangEditor-for-vue3 copied to clipboard

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

Open elkon028 opened this issue 1 year ago • 0 comments

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>'
}

elkon028 avatar Feb 05 '24 06:02 elkon028