主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
js实现简单富文本编辑器一
2021-04-21
网页编程网
网页编程网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生JS实现简单富文本编辑器</title> </head> <body> <center><h2 style="margin:auto;">原生JS实现简单富文本编辑器</h2></center> <hr> <div id="toolbar" style="width:700px;margin:auto;border:2px solid gray;padding: 5px;overflow: auto;font-family: 'Courier New', Courier, monospace;"> <input type="button" name="bold" value='Bold' class="bold"> <input type="button" name="italic" value='Italic' class="italic"> <input type="button" name="underline" value='Underline' class="decotation"> </div> <div id="edit" style="width:700px;height:500px;margin:auto;border:2px solid gray;padding: 5px;overflow: auto;" contenteditable="true"> </div> <button id="save" style="width:300px;height:30px;margin:auto;margin-top:30px;background-color: green;border:1px solid green;display: block;color: white;font-family:'Courier New', Courier, monospace; font-weight: 500;font-size: 20px;">点 击</button> <script> (function () { // 富文本编辑器类 class Editor { constructor() { this.bindElem(); } bindElem() { var toolbar = document.getElementById("toolbar"); var bs = toolbar.querySelectorAll('input,select'); for (var i = 0; i < bs.length; i++) { if (bs[i].tagName.toLowerCase() == 'select') { bs[i].onchange = function () { document.execCommand(this.name, true, this.value); } } else if (bs[i].tagName.toLowerCase() == 'input') { this.action(bs[i], bs[i].name); } } } action(obj, attr) { obj.onclick = function () { document.execCommand(attr,true); } } } new Editor(); document.getElementById("save").onclick = function(){ alert(document.getElementById("edit").innerHTML); } })(); </script> </body> </html>
阅读原文
阅读
2660
123
显示电脑版