人人都会写的富文本编辑器

这个本来是给 vm-manager 写的一个富文本编辑器，后来觉得独立出来维护比较方便，就单独分离出来放到NPM。之所以说人人都会写, 是因为这个组件实现起来确实比较简单，不需要很厉害的Js水平, 基本是对document.execCommand()指令的绑定。在此将过程分享给大家

预览地址 https://luosijie.github.io/vm-editor/

源码地址 https://github.com/luosijie/vm-editor

安装

npm install --save vm-editor

使用

//upload绑定事件将编译的html字符传给父组件

---

准备

因为是Vue组件, 所以写这样的一个组件，需要掌握的知识点有：

1. Vue单文件组件开发
2. execCommand指令

组件结构

组件由 菜单部分和内容区域 2大部分组成, 其中菜单区域又由各种 指令按钮 组成，部分指令按钮还有下拉选项

指令按钮

指令按钮是 execConmand 的装载器，需要实现以下功能

1. 划过背景变灰
2. 显示按钮图标
3. 部分按钮需要实现点击展开下拉菜单

export default {
  name: 'VmEditorButton',
  props: {
    icon: {
      type: String,
      default: 'heading'
    }
  },
  data: function () {
    return {
      slot: false
    }
  },
  methods: {
    showSlot () {
      this.slot === false ? this.slot = true : this.slot = false
    }
  }
}

菜单区域

菜单区域放置按钮,主要实现的功能是

1. 将execCommand指令绑定到按钮中
2. 实现点击上传按钮编译html

主组件

主组件就是将 菜单组件和 内容区域 整合在一起

另外还要实现导出html的功能

  
    

      // 到处html的按钮，放在这里因为，需要获取 内容区域 的html数据
      
    
  
  // 内容区域 只要设置 **contenteditable="true"** 就可以了，其他的交给指令去做
  

  

其他组件

其他的组建主要是按钮下拉菜单， 因为每个都不一样，所以要独立出来

1. vm-editor-addimage: 插入图片
2. vm-editor-addlink: 插入链接
3. vm-editor-fontcolor: 修改颜色

不足之处

因为这个富文本编辑器的开发时间比较短，没有认真研究类似优秀插件的源码 也没有 深入调研过富文本编辑器的需求。
只是参考了一些同类编辑器的实现效果和UI风格，比如simditor，然后简单实现了一下功能。

所以肯定还有很多需要改善的地方，比较明显的有:

1. 浏览器的兼容
2. 表格功能的实现

不管怎样，仅供大家学习使用

先这样了， 欢迎star