在vue3 中使用百度Ueditor - 富文本编辑器
1、下载 UEditor
编码方式\语言 | PHP | NET | JSP | ASP |
---|---|---|---|---|
utf8 | 下载 | 下载 | 下载 | 下载 |
gbk | 下载 | 下载 | 下载 | 下载 |
2、将下载后的文件放到UEditor文件夹中,并移动到public文件夹,如图所示:
3、安装 vue-ueditor-wrap
npm i vue-ueditor-wrap@3.x
4、在main.js中引入
import VueUeditorWrap from 'vue-ueditor-wrap';
createApp(App).use(VueUeditorWrap).mount('#app');
5、组件
<template>
<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01" @before-init="addCustomButton" @ready="ready"></vue-ueditor-wrap>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('<h2>Hello World!</h2>')
const UEDITOR_HOME_URL = process.env.NODE_ENV === 'development' ? '/UEditor/' : `${process.env.PUBLIC_PaTH}UEditor/`
const editorConfig = {
// 访问 UEditor 静态资源的根路径,可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
UEDITOR_HOME_URL: '/UEditor/'
// 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
// serverUrl: '//ueditor.zhenghaochuan.com/cos'
}
const ready = (editorInstance) => {
editorConfig.value = editorInstance
}
const addCustomButton = (editorId) => {
// 自定义工具
insertText()
insertDialogTools()
}
</script>
现在你已经可以在页面中看到一个初始化之后的 UEditor
了
6、自定义工具栏
- 插入内容工具,以下代码需要放在addCustomButton函数内
const insertText = (editorId) => {
window.UE.registerUI(
'inserttext', // 此处必须是小写,大写不显示,未找到原因
(editor, uiName) => {
editor.registerCommand(uiName, {
execCommand () {
editor.execCommand('inserthtml', '<p>要插入的内容</p>')
}
})
// 创建一个 button
const btn = new window.UE.ui.Button({
name: uiName,
title: '插入文字',
cssRules: `background-image: url('${UEDITOR_HOME_URL}custom/icon.png') !important; background-size: cover;`,
onclick () {
// 这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName)
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function () {
const state = editor.queryCommandState(uiName)
if (state === -1) {
btn.setDisabled(true)
btn.setChecked(false)
} else {
btn.setDisabled(false)
btn.setChecked(state)
}
})
return btn
},
// 第四个参数未指定,所以按钮会被添加到工具栏末尾
// 如果需要指定位置,可以传入一个正整数索引
// 0, /* 如果需要指定位置,请取消注释并修改 *
// 确保 editorId 是正确定义的
// 这里有一个bug,不设置也不会被添加到工具栏末尾
2,
editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */
)
}
- 插入弹框,以下代码需要放在addCustomButton函数内
<template>
// 引入组件
<insertImage :dialogsVisible="visible" @closeDialog="closeDialog" />
</template>
<script setup>
const insertDialogTools = (obj, editorId) => {
window.UE.registerUI(
'insertImage',
(editor, uiName) => {
const btn = new window.UE.ui.Button({
name: uiName,
title: '插入图片',
cssRules: `background-image: url('${UEDITOR_HOME_URL}custom/picture.gif') !important; background-size: cover;`,
onclick: () => {
visible.value = true
}
})
return btn
},
37,
editorId
)
}
</script>
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前富文本编辑器内容 | string | |
config | UEditor 配置 | object | |
editor-id | 富文本编辑器 ID | string | editor_ + 随机八位小写字母 |
name | 类似 input 框的 name 属性,常用于表单中 | string | |
mode | 监听内容变化的方式,可选值为 observer , listener | string | observer |
observer-options | MutationObserver 的参数 | object | 见下方说明 |
observer-debounce-time | MutationObserver 的回调函数防抖间隔 | number | 50 |
forceInit | 跳过环境检测,直接初始化 | boolean | false |
editor-dependencies | 指定使用 UEditor 所需要加载的 JS 和 CSS | string[] | |
editor-dependencies-checker | 检测依赖的静态资源是否加载完成的方法 | ()=>boolean |
参考文档:https://github.com/HaoChuan9421/vue-ueditor-wrap?tab=readme-ov-file