Heim > Web-Frontend > HTML-Tutorial > 利用contenteditable属性与execCommand()方法制作简易富文本编辑器_html/css_WEB-ITnose

利用contenteditable属性与execCommand()方法制作简易富文本编辑器_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 11:32:11
Original
2405 Leute haben es durchsucht

目录 [1]contenteditable [2]execCommand() 段落格式 文本格式 编辑 图片 [3]富文本编辑器

前面的话

  HTML5新增contenteditable全局属性,通过此属性与document.execCommand()方法来制作富文本编辑器 

 

contenteditable属性

  作用:指定是否可以在浏览器里编辑内容

  值:true/false

  注意:设置document.designMode ='on'时,页面的任意位置都可以编辑;使用contenteditable ='true'则只对具体元素和其包含的元素起作用

  移动端:移动端ios5以及android3之后才支持该属性

<div contenteditable>我是测试文字</div>    
Nach dem Login kopieren

document.execCommand()方法

document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)//aCommandName为命令名称,不可省略//aShowDefaultUI为是否展示用户界面,默认为false,可省略//aValueArgument为额外参数值,默认为null,可省略
Nach dem Login kopieren

【1】段落格式

  [1.1]居中

document.execCommand('justifyCenter');
Nach dem Login kopieren

  [1.2]左对齐

document.execCommand('justifyLeft');
Nach dem Login kopieren

  [1.3]右对齐

document.execCommand('justifyRight');
Nach dem Login kopieren

  [1.4]添加缩进

document.execCommand('indent');
Nach dem Login kopieren

  [1.5]去掉缩进

document.execCommand('outdent');
Nach dem Login kopieren

【2】文本格式

  [2.1]字体类型

document.execCommand('fontname',false,sFontName)
Nach dem Login kopieren

  [2.2]字体大小

document.execCommand('fontsize',false,sFontSize)
Nach dem Login kopieren

  [2.3]字体颜色

document.execCommand('forecolor',false,sFontColor)
Nach dem Login kopieren

  [2.4]背景色

document.execCommand('backColor',false,sBackColor)
Nach dem Login kopieren

  [2.5]加粗

document.execCommand('bold');
Nach dem Login kopieren

  [2.6]斜体

document.execCommand('italic');
Nach dem Login kopieren

  [2.7]下划线

document.execCommand('underline');
Nach dem Login kopieren

【3】编辑

  [3.1]复制

document.execCommand('copy');
Nach dem Login kopieren

  [3.2]剪切

document.execCommand('cut');
Nach dem Login kopieren

  [3.3]粘贴(经测试无效)

document.execCommand('paste');
Nach dem Login kopieren

  [3.4]全选

document.execCommand('selectAll');    
Nach dem Login kopieren

  [3.5]删除

document.execCommand('delete');
Nach dem Login kopieren

  [3.6]删除光标后字符

document.execCommand('forwarddelete');
Nach dem Login kopieren

  [3.7]清空格式

document.execCommand('removeFormat');
Nach dem Login kopieren

  [3.8]前进一步

document.execCommand('redo');
Nach dem Login kopieren

  [3.9]后退一步

document.execCommand('undo');
Nach dem Login kopieren

  [3.10]打印(对firefox无效)

document.execCommand('print');
Nach dem Login kopieren

【4】图片

document.execCommand('insertImage',false,'image.png');
Nach dem Login kopieren

简易富文本编辑器

<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>    
Nach dem Login kopieren

.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);}
Nach dem Login kopieren

<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>
Nach dem Login kopieren

  

  选中文字后,点击下列相应属性值可进行演示

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage