你的位置:首页 > 网页设计

[网页设计]利用contenteditable属性与execCommand()方法制作简易富文本编辑器


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

前面的话

  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,可省略

 

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

 

【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>

  

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