vue-light-editor

simpleEditor

功能简单的富文本编辑器, 支持在vue项目中作为插件使用。由于项目实现的功能参考的是teambition中日程创建中使用的编辑器，功能比较简单，不作正式的文字处理软件使用。

支持在项目中全局引入

// main.js
import lightEditor from 'vue-light-editor';

Vue.use(lightEditor)

// vue文件
<light-editor></light-editor>

实现原理

使用contenteditable="true"属性使div元素实现可编辑。由于input元素和textarea元素对html标签的显示不太友好，所以不使用这种方式实现。

编辑器的工具基本由原生JS操作DOM元素(heading)和document.execCommond(bold, italic)这一api来实现。同时配合Selection对象和Range对象来控制光标位置以及选中的操作元素。

功能支持

1. 标题heading (当前仅支持固定大小h3)
2. 加粗bold
3. 斜体italic
4. 插入图片
5. 插入链接
6. 有序列表
7. 无序列表
8. 分隔符hr
9. 插入表格

展示效果

参考链接

• 【webpack】font-awesome加载不到woff字体文件
• 富文本编辑器-Selection
• 富文本编辑器-Range
• document.execCommand
• 文件上传
• 在contenteditable元素中将光标定位到最后
• JavaScript动态创建表格的四种方法和性能测试