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

来源：互联网 2024-10-06 12:43:11

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

下面展示实现的效果：

体的实现过程：

（1）HTML结构：

<table border=&#39;1&#39; class="tablebox" id=&#39;tablebox&#39;>    <tr>        <td>            <input type="button" name="bold" value=&#39;Bold&#39; class="bold">        </td>        <td>            <input type="button" name="italic" value=&#39;Italic&#39; class="italic">        </td>        <td>            <input type="button" name="underline" value=&#39;Underline&#39; class="decotation">        </td>        <td>size            <ｓｅｌｅｃｔ 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>            </ｓｅｌｅｃｔ>        </td>        <td>img            <ｓｅｌｅｃｔ 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>            </ｓｅｌｅｃｔ>        </td>        <td>            <input type="button" name="selectAll" value=&#39;全选&#39; class="selectAll">        </td>        <td>            <input type="button" name="undo" value=&#39;撤销&#39; class="undo">        </td>        <td>            <input type="button" name="justifyLeft" value=&#39;left&#39; class="justifyLeft">        </td>        <td>            <input type="button" name="justifyCenter" value=&#39;center&#39; class="justifyCenter">        </td>        <td>            <input type="button" name="justifyRight" value=&#39;right&#39; class="justifyRight">        </td>    </tr>    <tr>        <td colspan=&#39;10&#39;>            <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(&#39;.text&#39;);var txt = null;var tablebox = document.getElementById_x(&#39;tablebox&#39;);var inputbs = tablebox.querySelectorAll(&#39;input,ｓｅｌｅｃｔ&#39;);for (var i = 0; i {if (inputbs[i].tagName.toLowerCase() == &#39;input&#39;) {this.action(inputbs[i], inputbs[i].name);} else if (inputbs[i].tagName.toLowerCase() == &#39;ｓｅｌｅｃｔ&#39;) {inputbs[i].onchange = function() {document.execCommand(this.name, true, this.value);}}}}action(obj, attr) {obj.onclick = function() {document.execCommand(attr, true);}}}new Editor();})();