Nuxt3 整合 wangeditor

网上找了很多，基本是无法使用的，所以在自己整合了后记录一下。
1.加入plugins
在plugins目录下创建一个wang-editor.ts

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default defineNuxtPlugin((nuxt) => {
    nuxt.vueApp.component('WeEditor', Editor)
    nuxt.vueApp.component('WeToolbar', Toolbar)
})

2.在根目录下的nuxt.config.ts中关闭上述plugin文件的ssr。注意，我们在以前可能会使用ssr:false，但在最新版本下已经被弃用了，如果使用的话可能会报错Element is not found，可以参考官方文档：https://nuxt.com.cn/docs/api/configuration/nuxt-config#plugins-1

  plugins: [
    {
      src: '~/plugins/wang-editor',
      mode: 'client',
    }
  ],

3.在components下创建wangeditor组件，名字自己取

<template>
  <div style="border: 1px solid #ccc; margin-top: 10px">
    <WeToolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />

    <WeEditor style="height: 300px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="handleChange" @onDestroyed="handleDestroyed" @onFocus="handleFocus"
      @onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" />
  </div>
</template>


<script  setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'

const mode = 'default'

const isClient = ref(false)
if (process.client) {
  isClient.value = true
}

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

// 内容 HTML
const valueHtml = ref('<p></p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p></p>'
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入文章内容...' }

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


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

const handleChange = (editor: any) => {
  console.log('change:', editor.getHtml());
};

const handleDestroyed = (editor: any) => {
  console.log('destroyed', editor);
};

const handleFocus = (editor: any) => {
  console.log('focus', editor);
};

const handleBlur = (editor: any) => {
  console.log('blur', editor)
}
const customAlert = (info: any, type: any) => { alert(`【自定义提示】${type} - ${info}`) }
const customPaste = (editor: any, event: any, callback: any) => {
  console.log('ClipboardEvent 粘贴事件对象', event)
  // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

  // 自定义插入内容
  editor.insertText('xxx')

  // 返回 false ，阻止默认粘贴行为
  event.preventDefault()
  callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

  // 返回 true ，继续默认的粘贴行为
  // callback(true)
}
</script> 



<style scoped></style>

最终效果：