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('
')// 模拟 ajax 异步获取内容
onMounted(() => {setTimeout(() => {valueHtml.value = '
'}, 1500)
})const toolbarConfig = {}
const editorConfig = { placeholder: '请输入文章内容...' }// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.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>

最终效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！