我想使用 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;
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于