体的实现过程——富文本编辑器实现

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

  下面展示实现的效果：

  体的实现过程：

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

  登录后复制