直到今天才来,初略的了解了下,当然呢富文本编辑器 js,至于过程也是前一秒痛苦,后三秒轻松加容易的。这个富文本编辑器,主要是用p自带的contenteditable属性document.execCommand()方法实现的,为了方便布局,偷了下小懒,直接拿table布局了,唉,作为一名那些年的前端开发人员富文本编辑器 js,还真是不不知道该说些啥了。
下面展示实现的效果:
体的实现过程:
(1)HTML结构:
PHP
size
1
3
5
6
7
img
请选择图片
timg.jpg
timg1.jpg
timg2.jpg
timg3.jpg
timg4.jpg
这是一个用p的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。
(2)JS实现逻辑:
PHP
(function() {//富文本编辑器类
class Editor {
constructor() {
this.bindElem();
}
bindElem() {
var text = document.querySelector('.text');
var txt = null;
var tablebox = document.getElementById_x('tablebox');
var inputbs = tablebox.querySelectorAll('input,select');
for (var i = 0; i {
if (inputbs[i].tagName.toLowerCase() == 'input') {
this.action(inputbs[i], inputbs[i].name);
} else if (inputbs[i].tagName.toLowerCase() == 'select') {
inputbs[i].onchange = function() {
document.execCommand(this.name, true, this.value);
}
}
}
}
action(obj, attr) {
obj.onclick = function() {
document.execCommand(attr, true);
}
}
}
new Editor();
;
登录后复制
收藏
点赞
!
发表评论