Vue项目中富文本编辑器组件二次封装实践

最近接到一个小需求，要求对原项目的富文本编辑器进行统一化。由于之前没有具体的规范约束，该PC端项目中在不同模块中分别引入了3种不一样的富文本编辑器，一来不便于维护，二来样式不统一，用户使用也可能存在疑惑，于是我需要考虑重新封装一个富文本编辑器组件，再将旧代码中引入的富文本编辑器组件统一替换为新的。以下记录整个任务实现的大致思路。

---

首先，分析代码结构，发现项目中不同的模块分别使用了两种不同的form组件，element-UI和iView。

因此，需要对富文本编辑器组件最外层的form-item组件进行判断处理，这里使用了Vue内置的component动态组件，绑定is属性动态渲染对应的form-item组件。 

<template>
  <!--  根据页面使用form是elementUI还是iView，外层使用对应的formItem组件（兼容旧代码有的用iView有的用elementUI的情况）  -->
  <!--  初始化时先默认不渲染，等获取到dom节点后再渲染，解决控制台在created阶段报错-->
  <component :is="wrapForm" v-if="isMounted" :rulesList="rulesList" :label="label" :lableWidth="labelWidth"
             :required="required" :prop="prop">
    <div class="fullEdit">
      ...
    </div>
  </component>
</template>

而判断条件为父组件中的dom元素是否包含类名“el-form”，是则渲染el-form-item组件，否则渲染iview的form-item组件。

created() {
    this.$nextTick(()=>{
      this.isElForm = document.querySelector('.mainCont').querySelector('.el-form') !== null
      this.isMounted = true
      ...
    })
  },

computed: {
    ...
    //渲染哪种外层form-item组件，elementUI或iView的form-item
    wrapForm() {
      return this.isElForm ? 'elFormIte