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

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

Open
elkon028 opened this issue Feb 5, 2024 · 0 comments
Open

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

elkon028 opened this issue Feb 5, 2024 · 0 comments

Comments

@elkon028
Copy link

elkon028 commented Feb 5, 2024

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

1 participant