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

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

下面展示实现的效果：

体的实现过程：

（1）HTML结构：

 
 
 value='Bold' class="bold lj-klu5"> 
 
  
 
  
 
size <ｓｅｌｅｃｔ name="fontSize" class="font lj-gzgb"> 1 3 5 6 7  
 
img <ｓｅｌｅｃｔ name="insertImage"> 请选择图片 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,ｓｅｌｅｃｔ');for (var i = 0; i {if (inputbs[i].tagName.toLowerCase() == 'input') {this.action(inputbs[i], inputbs[i].name);} else if (inputbs[i].tagName.toLowerCase() == 'ｓｅｌｅｃｔ') {inputbs[i].onchange = function() {document.execCommand(this.name, true, this.value);}}}}action(obj, attr) {obj.onclick = function() {document.execCommand(attr, true);}}}new Editor();})();

相关推荐：

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