前排提示

书接上文, 由于 wangEditor 5 满足不了项目的需求, 所以想到了百度的这个, 但是网上试了好多都没成功, 也是磕磕绊绊看了很多大神的文章才成功, 主要是很多用的都是UEditor自己的图片上传, 要在后端配置, 感觉挺麻烦的, 所以就简单换了个思路, 只需要前端处理了, 不需要联调了, 就想浅浅的记录一下.

简单使用

vue版本: 2.7

组件: vue-ueditor-wrap

组件官方地址

1. 安装组件

npm i vue-ueditor-wrap@2.x

2. 下载编辑器

2.1 选择适合的版本下载UEditor

下载UEditor

2.2 导入项目中

下载完后放到根目录下的 /public/ 目录下

我在这里重命名为UE2

3 创建为组件复用

3.1 大概结构

<template>
  <div>
    <vue-u-editor-wrap 
        :config="config"
        v-model="value">
    </vue-u-editor-wrap>
  </div>
</template>
export default {
  name: 'RichText',
  components: {
    VueUEditorWrap
  },
  data(){
      return {
          config: {},
          value: ''
      }
  }
}
<style scoped></style>

3.2 关于 config 配置的注意点

UEDITOR_HOME_URL: 这个配置项很重要, 这个路径要和你在步骤2下载编辑器路径对应

toolbars: 这个是配置工具栏的, 可以直接复制这里的完整按钮列表, 根据你的需要删减

// autoHeightEnabled: false,
// autoFloatEnabled: false,
// initialFrameWidth: '100%',
// initialFrameHeight: 350,
UEDITOR_HOME_URL: '/UE2/',
toolbars: [
    // ...
],
// ...

3.3 简单预览

如果不出意外就可以显示如下:

添加自定义按钮 自定义图片上传|自定义视频上传

这里我就用代码的方式新增按钮, 不改配置文件, 主要为以下两个功能提供按钮, 替换原来的图片上传和视频上传, 就不必在后端配置了.

只需要在触发before-init事件时添加即可

<vue-u-editor-wrap 
    :config="config"
    v-model="value"
    @before-init="addCustomButton"
    @ready="readyHandler">

methods: {
    readyHandler(){
        // 需要在data中自行定义 editorObj
        this.editorObj = editorInstance
    }
    addCustomButton(editorId){
      // 视频上传 与图片上传类似
      // ...

      // 图片上传
      const { name, fun, index } = this.imageUploadButton()
      window.UE.registerUI( name, fun, [index, [editorId]] )
    },
    imageUploadButton() {
      const name = 'image-upload-button'
      // 插入位置 这里我设置插入到工具栏第一个
      const index = 0
      const fun = (editor, uiName) => {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand() {
            // editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`);
          },
        });

        // 创建一个 button
        const btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '上传图片',
          // 需要添加的额外样式，这里的图片我自定义的, 添加到目录 /public/UE2/themes/default/images/imageUpload.png
          cssRules: `background-image: url(${require('/public/UE2/themes/default/images/imageUpload.png')}) !important; background-size: cover;`,
          // 点击时执行的命令
          onclick: () => {
            // 可以在这里写具体的图片(视频)上传逻辑
            // ...选择图片
            // ...图片裁剪
            // ...图片压缩
            // ...图片上传
            // 插入到文本中
            this.editorObj && this.editorObj.execCommand(
                                'inserthtml',
                                `<div><p><img src="${res.url}" style="width: 100%;object-fit: fill"></p></div>`
                            )
          },
        });

        // 当点到编辑内容上时，按钮要做的状态反射
        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);
          }
        });
        // 因为你是添加 button，所以需要返回这个 button
        return btn;
      }
      return { name, fun, index }
    }
}

效果如下