execCommand

当一个 HTML 文档切换到设计模式(designMode)时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用 contentEditable 时,调用 execCommand() 将影响当前活动的可编辑元素。

1.用法:

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

1. 返回值

一个 Boolean类型 ,如果是 false 则表示操作不被支持或未被启用。

2. 参数

2.1 aCommandName

一个 DOMString ,命令的名称。可用命令列表请参阅 命令 。

2.2 aShowDefaultUI

一个 Boolean 是否展示用户界面,一般为 false。Mozilla 没有实现。

2.3 aValueArgument

一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。

3. 命令(只选取一些下面代码有用到的命令)

3.1 bold

开启或关闭选中文字或插入点的粗体字效果。IE 浏览器使用 <strong> 标签,而不是 <b> 标签。

3.2 copy

拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。

3.3 fontSize

在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。

3.4 hiliteColor

更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)

3.5 italic

在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )

3.6 underline

在光标插入点开启或关闭下划线。

4. 简单富文本例子

(没加样式比较粗糙)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe id='HtmlEdit' style="width:400px; height: 300px" marginWidth='2px' marginHeight='2px'></iframe>
<div id="butGroup">
<button id="bold">加粗</button>
<button id="copy">复制</button>
<button id="big">变大</button>
<button id="italic">斜体</button>
<button id="underline">下划线</button>
<button id="hiliteColor">背景色</button> <button id="save">上传</button>
</div> <div id="box" style="height: 300px;width: 400px;border: 1px solid black"> </div>
<script language="javascript">
window.onload=function(){
var editor,butGroup, doc,box;
editor = document.getElementById("HtmlEdit").contentWindow;//获取iframe Window 对象
doc = document.getElementById("HtmlEdit").contentDocument; //获取iframe documen 对象
butGroup = document.getElementById('butGroup');
box= document.getElementById('box');
//设置事件监听
butGroup.addEventListener('click',function(e){
//通过e 事件 获取点击的标签 id
switch (e.target.id){
case 'bold':addBold(); break;
case 'big':big(); break;
case 'copy':copy(); break;
case 'italic':italic();break
case 'hiliteColor':hiliteColor(); break;
case 'underline':underline();break; case 'save':save();break
} }) //只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On'; //打开设计模式
editor.document.contentEditable = true;// 设置元素为可编辑 function big(){
//所有字体特效只是使用 execComman() 就能完成。
editor.document.execCommand("fontSize", true, 10);
console.log( doc.body.innerHTML); }
//复制方法
function copy(){
editor.document.execCommand("copy", true, null);
}
//加粗方法
function addBold() {
editor.document.execCommand("Bold", true, null);
}
//斜体方法
function italic(){
editor.document.execCommand('italic',true,null)
}
//加背景色
var hiliteColor = ()=>{ editor.document.execCommand('hiliteColor',true,'yellow') } //ES6 的箭头函数写法 //加下划线方法
var underline= ()=>{ editor.document.execCommand('underline',true,null)} //ES6 的箭头函数写法 //上传方法
function save(){
box.innerHTML=doc.body.innerHTML;
}
}
</script>
</body>
</html>

5.参考

更多详情及命令:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

JS 的execCommand 方法 做的一个简单富文本的更多相关文章

  1. C++ 容器的综合应用的一个简单实例——文本查询程序

    C++ 容器的综合应用的一个简单实例——文本查询程序 [0. 需求] 最近在粗略学习<C++ Primer 4th>的容器内容,关联容器的章节末尾有个很不错的实例.通过实现一个简单的文本查 ...

  2. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python使用wxPython创建一个简单的文本编辑器。

    ubuntu下通过'sudo apt-get install python-wxtools'下载wxPython.load和save函数用于加载和保存文件内容,button通过Bind函数绑定这两个函 ...

  5. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  6. 学习vi和vim编辑(3):一个简单的文本编辑器(2)

    然后文章,继续评论vi编辑简单的文本编辑命令. 本文主要是删除的文字.复制,运动命令. 删除文本: 正如上一篇文章中讲过的,对于删除命令("d")也具有"(command ...

  7. hammer.js方法总结(只做了一个简单的demo)

    html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. 基于Linq表达式做的一个简单的表达式生成器

    using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...

  9. 用if做了一个简单的猜拳游戏(做的不好还请指点,谢谢!)

    #include "stdio.h" #include "stdlib.h" #include "time.h" //随机函数的头文件 ma ...

随机推荐

  1. python 正则表达式 RE模块汇总记录

    re.compile(pattern, flags=0) re.search(pattern, string, flags=0) re.match(pattern, string, flags=0) ...

  2. springboot2系列目录

    参考:https://blog.csdn.net/cowbin2012/article/details/85254990 带源码

  3. leetcode17

    回溯法,深度优先遍历(DFS) public class Solution { int[] x; int N; string DIGITS; Dictionary<char, List<s ...

  4. 离线部署 pm2

    1. install nodejs curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash - 2.安装pm ...

  5. C# 数值的隐式转换

    Debug2.Log(5/8.0f, 5.0f/8, 5/8);//output:0.625, 0.625, 0 隐式数值转换表

  6. ionic+cordova填坑

    1.命令行更新 cordova,ionic.nodejs ,npm,bower等到新版本,不要在vs中更新 2.程序突然白屏 因为拷贝其他程序到js中,乱码 :a模拟器打开 f12看控制台错误解决 3 ...

  7. 示例:pm_multiple_models 匹配——形状匹配

    * This example program shows how to use HALCON's shape-based matching* to find multiple different mo ...

  8. springboot整合devtool无法热部署

    参见https://www.cnblogs.com/winner-0715/p/6666579.html.

  9. Django 表关系

    1.自定义主键字段的创建 AutoFiled(pirmary_key=True) # 一般不会自定义2.order_by asc desc 1. 表关系的创建- OneToOne student = ...

  10. f5 主备模式切换

    f5 主备模式  主机down自动切换到备  原主机重新启动,自动切换到原主机