php简单富文本,JS简易版富文本编辑器实现代码

直到今天才来，初略的了解了下，当然呢，至于过程也是前一秒痛苦，后三秒轻松加容易的。这个富文本编辑器，主要是用p自带的contenteditable属性document.execCommand()方法实现的，为了方便布局，偷了下小懒，直接拿table布局了，唉，作为一名那些年的前端开发人员，还真是不不知道该说些啥了。

下面展示实现的效果：

体的实现过程：

(1)HTML结构：

			size 1 3 5 6 7	img 请选择图片 timg.jpg timg1.jpg timg2.jpg timg3.jpg timg4.jpg
这是一个用p的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。

(2)JS实现逻辑：

(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();

})();

相关推荐：