开源社区给力的UEditor，vue-ueditor-wrap集成秀米踩坑记录

2023-09-29 15:03:32

缘起

项目需要集成UEditor，首选自然是vue-ueditor-wrap，这个库提供了UEditor在Vue项目中的集成方案，方便快捷。

然而，在集成的过程中，我遇到了不少坑，特此记录下来，以便帮助其他开发者避坑。

安装

首先，你需要安装vue-ueditor-wrap：

npm install vue-ueditor-wrap --save

然后，你需要在你的Vue项目中注册该组件：

// main.js
import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'

Vue.component('vue-ueditor-wrap', VueUeditorWrap)

使用

在你的Vue组件中，你可以使用<vue-ueditor-wrap>组件来集成UEditor：

<template>
  <vue-ueditor-wrap :config="config" @change="handleChange" />
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      config: {
        // UEditor的配置项
      }
    }
  },
  methods: {
    handleChange(content) {
      // 内容发生变化时触发的回调函数
    }
  }
}
</script>

集成秀米编辑器

如果你想集成秀米编辑器，你需要先在秀米官网注册一个账号，然后获取你的秀米编辑器ID。

接下来，你需要在你的Vue项目中安装秀米编辑器的SDK：

npm install simditor --save

然后，你需要在你的Vue组件中注册秀米编辑器的组件：

// main.js
import Vue from 'vue'
import Simditor from 'simditor'

Vue.component('simditor', Simditor)

最后，你可以在你的Vue组件中使用<simditor>组件来集成秀米编辑器：

<template>
  <simditor :config="config" @change="handleChange" />
</template>

<script>
import Simditor from 'simditor'

export default {
  components: {
    Simditor
  },
  data() {
    return {
      config: {
        // 秀米编辑器的配置项
      }
    }
  },
  methods: {
    handleChange(content) {
      // 内容发生变化时触发的回调函数
    }
  }
}
</script>

踩坑记录

1. UEditor的路径错误

在使用vue-ueditor-wrap时，你需要注意UEditor的路径是否正确。默认情况下，vue-ueditor-wrap会自动加载UEditor的JavaScript和CSS文件。但是，如果你手动指定了UEditor的路径，那么你需要确保路径是正确的。

2. 秀米编辑器的样式错误

在使用秀米编辑器时，你需要注意秀米编辑器的样式是否正确。默认情况下，秀米编辑器会自动加载它的CSS文件。但是，如果你手动指定了秀米编辑器的路径，那么你需要确保路径是正确的。

3. 秀米编辑器的工具栏错误

在使用秀米编辑器时，你需要注意秀米编辑器的工具栏是否正确。默认情况下，秀米编辑器会自动加载它的工具栏。但是，如果你手动指定了秀米编辑器的路径，那么你需要确保路径是正确的。

总结

UEditor和秀米编辑器都是非常优秀的富文本编辑器，它们在Vue项目中的集成也非常简单。希望这篇文章能帮助你顺利集成UEditor和秀米编辑器，并在项目中使用它们。

附录

vue-cli4的配置方法

如果你使用的是vue-cli4，那么你需要在你的vue.config.js文件中添加如下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改这里的阈值，例如改为 10240
        options.limit = 10240
        return options
      })
  }
}