引入编辑器
yarn add @wangeditor/editor
或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
或者 npm install @wangeditor/editor-for-vue@next --save
引入附件上传
yarn add @wangeditor/plugin-upload-attachment
引入wangeditor编辑器
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot} from '@wangeditor/editor'
//附件上传
import attachmentModule from '@wangeditor/plugin-upload-attachment'
自定义功能
调用编辑器实例之前注册自定义编辑器组件
class MySlesctMenu {
constructor() {
this.title = '测试菜单',
this.tag = 'select'
}
// 下拉框的选项
getOptions(){
const options = [
{ value: '0', text: '快捷回复' },
// { value: 'beijing', text: '北京', styleForRenderMenuList: { 'font-size': '32px', 'font-weight': 'bold' } },
{ value: 'beijing', text: '北京'},
{ value: 'shanghai', text: '上海'},
{ value: 'shenzhen', text: '深圳' }
]
return options
}
// 获取菜单执行时的 value ,用不到则返回空 字符串或 false
getValue() { return '0' }
// 菜单是否需要激活(如选中加粗文本,“加粗”菜单会激活),用不到则返回 false
isActive() { return false }
// 菜单是否需要禁用(如选中 H1 ,“引用”菜单被禁用),用不到则返回 false
isDisabled() { return false }
// 点击菜单时触发的函数
exec(editor, value) {
if (this.isDisabled(editor)) return
editor.insertText(value) // value 即 this.value(editor) 的返回值
}
}
const menuConf = {
key: 'my-menu-1', // menu key ,唯一。注册之后,需通过 toolbarKeys 配置到工具栏
factory() {
return new MySlesctMenu()
},
}
//注册下拉
Boot.registerMenu(menuConf)
现在下拉就注册完成了
然后编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
然后是编辑器的一些配置
// 工具栏配置
insertKeys 添加自定义组件 上面已经注册过了
excludeKeys 屏蔽组件
const toolbarConfig = {
insertKeys:{
index: 99,
keys: ['my-menu-1','uploadAttachment']
},
excludeKeys:['blockquote','header1','header2','header3','bold','underline','italic','through','clearStyle','bulletedList','justifyLeft','justifyRight','justifyCenter','insertLink','insertTable','codeBlock','todo']
}
// 编辑器配置
const editorConfig = {
placeholder: '请输入内容...',
hoverbarKeys: {
attachment: {
menuKeys: ['downloadAttachment'], // “下载附件”菜单
},
},
MENU_CONF: {
uploadImage:{
server: '/api'+uploadPath+'uploads',
// form-data fieldName ,默认值 'wangeditor-uploaded-file'
fieldName: 'file',
maxFileSize: 10 * 1024 * 1024, // 1M
maxNumberOfFiles: 10,
// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
allowedFileTypes: ['image/*'],
meta: {
name: 'editor',
},
// 自定义增加 http header
headers: {
Authorization: Token,
},
// 跨域是否传递 cookie ,默认为 false
withCredentials: true,
timeout: 5 * 1000, // 5 秒
// 小于该值就插入 base64 格式(而不上传),默认为 0
base64LimitKB: 5, // 5kb
customInsert(res, insertFn) {
// if(res.code != 200) return ElementPlus.ElMessage.error(res.msg)
// 从 res 中找到 url alt href ,然后插图图片
console.log(11111111111)
insertFn(res.data, res.data, res.data)
},
},
// “上传附件”菜单的配置
uploadAttachment: {
server: '/api'+uploadPath+'uploads', // 服务端地址
timeout: 5 * 1000, // 5s
fieldName: 'file',
meta: {
name: 'editor',
},
// 自定义增加 http header
headers: {
Authorization: Token,
},
// 跨域是否传递 cookie ,默认为 false
withCredentials: true,
maxFileSize: 10 * 1024 * 1024, // 10M
onBeforeUpload(file) {
console.log('onBeforeUpload', file)
return file // 上传 file 文件
// return false // 会阻止上传
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
// alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
// alert(err.message)
console.error('onError', file, err, res)
},
// // 上传成功后,用户自定义插入文件
customInsert(res, file, insertFn) {
console.log('customInsert', res)
const url = res.data || {}
if (!url) throw new Error(`url is empty`)
console.log(insertFn)
//创建html节点
// 插入附件到编辑器
insertFn(`[Click to download attachment-${file.name}]`, url)
},
// 插入到编辑器后的回调
onInsertedAttachment(elem) {
console.log('inserted attachment', elem)
},
},
}
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例,重要!
}
return {
editorRef,
valueHtml,
mode: 'simple', // 或 'simple' 'default'
toolbarConfig,
editorConfig,
handleCreated,
};
这样就完成了
代码
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height:300px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
然后就可以进行一些相关的操作。因为官方文档对vue3的语法也没多少文档,这也是我凡代码示例出来的
总之:wangeditor 不论是自定义组件还是自带的组件其实都是组件,他们都要经历注册,插入编辑器的过程。然后才能显示
相关文档链接:
自定义扩展新功能
https://www.wangeditor.com/v5/development.html
github代码示例
https://github.com/wangfupeng1988/vue3-wangeditor-demo/blob/main/src/components/ExtendedEditor.vue