富文本

富文本编辑

在空白 HTML 文件中嵌入一个iframe。通过 designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素
的 HTML。designMode 属性有两个可能的值：”off”（默认值）和”on”。设置为”on”时

富文本交互

使用 document.execCommand()。这个方法在文档上执行既定
的命令，可以实现大多数格式化任务。document.execCommand()可以接收 3 个参数：要执行的命令、表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值

// 在内嵌窗格中切换粗体文本样式
frames["richedit"].document.execCommand("bold", false, null);
// 在内嵌窗格中切换斜体文本样式
frames["richedit"].document.execCommand("italic", false, null);
// 在内嵌窗格中创建指向 www.wrox.com 的链接
frames["richedit"].document.execCommand("createlink", false,
"http://www.wrox.com");
// 在内嵌窗格中为内容添加<h1>标签
frames["richedit"].document.execCommand("formatblock", false, "<h1>");

富文本选择

在内嵌窗格中使用 getSelection()方法，可以获得富文本编辑器的选区。这个方法暴露在document 和 window 对象上，返回表示当前选中文本的 Selection 对象

let selection = frames["richedit"].getSelection();
// 取得选中的文本
let selectedText = selection.toString();
// 取得表示选区的范围
let range = selection.getRangeAt(0);
// 高亮选中的文本
let span = frames["richedit"].document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);

通过表单提交富文本

form.addEventListener("submit",(event)=>{
    let target=event.target;
   target.elements["comments"].value=frames["richedit"].document.body.innerHTML;//使用内嵌窗格 
    //target.elements["comments"].value=document.getElementById("richedit").innerHTML;//使用contenteditable
})