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

})();

相关推荐：

简单实现JavaScript 富文本编辑器的方法