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

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

安装

npm install --save vm-editor

使用

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

import VmEditor from 'vm-editor'

export default {

...

methods: {

showHtml: function(data){

console.log(data)

}

}

}

准备

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

组件结构

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

指令按钮

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

划过背景变灰

显示按钮图标

部分按钮需要实现点击展开下拉菜单

// 显示按钮图标

// 部分按钮需要实现点击展开下拉菜单

...

// 划过显示背景

button.vm-editor-button:hover{

background-color: #eee;

}

...

export default {

name: 'VmEditorButton