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 "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",

View File

@ -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>