点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：懂视网责编：小采时间：2020-11-27 16:15:41

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

利用contenteditable属性与execCommand()方法制作简易富文本编辑器_html/css_WEB-ITnose:目录 [1]contenteditable [2]execCommand() 段落格式文本格式编辑图片 [3]富文本编辑器前面的话 HTML5新增contenteditable全局属性，通过此属性与document.execCommand()方法来制作富文本编辑器 contenteditable属性

推荐度：

点击下载本文 文档为doc格式

导读利用contenteditable属性与execCommand()方法制作简易富文本编辑器_html/css_WEB-ITnose:目录 [1]contenteditable [2]execCommand() 段落格式文本格式编辑图片 [3]富文本编辑器前面的话 HTML5新增contenteditable全局属性，通过此属性与document.execCommand()方法来制作富文本编辑器 contenteditable属性

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

前面的话

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

contenteditable属性

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

　　值：true/false

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

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

我是测试文字

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

简易富文本编辑器

            我是测试文字

.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);}

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