欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-01-11 22:32:59
...
目录 [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);}

        

  

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