1.2.4 • Published 3 years ago
vue-light-editor v1.2.4
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
对象来控制光标位置以及选中的操作元素。
功能支持
- 标题heading (当前仅支持固定大小h3)
- 加粗bold
- 斜体italic
- 插入图片
- 插入链接
- 有序列表
- 无序列表
- 分隔符hr
- 插入表格
展示效果
参考链接
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago