我想使用 HTMLElement 在 vue3 中构造 Vditor,但是报错了:
main.ts:5 [Vue warn]: Unhandled error during execution of mounted hook
at <MyVditor>
at <Text>
at <App>
warn$1 @ vue.js?v=9bf6198a:2115
logError @ vue.js?v=9bf6198a:2326
handleError @ vue.js?v=9bf6198a:2318
callWithErrorHandling @ vue.js?v=9bf6198a:2264
callWithAsyncErrorHandling @ vue.js?v=9bf6198a:2269
hook.__weh.hook.__weh @ vue.js?v=9bf6198a:4843
flushPostFlushCbs @ vue.js?v=9bf6198a:2447
render2 @ vue.js?v=9bf6198a:8039
mount @ vue.js?v=9bf6198a:5980
app.mount @ vue.js?v=9bf6198a:12173
(anonymous) @ main.ts:5
Show 10 more frames
Show less
chunk-MX3IHU7Z.js?v=9bf6198a:13394 Uncaught Error: need options.cache.id, see https://ld246.com/article/1549638745630#options
at Options2.merge (chunk-MX3IHU7Z.js?v=9bf6198a:13394:27)
at new Vditor2 (chunk-MX3IHU7Z.js?v=9bf6198a:14146:50)
at MyVditor.vue:15:5
at vue.js?v=9bf6198a:4863:40
at callWithErrorHandling (vue.js?v=9bf6198a:2262:19)
at callWithAsyncErrorHandling (vue.js?v=9bf6198a:2269:17)
at hook.__weh.hook.__weh (vue.js?v=9bf6198a:4843:19)
at flushPostFlushCbs (vue.js?v=9bf6198a:2447:28)
at render2 (vue.js?v=9bf6198a:8039:7)
at mount (vue.js?v=9bf6198a:5980:13)
vue 源码:
<script setup lang="ts">
// 1.1 引入Vditor 构造函数
import Vditor from 'vditor'
// 1.2 引入样式
import 'vditor/dist/index.css';
import { ref, onMounted } from 'vue';
// 2. 获取DOM引用
const vditor = ref()
const vdtctn = ref<HTMLElement>();
// 3. 在组件初始化时,就创建Vditor对象,并引用
onMounted(() => {
let el = (vdtctn.value as HTMLElement);
console.log(el);
new Vditor(document.createElement('div'), {
height: '100%',
width: '100%',
toolbarConfig: {
hide: true,
}
})
})
</script>
<template>
<!-- 指定一个容器 -->
<div id="vditor" ref="vdtctn"></div>
</template>
但是其实 Vditor 是支持使用 HTMLElement 构造编辑器的:
declare class Vditor extends VditorMethod {
readonly version: string;
vditor: IVditor;
/**
* @param id 要挂载 Vditor 的元素或者元素 ID。
* @param options Vditor 参数
*/
constructor(id: string | HTMLElement, options?: IOptions);
private showErrorTip;
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于