零陵做网站,医疗微网站建设计划书,深圳网站建设 华信科,2017最新网站icp备案要素过多建议收藏
- 富文本编辑 基本的技术就是在空白 HTML 文件中嵌入一个 iframe 。通过 designMode 属性#xff0c;可以将这个空白文档变成可以编辑的#xff0c;实际编辑的则是 body 元素 的 HTML 。 designMode 属性有两个可能的值#xff1a; 可以将这个空白文档变成可以编辑的实际编辑的则是 body 元素 的 HTML 。 designMode 属性有两个可能的值 off 默认值和 on 。设置为 on 时整个文档 都会变成可以编辑的显示插入光标从而可以像使用文字处理程序一样编辑文本通过键盘将文本 标记为粗体、斜体等等。 作为 iframe 源的是一个非常简单的空白 HTML 页面。下面是一个例子 !DOCTYPE html
htmlheadtitleBlank Page for Rich Text Editing/title/headbody/body
/html 这个页面会像其他任何页面一样加载到 iframe 里。为了可以编辑必须将文档的 designMode 属 性设置为 on 。不过只有在文档完全加载之后才可以设置。在这个包含页面内需要使用 onload 事件处理程序在适当时机设置 designMode 如下面的例子所示 iframe namerichedit styleheight: 100px; width: 100px/iframe
script window.addEventListener(load, () { frames[richedit].document.designMode on; });
/script 以上代码加载之后可以在页面上看到一个类似文本框的区域。这个框的样式具有网页默认样式 不过可以通过 CSS 调整。 - 使用 contenteditable 还有一种处理富文本的方式也是 IE 最早实现的即指定 contenteditable 属性。可以给页面 中的任何元素指定 contenteditable 属性然后该元素会立即被用户编辑。这种方式更受欢迎因为 不需要额外的 iframe 、空页面和 JavaScript 只给元素添加一个 contenteditable 属性即可比如 div classeditable idrichedit contenteditable /div 元素中包含的任何文本都会自动被编辑元素本身类似于 textarea 元素。通过设置 contentEditable 属性也可以随时切换元素的可编辑状态 let div document.getElementById(richedit); richedit.contentEditable true; contentEditable 属性有 3 个可能的值 true 表示开启 false 表示关闭 inherit 表示 继承父元素的设置因为在 contenteditable 元素内部会创建和删除元素。 IE 、 Firefox 、 Chrome 、 Safari 和 Opera 及所有主流移动浏览器都支持 contentEditable 属性。 - 与富文本交互 与富文本编辑器交互的主要方法是使用 document.execCommand() 。这个方法在文档上执行既定 的命令可以实现大多数格式化任务。 document.execCommand() 可以接收 3 个参数要执行的命令、 表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值如果不需要则为 null 。为跨浏览 器兼容第二个参数应该始终为 false 因为 Firefox 会在其为 true 时抛出错误。 不同浏览器支持的命令也不一样。下表列出了最常用的命令。 剪贴板相关的命令与浏览器关系密切。虽然这些命令并不都可以通过 document.execCommand() 使用但相应的键盘快捷键都是可以用的。 这些命令可以用于修改内嵌窗格 iframe 中富文本区域的外观如下面的例子所示 // 在内嵌窗格中切换粗体文本样式 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); 同样的方法也可以用于页面中添加了 contenteditable 属性的元素只不过要使用当前窗口而不 是内嵌窗格中的 document 对象 // 切换粗体文本样式 document.execCommand(bold, false, null); // 切换斜体文本样式 document.execCommand(italic, false, null); // 创建指向 www.wrox.com 的链接 document.execCommand(createlink, false, http://www.wrox.com); // 为内容添加 h1 标签 document.execCommand(formatblock, false, h1); 注意即使命令是所有浏览器都支持的命令生成的 HTML 通常差别也很大。例如为选中文本 应用 bold 命令在 IE 和 Opera 中会使用 strong 标签在 Safari 和 Chrome 中会使用 b标签而在Firefox 中会使用 span 标签。在富文本编辑中不能依赖浏览器生成的 HTML因为命令实现和格式 转换都是通过 innerHTML 完成的。 还有与命令相关的其他一些方法。第一个方法是 queryCommandEnabled() 此方法用于确定对当 前选中文本或光标所在位置是否可以执行相关命令。它只接收一个参数即要检查的命令名。如果可编 辑区可以执行该命令就返回 true 否则返回 false 。来看下面的例子 let result frames[richedit].document.queryCommandEnabled(bold); 以上代码在当前选区可以执行 bold 命令时返回 true 。不过要注意 queryCommandEnabled() 返回 true 并不代表允许执行相关命令只代表当前选区适合执行相关命令。在 Firefox 中 queryCommandEnabled(cut) 即使默认不允许剪切也会返回 true 。 另一个方法 queryCommandState() 用于确定相关命令是否应用到了当前文本选区。例如要确定 当前选区的文本是否为粗体可以这样 let isBold frames[richedit].document.queryCommandState(bold); 如果之前给文本选区应用过 bold 命令则以上代码返回 true 。全功能富文本编辑器可以利用这 个方法更新粗体、斜体等按钮。 最后一个方法是 queryCommandValue() 此方法可以返回执行命令时使用的值即前面示例的 execCommand() 中的第三个参数。如果对一段选中文本应用了值为 7 的 fontsize命令则如下代 码会返回 7 let fontSize frames[richedit].document.queryCommandValue(fontsize); 这个方法可用于确定如何将命令应用于文本选区从而进一步决定是否需要执行下一个命令。 - 富文件选择 在内嵌窗格中使用 getSelection() 方法可以获得富文本编辑器的选区。这个方法暴露在 document 和 window 对象上返回表示当前选中文本的 Selection 对象。每个 Selection 对象都拥 有以下属性。 anchorNode 选区开始的节点。 anchorOffset 在 anchorNode 中从开头到选区开始跳过的字符数。 focusNode 选区结束的节点。 focusOffset focusNode 中包含在选区内的字符数。 isCollapsed 布尔值表示选区起点和终点是否在同一个地方。 rangeCount 选区中包含的 DOM 范围数量。 Selection 的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息并允许操作 选区。 addRange( range ) 把给定的 DOM 范围添加到选区。 collapse( node, offset ) 将选区折叠到给定节点中给定的文本偏移处。 collapseToEnd() 将选区折叠到终点。 collapseToStart() 将选区折叠到起点。 containsNode( node ) 确定给定节点是否包含在选区中。 deleteFromDocument() 从文档中删除选区文本。与执行 execCommand(delete, false, null) 命令结果相同。 extend( node, offset ) 通过将 focusNode 和 focusOffset 移动到指定值来扩展选区。 getRangeAt( index ) 返回选区中指定索引处的 DOM 范围。 removeAllRanges() 从选区中移除所有 DOM 范围。这实际上会移除选区因为选区中至少 要包含一个范围。 removeRange( range ) 从选区中移除指定的 DOM 范围。 selectAllChildren( node ) 清除选区并选择给定节点的所有子节点。 toString() 返回选区中的文本内容。 Selection 对象的这个方法极其强大充分利用了 DOM 范围来管理选区。操纵 DOM 范围可以实 现比 execCommand() 更细粒度的控制因为可以直接对选中文本的 DOM 内容进行操作。来看下面的 例子 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); 以上代码会在富文本编辑器中给选中文本添加黄色高亮背景。实现方式是在默认选区使用 DOM 范 围用 surroundContents() 方法给选中文本添加背景为黄色的 span 标签。 getSelection() 方法在 HTML5 中进行了标准化 IE9 以及 Firefox 、 Safari 、 Chrome 和 Opera 的所 有现代版本中都实现了这个方法。 IE8 及更早版本不支持 DOM 范围不过它们允许通过专有的 selection 对象操作选中的文本。如 本章前面所讨论的这个 selection 对象是 document 的属性。要取得富文本编辑器中选中的文本 必须先创建一个文本范围然后再访问其 text 属性 let range frames[richedit].document.selection.createRange();
let selectedText range.text; 使用 IE 文本范围执行 HTML 操作不像使用 DOM 范围那么可靠不过也是可以做到的。要实现与 使用 DOM 范围一样的高亮效果可以组合使用 htmlText 属性和 pasteHTML() 方法 let range frames[richedit].document.selection.createRange();
range.pasteHTML( span stylebackground-color:yellow${range.htmlText}/span); 以上代码使用 htmlText 取得了当前选区的 HTML 然后用一个 span 标签将其包围起来并通过 pasteHTML() 再把它插入选区中。
