fix: fix the error reported by the Editor component

This commit is contained in:
陈凯龙 2022-04-14 08:58:02 +08:00
parent 2ee49549e7
commit 90ef9856a0
2 changed files with 14 additions and 6 deletions

View File

@ -5,7 +5,7 @@
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "johnsoncodehk.volar"
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
"i18n-ally.localesPaths": ["src/locales"],
"i18n-ally.keystyle": "nested",

View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch } from 'vue'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
@ -23,6 +23,13 @@ const props = defineProps({
defaultHtml: propTypes.string.def('')
})
// shallowRef
const editorRef = shallowRef<IDomEditor>()
const handleCreated = (editor: IDomEditor) => {
editorRef.value = editor
}
const emit = defineEmits(['change'])
//
@ -70,17 +77,16 @@ const handleChange = (editor: IDomEditor) => {
//
onBeforeUnmount(() => {
const editor = getEditor(props.editorId)
const editor = unref(editorRef.value)
if (editor == null) return
// editor
editor.destroy()
removeEditor(props.editorId)
})
const getEditorRef = async (): Promise<IDomEditor> => {
await nextTick()
return getEditor(props.editorId) as IDomEditor
return unref(editorRef.value) as IDomEditor
}
defineExpose({
@ -109,11 +115,13 @@ watch(
/>
<!-- 编辑器 -->
<Editor
:editor="editorRef"
:editorId="editorId"
:defaultConfig="editorConfig"
:defaultHtml="defaultHtml"
:style="editorStyle"
@on-change="handleChange"
@onCreated="handleCreated"
/>
</div>
</template>