[點晴永久免費OA]利用contenteditable屬性與execCommand()步驟制作簡易富文本編輯器
當(dāng)前位置:點晴教程→點晴OA辦公管理信息系統(tǒng)
→『 經(jīng)驗分享&問題答疑 』
前面的話HTML5新增contenteditable全局屬性,通過此屬性與document.execCommand()方法來制作富文本編輯器
contenteditable屬性作用:指定是否可以在瀏覽器里編輯內(nèi)容 值:true/false 注意:設(shè)置document.designMode =''on''時,頁面的任意位置都可以編輯;使用contenteditable =''true''則只對具體元素和其包含的元素起作用 移動端:移動端ios5以及android3之后才支持該屬性 <div contenteditable>我是測試文字</div>
document.execCommand()方法document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument) //aCommandName為命令名稱,不可省略 //aShowDefaultUI為是否展示用戶界面,默認為false,可省略 //aValueArgument為額外參數(shù)值,默認為null,可省略 [注意]firefox瀏覽器在第二個參數(shù)為true時,會拋出錯誤,所以為了確保兼容性,第二個參數(shù)應(yīng)該始終為false。
【1】段落格式[1.1]居中 document.execCommand(''justifyCenter''); [1.2]左對齊 document.execCommand(''justifyLeft''); [1.3]右對齊 document.execCommand(''justifyRight''); [1.4]添加縮進 document.execCommand(''indent''); [1.5]去掉縮進 document.execCommand(''outdent'');
【2】文本格式[2.1]字體類型 document.execCommand(''fontname'',false,sFontName) [2.2]字體大小 document.execCommand(''fontsize'',false,sFontSize) [2.3]字體顏色 document.execCommand(''forecolor'',false,sFontColor) [2.4]背景色 document.execCommand(''backColor'',false,sBackColor) [2.5]加粗 document.execCommand(''bold''); [2.6]斜體 document.execCommand(''italic''); [2.7]下劃線 document.execCommand(''underline'');
【3】編輯[3.1]復(fù)制 document.execCommand(''copy''); [3.2]剪切 document.execCommand(''cut''); [3.3]粘貼(經(jīng)測試無效) document.execCommand(''paste''); [3.4]全選 document.execCommand(''selectAll''); [3.5]刪除 document.execCommand(''delete''); [3.6]刪除光標后字符 document.execCommand(''forwarddelete''); [3.7]清空格式 document.execCommand(''removeFormat''); [3.8]前進一步 document.execCommand(''redo''); [3.9]后退一步 document.execCommand(''undo''); [3.10]打印(對firefox無效) document.execCommand(''print''); [注意]與剪切板有關(guān)的命令在不同瀏覽器中差異很大。opera不支持,firefox默認禁用,而safari和chrome未實現(xiàn)paste。
【4】圖片document.execCommand(''insertImage'',false,''image.png'');
簡易富文本編輯器<div class="box"> <div class="con" id="con"> <button data-name="selectAll">全選</button> <button data-name="delete">刪除</button> <button data-name="undo">撤銷</button> <button data-name="print">打印</button> <button data-name="bold">加粗</button> <button data-name="italic">斜線</button> <button data-name="underline">下劃線</button> <button data-name="fontsize" data-value="16px">大號字體</button> <button data-name="forecolor" data-value="red">紅色文本</button> <button data-name="backcolor" data-value="gray">灰色背景</button> <button data-name="removeFormat">清空格式</button> </div> <div class="show" id="show" contenteditable>我是測試文字</div> </div> .box{ width: 500px; } .con{ overflow:hidden; margin-bottom: 6px; } .con button{ float: left; padding: 2px; border: 1px solid gray; margin-right: 2px; cursor: pointer; } .show{ height: 200px; border: 2px solid rgba(0,0,0,0.3); } <script> var aCon = document.getElementById(''con'').getElementsByTagName(''button''); for(var i = 0; i < aCon.length; i++){ aCon[i].onclick = function(){ document.execCommand(this.dataset.name,false,this.dataset.value); } } </script>
<演示框>選中文字后,點擊下列相應(yīng)屬性值可進行演示 該文章在 2017/8/18 12:41:08 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |