直到今天才来，初略的了解了下，当然呢，至于过程也是前一秒痛苦，后三秒轻松加容易的。这个富文本编辑器，主要是用p自带的contenteditable属性document.execcommand()方法实现的，为了方便布局，偷了下小懒，直接拿table布局了，唉，作为一名那些年的前端开发人员，还真是不不知道该说些啥了。
下面展示实现的效果：
体的实现过程：
（1）html结构：
<table border='1' class="tablebox" id='tablebox'> <tr> <td> <input type="button" name="bold" value='bold' class="bold"> </td> <td> <input type="button" name="italic" value='italic' class="italic"> </td> <td> <input type="button" name="underline" value='underline' class="decotation"> </td> <td>size <select name="fontsize" class="font"> <option value="1">1</option> <option value="3">3</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> </td> <td>img <select name="insertimage"> <option value="">请选择图片</option> <option value="timg.jpg">timg.jpg</option> <option value="timg1.jpg">timg1.jpg</option> <option value="timg2.jpg">timg2.jpg</option> <option value="timg3.jpg">timg3.jpg</option> <option value="timg4.jpg">timg4.jpg</option> </select> </td> <td> <input type="button" name="selectall" value='全选' class="selectall"> </td> <td> <input type="button" name="undo" value='撤销' class="undo"> </td> <td> <input type="button" name="justifyleft" value='left' class="justifyleft"> </td> <td> <input type="button" name="justifycenter" value='center' class="justifycenter"> </td> <td> <input type="button" name="justifyright" value='right' class="justifyright"> </td> </tr> <tr> <td colspan='10'> <p class="text" contenteditable="true">这是一个用p的contenteditable属性以及document.execcommand实现的一个简易富文本编辑器。</p> </td> </tr> </table>
（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 富文本编辑器的方法
以上就是js简易版富文本编辑器实现代码的详细内容。