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

  下面展示实现的效果：

  体的实现过程：

  （1）HTML结构：

  <pre class="brush:php;toolbar:false;">

    
        
    
    
        
    
    
        
    
    size
        
            1
            3
            5
            6
            7
        
    
    img
        
            请选择图片
            timg.jpg
            timg1.jpg
            timg2.jpg
            timg3.jpg
            timg4.jpg
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    


    
        <p class="text" contenteditable="true">这是一个用p的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。

    

</pre></p>

  登录后复制

  （2）JS实现逻辑：

  <pre class="brush:php;toolbar:false;">(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();
;</pre>

  登录后复制