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

2020-11-27 来源：乌哈旅游

直到今天才来，初略的了解了下，当然呢，至于过程也是前一秒痛苦，后三秒轻松加容易的。这个富文本编辑器，主要是用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();

})();

全部栏目

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