IT的隱形人世界

最近遇到一個問題，在使用vue3的wangeditor3.0 ，發現在輸入文字後，文字的光標會自行的跳到最後一個字，導致打字非常麻煩

<template>
	<div class="editor-container">
		<div :id="id"></div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, watch } from 'vue';
import wangeditor from 'wangeditor';
export default {
	name: 'wngEditor',
	props: {
		id: {
			type: String,
			default: () => 'wangeditor',
		},
		// 是否禁用
		isDisable: {
			type: Boolean,
			default: () => false,
		},
		// 雙像綁定
		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
		modelValue: String,
	},
	setup(props, { emit }) {
		const state = reactive({
			editor: null,
			isChanged : false,
		});
		// 初始化
		// https://doc.wangeditor.com/
		const initWangeditor = () => {
			state.editor = new wangeditor(`#${props.id}`);
			state.editor.config.placeholder = '請輸入內容';
			state.editor.config.uploadImgShowBase64 = true;
			state.editor.config.showLinkImg = false;
			onWangeditorChange();
			state.editor.create();
			state.editor.txt.html(props.modelValue);
			props.isDisable ? state.editor.disable() : state.editor.enable();
		};
		// 内容改變時
		const onWangeditorChange = () => {
			state.editor.config.onchange = (html: string) => {
				state.isChanged = true;    //標記改變
				emit('update:modelValue', html);
			};
		};

		// 監聽雙像綁定值
		// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I

		watch(
			() => props.modelValue,
			(value) => {
				if(!state.isChanged)
					state.editor.txt.html(value);
				
				state.isChanged = false;
			}
		);

		onMounted(() => {
			initWangeditor();
		});
		return {
			...toRefs(state),
		};
	},
};
</script>

 

光標跑到最後的原因是watch監聽時，內文即時更新了，所以只要離開編輯狀態時候再更新資料即可