&

[點晴永久免費OA]利用contenteditable屬性與execCommand()步驟制作簡易富文本編輯器

當前位置：點晴教程→點晴OA辦公管理信息系統 →『經驗分享&問題答疑』

admin

2017年8月18日 12:41 本文熱度 6319

前面的話

　 HTML5新增contenteditable全局屬性，通過此屬性與document.execCommand()方法來制作富文本編輯器　

contenteditable屬性

　　作用：指定是否可以在瀏覽器里編輯內容

　　值：true/false

　　注意：設置document.designMode =''on''時，頁面的任意位置都可以編輯；使用contenteditable =''true''則只對具體元素和其包含的元素起作用

　　移動端：移動端ios5以及android3之后才支持該屬性

<div contenteditable>我是測試文字</div>

document.execCommand()方法

document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
//aCommandName為命令名稱，不可省略
//aShowDefaultUI為是否展示用戶界面，默認為false，可省略
//aValueArgument為額外參數值，默認為null,可省略

　　 [注意]firefox瀏覽器在第二個參數為true時，會拋出錯誤，所以為了確保兼容性，第二個參數應該始終為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]復制

document.execCommand(''copy'');

　　[3.2]剪切

document.execCommand(''cut'');

　　[3.3]粘貼(經測試無效)

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'');

　　[注意]與剪切板有關的命令在不同瀏覽器中差異很大。opera不支持，firefox默認禁用，而safari和chrome未實現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>

　<演示框>選中文字后，點擊下列相應屬性值可進行演示

該文章在 2017/8/18 12:41:08 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。