用純js實現一個文本編輯器
阿新 • • 發佈：2019-02-04
padding lang style cti lists justify amp def copy
效果圖
代碼
<!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>Document</title> <style> .editButtons span{ display:inline-block; white-space:nowrap; } [data-edit] { float:left; border:0; font: 12px/1 monospace; background:#ddd; padding:4px 8px; } [contenteditable] { padding:4px 16px; background:#eee; } </style> </head> <body> <div class="editButtons"> <span title="STYLES"> <!-- 加粗 --> <button data-edit="bold"><b>B</b></button> <!-- 斜體 --> <button data-edit="italic"><i>I</i></button> <!-- 下劃線 --> <button data-edit="underline"><u>U</u></button> <!-- 中劃線 --> <button data-edit="strikeThrough"><s>S</s></button> </span> <span title="TEXT FORMAT"> <!-- 字體標簽設置 --> <button data-edit="formatBlock:p">P</button> <button data-edit="formatBlock:H1">H1</button> <button data-edit="formatBlock:H2">H2</button> <button data-edit="formatBlock:H3">H3</button> </span> <span title="FONT SIZE"> <!-- 字體大小設置 --> <button data-edit="fontSize:1">s</button> <button data-edit="fontSize:3">M</button> <button data-edit="fontSize:5">L</button> </span> <span title="LISTS"> <!-- 列表格式設置 --> <button data-edit="insertUnorderedList">UL</button> <button data-edit="insertOrderedList">OL</button> </span> <span title="ALIGNMENT"> <!-- 文本對齊設置 --> <button data-edit="justifyLeft">⇤</button> <button data-edit="justifyCenter">↔</button> <button data-edit="justifyRight">⇥</button> </span> <span title="CLEAR FORMATTING"> <!-- 清除文本 --> <button data-edit="removeFormat">×</button> </span> <span title="COPY"> <!-- 復制選中文本 --> <button data-edit="copy">C</button> </span> </div> <div contenteditable id="textbox"> <p>文本編輯器</p> </div> </body> <script> document.querySelectorAll("[data-edit]").forEach(btn => btn.addEventListener("click", function (ev) { ev.preventDefault(); console.log(this.getAttribute("data-edit")) const cmd_val = this.getAttribute("data-edit").split(":"); if(cmd_val[0] == ‘copy‘){ // 復制選中的文本 document.execCommand(cmd_val[0]); }else{ document.execCommand(cmd_val[0], false, cmd_val[1]); } }) ); </script> </html>
用純js實現一個文本編輯器