从Love上前端开始,都一直想做一个富文本编辑器,由于时间,上班,拖延、懒惰等等
直到今天才来,初略的了解了下,当然呢,至于过程也是前一秒痛苦,后三秒轻松加容易的。这个富文本编辑器,主要是用DIV自带的contenteditable属性以及document.execCommand()方法实现的,为了方便布局,偷了下小懒,直接拿table布局了,唉,作为一名那些年的前端开发人员,还真是不不知道该说些啥了。
下面展示实现的效果:
具体的实现过程:
(1)HTML结构:
(2)JS实现逻辑:
参考资料:
https://developer.mozilla/zh-CN/docs/Web/API/Document/execCommand
直到今天才来,初略的了解了下,当然呢,至于过程也是前一秒痛苦,后三秒轻松加容易的。这个富文本编辑器,主要是用DIV自带的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'>
<div class="text" contenteditable="true">这是一个用DIV的contenteditable属性以及document.execCommand实现的一个简易富文本编辑器。</div>
</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();
})();
参考资料:
https://developer.mozilla/zh-CN/docs/Web/API/Document/execCommand
更多推荐
JS实现简易版富文本编辑器
发布评论