vue3.0中使用Ueditor

在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

        vue-ueditor-wrap - Vue + UEditor + v-model双向绑定