基础环境
shell
"nuxt": "^3.11.2",
"vue": "^3.4.27",
node: v20.12.2
安装
shell
pnpm add @wangeditor/editor -S
pnpm add @wangeditor/editor-for-vue -S
注意看看包的版本是不是都是 5.x
bash
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12"
截止到 2024-05-22
上面2个包均为最新版本
代码
html
<template>
<div>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref('<p>hello</p>');
const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };
const mode=ref('default')
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例,重要!
};
onMounted(() => {
// 模拟 ajax 异步获取内容
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
}, 1500);
});
</script>
上述组件目前不需要包裹在 Nuxt3
的 ClientOnly
里面。
经过测试,pnpm run build
构建 , pnpm run preview
预览 都没问题
在终端运行dev
的时候,会出现
less
WARN [Vue Router warn]: uncaught error during route navigation:
ERROR Cannot set property crypto of #<Object> which has only a getter
at node_modules/.pnpm/@wangeditor+editor@5.1.23/node_modules/@wangeditor/editor/dist/index.js:69:25
at node_modules/.pnpm/@wangeditor+editor@5.1.23/node_modules/@wangeditor/editor/dist/index.js:2:66
at Object.<anonymous> (node_modules/.pnpm/@wangeditor+editor@5.1.23/node_modules/@wangeditor/editor/dist/index.js:5:3)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Object..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Function._load (node:internal/modules/cjs/loader:1022:12)
at cjsLoader (node:internal/modules/esm/translators:366:17)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
不过不影响运行
和 构建