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

[sidoc-cn]

问题描述

项目环境 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>