nuxt3接入wangEditor

基础环境

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>

上述组件目前不需要包裹在 Nuxt3ClientOnly 里面。

经过测试,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)

不过不影响运行构建

相关推荐
i-阿松!1 小时前
Django + Vue 项目部署(1panel + openresty)
vue.js·django·openresty
尖椒土豆sss1 小时前
关于vue3 项目中使用 eslint-plugin-vue 报错踩坑记录
vue.js·代码规范·eslint
江城开朗的豌豆2 小时前
5招轻松搞定Element-UI样式定制,让你的项目与众不同!
前端·javascript·vue.js
前端小巷子2 小时前
Vue内置动画组件 Transition
前端·vue.js·面试
longze_78 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆11 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny11 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
飞翔的佩奇11 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的名城小区物业管理系统(附源码+数据库+毕业论文+开题报告+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·小区物业管理系统
chancygcx_11 小时前
前端框架Vue3(二)——Vue3核心语法之OptionsAPI与CompositionAPI与setup
vue.js·前端框架
90后的晨仔12 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js