Vue3 报错 Cannot read properties of undefined (reading 'tokenizePlaceholders')

sidoc-cn commented 1 year ago

问题描述

项目环境 Vue3 + Typescript + Vite 完全参照官方文档引入，却报如下错：

index.esm.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'tokenizePlaceholders')
    at index.esm.js:9:24133
    at Object.run (index.esm.js:1:15711)
    at Object.highlight (index.esm.js:1:15259)
    at Object.highlightElement (index.esm.js:1:15040)
    at Object.highlightAllUnder (index.esm.js:1:14025)
    at Object.highlightAll (index.esm.js:1:13619)
    at d10 (index.esm.js:1:18247)

wangEditor 版本

@wangeditor/editor": "^5.1.23 @wangeditor/editor-for-vue": "^5.1.12

是否查阅了文档？

（文档链接 [www.wangeditor.com](https://www.wangeditor.com/v5/for-frame.html#%E5%AE%89%E8%A3%85-1) ）

是

最小成本的复现步骤

完全按照官方文档安装引入，如下是安装命令：

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

如下是所有代码：

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <WangEditor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
        />
    </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-vue";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

const mode = "default";

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

<style lang="scss" scoped></style>

KellenHe commented 1 year ago

请问有解决吗，我也遇到这个报错了，在react上

L-Jings commented 1 year ago

请问解决了吗，我也有报错在vue2中

joker585 commented 10 months ago

wangeditor使用高版本prismjs并且引入了python包 import 'prismjs/components/prism-python' 需要在引入其之前引入 import 'prismjs/components/prism-markup-templating' 附我在自己项目中的引入时机: import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor' import 'prismjs/components/prism-markup-templating' 即可解决报错

joker585 commented 10 months ago

wangeditor使用高版本prismjs并且引入了python包 import 'prismjs/components/prism-python' 需要在引入之前引入import 'prismjs/components/prism-markup-templating' 附加我在自己项目中的引入时机： import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor' import 'prismjs/components/prism-markup-templating' 即可解决报错

附prismjs官方issue：https://github.sheincorp.cn/PrismJS/prism/issues/1400#issuecomment-485847919

Azzellz commented 2 days ago

wangeditor使用高版本prismjs并且引入了python包 import 'prismjs/components/prism-python' 需要在引入其之前引入 import 'prismjs/components/prism-markup-templating' 附我在自己项目中的引入时机: import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor' import 'prismjs/components/prism-markup-templating' 即可解决报错

感谢，报错解决了

wangeditor-team / wangEditor