wangEditor-for-vue3
wangEditor-for-vue3 copied to clipboard
实现编辑区域高自适应,建议官方采纳
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>'
}