狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

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

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

前面的話

  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為是否展示用戶界面,默認(rèn)為false,可省略
//aValueArgument為額外參數(shù)值,默認(rèn)為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]添加縮進(jìn)

document.execCommand(''indent'');

  [1.5]去掉縮進(jìn)

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]刪除光標(biāo)后字符

document.execCommand(''forwarddelete'');

  [3.7]清空格式

document.execCommand(''removeFormat'');

  [3.8]前進(jìn)一步

document.execCommand(''redo'');

  [3.9]后退一步

document.execCommand(''undo'');

  [3.10]打印(對firefox無效)

document.execCommand(''print'');

  [注意]與剪切板有關(guān)的命令在不同瀏覽器中差異很大。opera不支持,firefox默認(rèn)禁用,而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)屬性值可進(jìn)行演示


該文章在 2017/8/18 12:41:08 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved