javascript
小伙伴们惊呆了！10行 JavaScript 实现文本编辑器
最近，我需要做一個非常基本的網(wǎng)頁內(nèi)容編輯功能。我不想使用 iframe ，我也不想要一個功能特別多的復(fù)雜編輯器，只需要很基本的內(nèi)容編輯功能，例如粗體，斜體，列表，對齊等等。
您可能感興趣的相關(guān)文章- 分享九個不可思議的 WebGL 應(yīng)用試驗
- 2012年最經(jīng)典的10款 HTML5 游戲集錦
- 35款非常優(yōu)秀的基于 HTML5 網(wǎng)頁游戲
- 20個驚艷的 HTML5 Canvas 應(yīng)用試驗
- 8個驚艷的 HTML5 和 JavaScript 特效
?
?
用谷歌搜索找了很久，發(fā)現(xiàn)所有的插件都是功能太復(fù)雜，不是我想要的。所以，我決定我自己來實(shí)現(xiàn)需要的編輯功能。剛開始我覺得應(yīng)該要花費(fèi)很多的時間，因為我想象內(nèi)容編輯功能應(yīng)該是很復(fù)雜的。
但事實(shí)證明，它是如此簡單，讓我十分驚訝！借助 HTML5 特性，所有的工具都已經(jīng)可用，所有你需要做的只是配合他們編寫一些非常簡單的 JavaScript 代碼調(diào)用就可以了。
你需要兩樣?xùn)|西，第一是：
contenteditablecontenteditable 是 HTML 中的一個屬性，設(shè)置 HTML標(biāo)簽的 contenteditable=“true” 時，即可開啟該元素的編輯模式。contenteditable 的作用相當(dāng)神奇，可以讓 div 或整個網(wǎng)頁，以及 span 等等元素設(shè)置為可編輯。
我們最常用的輸入文本內(nèi)容是 input 與 textarea，使用 contenteditable 屬性后，可以在div、table、p、span、body等等很多元素中輸入內(nèi)容。如果想要整個網(wǎng)頁可編輯，可以在 body 標(biāo)簽內(nèi)設(shè)置 contenteditable。contenteditable 已在 HTML5 標(biāo)準(zhǔn)中得到有效的支持.
? 第二樣?xùn)|西是一個功能特殊的函數(shù)：
execCommandexecCommand 讓我們能夠?qū)?contenteditable 區(qū)域的內(nèi)容做一些相當(dāng)復(fù)雜的操作。如果你想了解更為詳細(xì)的內(nèi)容可以看這里：The Mozilla Docs。?
從本質(zhì)上講， execCommand 有三個參數(shù)：
Command Name?– 命令名稱；
ShowDefaultUI?– 未實(shí)現(xiàn)，所以最好設(shè)置為 false；
ValueArgument?– 命令的參數(shù)；
多數(shù)情況下，ValueArgument 可以設(shè)置為 null，但有一種情況：當(dāng)你要設(shè)置一行文本的標(biāo)簽的時候（h1，h2，p 等），你需要使用 formatBlock 命令，并把標(biāo)簽放到 ValueArgument 中。
現(xiàn)在，事情就很簡單了，我們把 exexCommand 要執(zhí)行的命令放到 data-role 屬性中，然后編寫簡單的?JavaScript 都可以很容易地完成編輯器功能了。核心代碼其實(shí)就10行：
$(function() {$('#editControls a').click(function(e) {switch($(this).data('role')) {case 'h1':case 'h2':case 'p':document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');break;default:document.execCommand($(this).data('role'), false, null);break;}}) });完整代碼如下：
<!DOCTYPE html> <html><head><title>Editable WYSIWYG</title><link href="bootstrap.css" rel="stylesheet"><link href="font-awesome.css" rel="stylesheet"><style>#editor {resize:vertical; overflow:auto; border:1px solid silver; border-radius:5px; min-height:100px;box-shadow: inset 0 0 10px silver;padding:1em;}</style></head><body><div class="content"><div class="container-fluid"><div id='pad-wrapper'><div id="editparent"><div id='editControls' class='span12' style='text-align:center; padding:5px;'><div class='btn-group'><a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a><a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a></div><div class='btn-group'><a class='btn' data-role='bold' href='#'><b>Bold</b></a><a class='btn' data-role='italic' href='#'><em>Italic</em></a><a class='btn' data-role='underline' href='#'><u><b>U</b></u></a><a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a></div><div class='btn-group'><a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a><a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a><a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a><a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a></div><div class='btn-group'><a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a><a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a></div><div class='btn-group'><a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a><a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a></div><div class='btn-group'><a class='btn' data-role='h1' href='#'>h<sup>1</sup></a><a class='btn' data-role='h2' href='#'>h<sup>2</sup></a><a class='btn' data-role='p' href='#'>p</a></div><div class='btn-group'><a class='btn' data-role='subscript' href='#'><i class='icon-subscript'></i></a><a class='btn' data-role='superscript' href='#'><i class='icon-superscript'></i></a></div></div><div id='editor' class='span12' style='' contenteditable><h1>This is a title!</h1><p>This is just some example text to start us off</p></div></div></div></div></div><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script>$(function() {$('#editControls a').click(function(e) {switch($(this).data('role')) {case 'h1':case 'h2':case 'p':document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');break;default:document.execCommand($(this).data('role'), false, null);break;}})});</script></body> </html>
源碼下載 ? ? ?在線演示
?
您可能感興趣的相關(guān)文章
- 讓人驚嘆的 Chrome 瀏覽器實(shí)驗項目
- 分享21款豐富多彩的 HTML5 網(wǎng)頁游戲
- 推薦10款優(yōu)秀的 HTML5 在線設(shè)計工具
- 2012年最佳的 HTML5 應(yīng)用和網(wǎng)站作品
- 29款基于 HTML 5 Canvas 的網(wǎng)頁游戲
?
英文來源：World’s Simplest HTML5 WYSISYG Inline Editor
文章來源：夢想天空 ◆ 關(guān)注Web前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源
本文出處【http://www.cnblogs.com/lhb25/】
總結(jié)
以上是生活随笔為你收集整理的小伙伴们惊呆了！10行 JavaScript 实现文本编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos6.3下搭建LAMP环境
- 下一篇： 纯JS制作的窗户雨滴效果