利用`execCommand`实现一个简单的富文本编辑器

889 阅读6分钟

一、实现思路

  • 编写操作按钮,以及添加iframe 作为富文本编辑器
  • iframedesignMode设置为'On'
  • iframecontentEditable设置为true
  • 为按钮绑定点击事件,执行相应操作
  • 调用iframe.document.execCommand方法,实现编辑器的某些操作,execCommand方法具体使用可以参考MDN官网

二、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .btn-group {
      margin: 20px 0;
    }

    .btn {
      color: #1B9AF7;
      background-color: #FFF;
      border: 1px solid #229ffd;
      border-radius: 5px;
      cursor: pointer;
    }

    #editor {
      border: 1px solid #424242;
    }
  </style>
</head>
<body>
  <div class="btn-group">
    <input class="btn" type="button" value="撤销" data-id="1">
    <input class="btn" type="button" value="恢复" data-id="2">
    <input class="btn" type="button" value="剪切选中文字" data-id="3">
    <input class="btn" type="button" value="复制选中文字" data-id="4">
    <input class="btn" type="button" value="删除选中文字" data-id="5">
    <input class="btn" type="button" value="倾斜" data-id="6">
    <input class="btn" type="button" value="加粗" data-id="7">
    <input class="btn" type="button" value="下划线" data-id="8">
    <input class="btn" type="button" value="删除线" data-id="9">
    <input class="btn" type="button" value="有序列表" data-id="10">
    <input class="btn" type="button" value="无序列表" data-id="11">
    <input class="btn" type="button" value="设置字体大小" data-id="12">
    <input class="btn" type="button" value="插入超链接" data-id="13">
    <input class="btn" type="button" value="字体背景色" data-id="14">
    <input class="btn" type="button" value="字体颜色" data-id="15">
  </div>
  <iframe id="editor" width="800px" height="500px"></iframe>
  <script type="text/javascript">
    window.onload = function() {
      // 获取按钮的父级元素
      const btnGroup = document.getElementsByClassName('btn-group')[0]
      // 获取 iframe 元素
      const editor = document.getElementById('editor')
      // 获取 iframe 元素的 window 对象
      const editorWindow = editor.contentWindow
      // 获取 iframe 元素的 document 对象
      const editorDocument = editor.contentDocument || editorWindow.document
      // 缓存 execCommand 方法
      const execCommand = editorDocument.execCommand

      // 打开设计模式
      editorDocument.designMode = 'On'
      // 设置元素为可编辑,此时 iframe 框是一个可编辑区域
      editorDocument.contentEditable = true

      // 事件代理,给按钮父级绑定点击事件
      btnGroup.addEventListener('click', handleClick, false)

      function handleClick(event) {
        const e = window.event || event
        const target = e.srcElement || e.target
        const id = Number(target.dataset.id)
        
        switch(id) {
          case 1:
            // 撤销
            editorDocument.execCommand('undo', false, null)
            break
          case 2:
            // 恢复
            editorDocument.execCommand('redo', false, null)
            break
          case 3:
            // 剪切选中文字
            editorDocument.execCommand("Cut", false, null)
            break
          case 4:
            // 复制选中文字
            editorDocument.execCommand("Copy", false, null)
            break
          case 5:
            // 删除选中文字
            editorDocument.execCommand("Delete", false, null)
            break
          case 6:
            // 倾斜
            editorDocument.execCommand("italic", false, null)
            break
          case 7:
            // 加粗
            editorDocument.execCommand("bold", false, null)
            break
          case 8:
            // 下划线
            editorDocument.execCommand("underline", false, null)
            break
          case 9:
            // 删除线
            editorDocument.execCommand("strikeThrough", false, null)
            break
          case 10:
            // 有序列表
            editorDocument.execCommand("insertOrderedList", false, null)
            break
          case 11:
            // 无序列表
            editorDocument.execCommand("insertUnorderedList", false, null)
            break
          case 12:
            // 设置字体大小
            const size = prompt('请输入颜色', '12')
            editorDocument.execCommand("FontSize", false, size)
            break
          case 13:
            // 插入超链接
            const url = prompt('请输入颜色', 'https://www.baidu.com')
            editorDocument.execCommand("CreateLink", false, url)
            break
          case 14:
            // 字体背景色
            const bgColor = prompt('请输入颜色', 'red')
            editorDocument.execCommand("BackColor", false, bgColor)
            break
          case 15:
            // 字体颜色
            const color = prompt('请输入颜色', 'red')
            editorDocument.execCommand("foreColor", false, color)
            break
          default:
            break
        }
      }
    }
  </script>
</body>
</html>

三、execCommand方法支持的命令

  • backColor

    修改文档的背景颜色。在styleWithCss模式下,则只影响容器元素的背景颜色。这需要一个<color>类型的字符串值作为参数传入。注意,IE浏览器用这个设置文字的背景颜色。

  • bold

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

  • ClearAuthenticationCache

    清除缓存中的所有身份验证凭据。

  • contentReadOnly

    通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)

  • copy

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

  • createLink

    将选中内容创建为一个锚链接。这个命令需要一个hrefURI字符串作为参数值传入。URI必须包含至少一个字符,例如一个空格。(浏览器会创建一个空链接)

  • cut

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

  • decreaseFontSize

    给选中文字加上 <small> 标签,或在选中点插入该标签。(IE浏览器不支持)

  • defaultParagraphSeparator

    更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息,请参阅标记生成的差异

  • delete

    删除选中部分.

  • enableAbsolutePositionEditor

    启用或禁用允许移动绝对定位元素的抓取器。Firefox 63 Beta/Dev Edition 默认禁用此功能(bug 1449564)。

  • enableInlineTableEditing

    启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)

  • enableObjectResizing

    启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)

  • fontName

    在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如:"Arial")作为参数。

  • fontSize

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

  • foreColor

    在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。

  • formatBlock

    添加一个HTML块式标签在包含当前选择的行, 如果已经存在了,更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 <H1>

  • forwardDelete

    删除光标所在位置的字符。 和按下删除键一样。

  • heading

    添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)

  • hiliteColor

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

  • increaseFontSize

    在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)

  • indent

    缩进选择或插入点所在的行, 在 Firefox 中, 如果选择多行,但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。

  • insertBrOnReturn

    控制当按下Enter键时,是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)

  • insertHorizontalRule

    在插入点插入一个水平线(删除选中的部分)

  • insertHTML

    在插入点插入一个HTML字符串(删除选中的部分)。需要一个个HTML字符串作为参数。(IE浏览器不支持)

  • insertImage

    在插入点插入一张图片(删除选中的部分)。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)

  • insertOrderedList

    在插入点或者选中文字上创建一个有序列表

  • insertUnorderedList

    在插入点或者选中文字上创建一个无序列表。

  • insertParagraph

    在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)

  • insertText

    在光标插入位置插入文本内容或者覆盖所选的文本内容。

  • italic

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

  • justifyCenter

    对光标插入位置或者所选内容进行文字居中。

  • justifyFull

    对光标插入位置或者所选内容进行文本对齐。

  • justifyLeft

    对光标插入位置或者所选内容进行左对齐。

  • justifyRight

    对光标插入位置或者所选内容进行右对齐。

  • outdent

    对光标插入行或者所选行内容减少缩进量。

  • paste

    在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].

  • redo

    重做被撤销的操作。

  • removeFormat

    对所选内容去除所有格式

  • selectAll

    选中编辑区里的全部内容。

  • strikeThrough

    在光标插入点开启或关闭删除线。

  • subscript

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

  • superscript

    在光标插入点开启或关闭上角标。

  • underline

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

  • undo

    撤销最近执行的命令。

  • unlink

    去除所选的锚链接的<a>标签

  • useCSS

    切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持) 该属性已经废弃,使用 styleWithCSS 代替。

  • styleWithCSS

    用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。

  • AutoUrlDetect

    更改浏览器自动链接行为(仅IE浏览器支持)