我的 vue3 项目中直接引入报错，完全按照官网的配置说明操作 #12
Comments
|
补充一下，vite 控制台还有如下提示： |
|
在 vue 中创建编辑器，需要确保你的 DOM 节点已经渲染出来。别忘了 Vue 的 onMounted <script setup lang="ts">
import { onMounted, ref } from "vue";
import { Editor } from "@textbus/xnote";
import 'katex/dist/katex.css'
import '@textbus/xnote/bundles/index.css'
const editorRef = ref()
const editor = new Editor()
onMounted(() => {
editor.mount(editorRef.value).then(() => {
console.log('编辑器创建完成')
})
})
</script>
<template>
<div ref="editorRef" class="editor">
</div>
</template>
<style>
* {
box-sizing: border-box;
}
.editor {
width: 400px;
text-align: left;
margin: 0 auto;
}
</style>
|
已经按照你的代码修改过了，报错依然，我看提示是 highlight.js 的引入问题，但是因为 highlight.js 在我项目中不是直接依赖，而是你 xnote 的间接依赖，所以这个我不太好处理，暂时没有足够的时间去看你的源码，能麻烦你从这个方向排查一下吗？谢谢。 |
你可以手动安装一下 highlight.js 试一下看看 |
|
我用 vite 已经试过了，是不会报错的 |
试过了，还是不行，这个有点莫名其妙了，回头我再查查看 |
好的，谢谢 |
刚反应过来，我的项目路由是动态创建的，报错的源头也是这里，不知道是不是这个原因，route 代码供参考，也许可以帮你复现报错： |
很喜欢并且比较看好这个编辑器，因为它功能适度、设计合理、兼容各前端框架，但是第一下尝试就给了当头一棒。
先说说我的环境：
vscode 连接 ubuntu 22 进行远程开发，项目环境是 node 20.18 + ts 5.5.3 + vite 5.4.1 + vue3.4.37，整个项目一切顺利，直到我引入 xnote 报错了：
我的代码如下：
非常简单，就是一个空组件试图实例化一个 xnote
在此之前，我已经按照文档说明先安装了 @textbus/xnote，因为报错，又根据 github 仓库的 readme 添加了 katex 后来甚至根据 textbus 文档又加了 @textbus/adapter-vue，依然如此。
说实话有点无助，因为文档不足，没有用户群，也联系不到作者本人（哪怕给个邮箱呢），而我又比较着急必须尽快确定富文本编辑器的技术选型，目前只能先发 issue 了，期望能看到作者尽快回复，谢谢。
The text was updated successfully, but these errors were encountered: