js簡單富文字編輯器效果程式碼例項
本章一段程式碼例項,實現了簡單的富文字編輯器功能。
當然這個效果不一定有實用價值,不過可以學習一下知識和開闊一下程式設計思路。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } label { cursor: pointer; } #wrap { width: 80%; height: 400px; margin: 20px auto; box-shadow: #272727 0px 0px 5px; } .menu { width: 100%; height: 49px; border-bottom: 1px solid #272727; } .menu > li { line-height: 49px; height: 49px; float: left; padding: 0 10px; cursor: pointer; text-align: center; position: relative; } .menu > li:after { content: "|"; width: 5px; position: absolute; right: 0; top: 0; } .menu > li label { width: 100%; height: 100%; display: inline-block; } .edit_wrap { width: 96%; padding: 2%; height: calc(100% - 50px - 4%); overflow: auto; line-height: 1.5; outline: none; } .btnBox { display: none; position: absolute; left: 0; top: 49px; width: 100%; } .btnBox > li { width: 100%; height: 35px; line-height: 35px; text-align: center; background: #fff; } input { border: none; width: 100%; height: 100%; cursor: pointer; outline: none; font-size: 16px; background: inherit; } .menu li:hover ul { display: block; } .btnBox > li:hover, .menu > li:hover { background: #CCCCCC; } .item { list-style-type: square !important; margin-left: 10px; } </style> <script> window.onload = function() { var editWrap = document.querySelector(".edit_wrap"), setSizeBtn = document.querySelectorAll(".size"), setFormatBtn = document.querySelectorAll(".format"), setColorBtn = document.querySelectorAll(".color"), setBGColorBtn = document.querySelectorAll(".BGcolor"), Fbtn = document.querySelectorAll(".Fbtn"), Tbtn = document.querySelectorAll(".Tbtn"); for (var i = 0; i < 4; i++) { setSizeBtn[i].addEventListener("click", setTxtStyle); setColorBtn[i].addEventListener("click", setTxtStyle); setBGColorBtn[i].addEventListener("click", setTxtStyle); setFormatBtn[i].addEventListener("click", setTxtStyle); }; for (var i = 0; i < Fbtn.length; i++) { Fbtn[i].addEventListener("click", setTxtStyle); }; function setTxtStyle(e) { var that = e.target, type = "", bool = false, valueTxt = this.getAttribute("data") || ""; switch (that.className) { case "color": type = "ForeColor"; break; case "size": type = "FontSize"; break; case "BGcolor": type = "BackColor"; break; case "format": type = this.getAttribute("data-type"); break; case "Fbtn": type = this.getAttribute("data-type"); break; default: break; }; document.execCommand(type, bool, valueTxt); }; } </script> </head> <body> <div id="wrap"> <ul class="menu"> <li> 顏色 <ul class="btnBox fontColorWrap"> <li><input type="button" class="color" value="紅" data="red" /></li> <li><input type="button" class="color" value="黃" data="yellow" /></li> <li><input type="button" class="color" value="綠" data="green" /></li> <li><input type="button" class="color" value="藍" data="blue" /></li> </ul> </li> <li> 字號 <ul class="btnBox fontSizeWrap"> <li><input type="button" class="size" value="15px" data="15" /></li> <li><input type="button" class="size" value="20px" data="20" /></li> <li><input type="button" class="size" value="25px" data="25" /></li> <li><input type="button" class="size" value="30px" data="30" /></li> </ul> </li> <li> 背景顏色 <ul class="btnBox BGColorWrap"> <li><input type="button" class="BGcolor" value="紅" data="red" /></li> <li><input type="button" class="BGcolor" value="黃" data="yellow" /></li> <li><input type="button" class="BGcolor" value="綠" data="green" /></li> <li><input type="button" class="BGcolor" value="藍" data="blue" /></li> </ul> </li> <li> 對齊 <ul class="btnBox formatWrap"> <li><input type="button" class="format" value="居中" data-type="JustifyCenter" /></li> <li><input type="button" class="format" value="左邊" data-type="JustifyLeft" /></li> <li><input type="button" class="format" value="右邊" data-type="JustifyRight" /></li> <li><input type="button" class="format" value="無" data-type="JustifyRight" disabled="disabled" /></li> </ul> </li> <li><input type="button" class="Fbtn" value="斜體" data-type="Italic" /></li> <li><input type="button" class="Fbtn" value="粗體" data-type="Bold" /></li> <li><input type="button" class="Fbtn" value="下劃線" data-type="Underline" /></li> </ul> <div class="edit_wrap" contenteditable="true"> 本站的url地址是<a href="http://www.softwhy.com" target="_blank">www.softwhy.com</a> </div> </div> </body> </html>
相關文章
- js簡單日曆效果程式碼例項JS
- js簡單摺紙效果程式碼例項JS
- 富文字編輯器初探
- Javascript富文字編輯器JavaScript
- 簡單好用的文字編輯器《Simditor》外掛快速入門例項
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- 淺析富文字編輯器框架Slate.js框架JS
- 在VueJS中使用 froala 富文字編輯器VueJS
- 線上富文字編輯器初探
- 淡入淡出效果簡單程式碼例項
- js選項卡簡單程式碼例項JS
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- Squire – 簡潔的 HTML5 富文字編輯器UIHTML
- SpringMVC整合富文字編輯器SpringMVC
- 分享 - 富文字編輯器 Froala Editor
- [Djangorestframework]-富文字編輯器的使用DjangoRESTFramework
- SSM使用UEditor富文字編輯器SSM
- js map集合簡單程式碼例項JS
- JSON簡單格式程式碼例項JSON
- js點選文字框選中文字效果程式碼例項JS
- Vue.js編輯文字--菜鳥教程例項Vue.js
- js自定義實現的簡單編碼和解碼程式碼例項JS
- JavaScript簡單的日曆效果程式碼例項JavaScript
- CSS文字模糊效果程式碼例項CSS
- 不到200行 JavaScript 程式碼如何實現富文字編輯器JavaScript
- 一個富文字編輯器quill 以Vue專案為例UIVue
- Eleditor移動端富文字編輯器
- 利用 javascript 實現富文字編輯器JavaScript
- js簡單的留言功能程式碼例項JS
- artEditor移動端富文字編輯器使用簡單介紹
- html實現簡單ListViews效果的例項程式碼HTMLView
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- js文字內容感應滑鼠懸浮效果程式碼例項JS
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- 密碼框提示文字效果程式碼例項密碼