fix: fix the error reported by the Editor component
This commit is contained in:
parent
2ee49549e7
commit
90ef9856a0
|
@ -5,7 +5,7 @@
|
||||||
"source.fixAll.eslint": true
|
"source.fixAll.eslint": true
|
||||||
},
|
},
|
||||||
"[vue]": {
|
"[vue]": {
|
||||||
"editor.defaultFormatter": "johnsoncodehk.volar"
|
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||||
},
|
},
|
||||||
"i18n-ally.localesPaths": ["src/locales"],
|
"i18n-ally.localesPaths": ["src/locales"],
|
||||||
"i18n-ally.keystyle": "nested",
|
"i18n-ally.keystyle": "nested",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch } from 'vue'
|
import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue'
|
||||||
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||||
import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
|
import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
import { isNumber } from '@/utils/is'
|
import { isNumber } from '@/utils/is'
|
||||||
|
@ -23,6 +23,13 @@ const props = defineProps({
|
||||||
defaultHtml: propTypes.string.def('')
|
defaultHtml: propTypes.string.def('')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 编辑器实例,必须用 shallowRef
|
||||||
|
const editorRef = shallowRef<IDomEditor>()
|
||||||
|
|
||||||
|
const handleCreated = (editor: IDomEditor) => {
|
||||||
|
editorRef.value = editor
|
||||||
|
}
|
||||||
|
|
||||||
const emit = defineEmits(['change'])
|
const emit = defineEmits(['change'])
|
||||||
|
|
||||||
// 编辑器配置
|
// 编辑器配置
|
||||||
|
@ -70,17 +77,16 @@ const handleChange = (editor: IDomEditor) => {
|
||||||
|
|
||||||
// 组件销毁时,及时销毁编辑器
|
// 组件销毁时,及时销毁编辑器
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
const editor = getEditor(props.editorId)
|
const editor = unref(editorRef.value)
|
||||||
if (editor == null) return
|
if (editor == null) return
|
||||||
|
|
||||||
// 销毁,并移除 editor
|
// 销毁,并移除 editor
|
||||||
editor.destroy()
|
editor.destroy()
|
||||||
removeEditor(props.editorId)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const getEditorRef = async (): Promise<IDomEditor> => {
|
const getEditorRef = async (): Promise<IDomEditor> => {
|
||||||
await nextTick()
|
await nextTick()
|
||||||
return getEditor(props.editorId) as IDomEditor
|
return unref(editorRef.value) as IDomEditor
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
@ -109,11 +115,13 @@ watch(
|
||||||
/>
|
/>
|
||||||
<!-- 编辑器 -->
|
<!-- 编辑器 -->
|
||||||
<Editor
|
<Editor
|
||||||
|
:editor="editorRef"
|
||||||
:editorId="editorId"
|
:editorId="editorId"
|
||||||
:defaultConfig="editorConfig"
|
:defaultConfig="editorConfig"
|
||||||
:defaultHtml="defaultHtml"
|
:defaultHtml="defaultHtml"
|
||||||
:style="editorStyle"
|
:style="editorStyle"
|
||||||
@on-change="handleChange"
|
@on-change="handleChange"
|
||||||
|
@onCreated="handleCreated"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue