原生API编写简单富文本编辑器001

从这一节开始，我们将亲自动手，使用我们之前介绍过的浏览器原生API来实现一个简单的可以处理文本的富文本编辑器。

1. 设计

这一个简单版的编辑器，由于我们是基于原生的API，基于浏览器原生API的能力，我们将实现以下功能：

  • 文字输入
  • 文字格式调整
    • 加粗
    • 斜体
    • 下划线
    • 删除线
    • 前景色
    • 背景色
    • 改变字号
    • 改变字体
    • 上角标
    • 下角标
  • 段落格式调整
    • 清除格式
    • 首行缩进
    • 段落居左对齐
    • 段落居右对齐
    • 段落居中对齐
    • 段落两端对齐
    • 插入有序列表
    • 插入无序列表
  • 其它
    • 插入超链接
    • 取消超链接
    • 插入网络图片
    • 拷贝
    • 剪切
    • 撤销
    • 重做

2. 图标准备

通常，当用户使用富文本编辑器时，都希望点击一个按钮来实现某种功能，而传统的按钮太过丑陋，所以我们为其准备一个按钮图标。

这里，我们使用iconfont.cn 上提供的免费图标。

我们可以进入iconfont 官网，登陆后，新建一个项目：

富文本编辑器开发系列9——原生API编写简单富文本编辑器001 - 图1

然后根据功能设计，将免费图标先添加到购物车，再导入到项目中：

富文本编辑器开发系列9——原生API编写简单富文本编辑器001 - 图2

3. 编写界面

3.1 初始结构

  2.  ├── index.html
  3.  └── static
  4.      ├── css
  5.      │   ├── iconfont
  6.      │   │   ├── demo.css
  7.      │   │   ├── demo_index.html
  8.      │   │   ├── iconfont.css
  9.      │   │   ├── iconfont.js
  10.      │   │   ├── iconfont.json
  11.      │   │   ├── iconfont.svg
  12.      │   │   ├── iconfont.ttf
  13.      │   │   ├── iconfont.woff
  14.      │   │   └── iconfont.woff2
  15.      │   └── index.css
  16.      └── js
  17.           |——index.js

3.2 html结构：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./static/css/index.css">
  9.     <link rel="stylesheet" href="./static/css/iconfont/iconfont.css">
  10.     <script src="./static/css/iconfont/iconfont.js"></script>
  11. </head>
  12. <body>
  13.     <div class="editor-box">
  14.         <div class="editor">
  15.             <div id="editorBar" class="editor-toolbar">
  16.                 <ul>
  17.                     <li command="undo"><i class="iconfont icon-chexiao" title="撤销"></i></li>
  18.                     <li command="redo"><i class="iconfont icon-zhongzuo" title="重做"></i></li>
  19.                     <li command="copy"><i class="iconfont icon-fuzhi" title="复制"></i></li>
  20.                     <li command="cut"><i class="iconfont icon-jianqie" title="剪切"></i></li>
  21.                     <li command="fontName"><i class="iconfont icon-ziti" title="字体"></i></li>
  22.                     <li command="fontSize"><i class="iconfont icon-zihao" title="字号"></i></li>
  23.                     <li command="Bold"><i class="iconfont icon-zitijiacu" title="加粗"></i></li>
  24.                     <li command="italic"><i class="iconfont icon-zitixieti" title="斜体"></i></li>
  25.                     <li command="underline"><i class="iconfont icon-zitixiahuaxian" title="下划线"></i></li>
  26.                     <li command="strikeThrough"><i class="iconfont icon-zitishanchuxian" title="删除线"></i></li>
  27.                     <li command="superscript"><i class="iconfont icon-zitishangbiao" title="上标"></i></li>
  28.                     <li command="subscript"><i class="iconfont icon-zitixiabiao" title="下标"></i></li>
  29.                     <li command="fontColor"><i class="iconfont icon-qianjingse" title="字体颜色"></i></li>
  30.                     <li command="backColor"><i class="iconfont icon-zitibeijingse" title="字体背景色"></i></li>
  31.                     <li command="removeFormat"><i class="iconfont icon-qingchugeshi" title="清除格式"></i></li>
  32.                     <li command="insertOrderedList"><i class="iconfont icon-youxuliebiao" title="有序列表"></i></li>
  33.                     <li command="insertUnorderedList"><i class="iconfont icon-wuxuliebiao" title="无序列表"></i></li>
  34.                     <li command="justifyLeft"><i class="iconfont icon-juzuoduiqi" title="局左对齐"></i></li>
  35.                     <li command="justifyRight"><i class="iconfont icon-juyouduiqi" title="居右对齐"></i></li>
  36.                     <li command="justifyCenter"><i class="iconfont icon-juzhongduiqi" title="居中对齐"></i></li>
  37.                     <li command="justifyFull"><i class="iconfont icon-liangduanduiqi" title="两端对齐"></i></li>
  38.                     <li command="createLink"><i class="iconfont icon-charulianjie" title="插入链接"></i></li>
  39.                     <li command="unlink"><i class="iconfont icon-quxiaolianjie" title="取消链接"></i></li>
  40.                     <li command="indent"><i class="iconfont icon-shouhangsuojin" title="首行缩进"></i></li>
  41.                     <li command="insertImage"><i class="iconfont icon-tupian" title="插入图片"></i></li>
  42.                 </ul>
  43.             </div>
  44.             <div id="editor-content" class="editor-content" contenteditable></div>
  45.         </div>
  46.     </div>
  47. </body>
  48. <script src="./static/js/index.js"></script>
  49. </html>

注意：

我们这里为每一个按钮所在 li 元素添加了command 属性，这个属性就是当点击该按钮时需要传递给

document.execCommand(command); 命令的命令名称参数。

3.3 css

  1. .editor-box {
  2.     width: 960px;
  3.     margin: auto;
  4. }
  6. .editor {
  7.     width: 100%;
  8.     margin-top: 50px;
  9.     height: 600px;
  10.     border: 1px solid #ccc;
  11. }
  13. .editor-toolbar {
  14.     width: 100%;
  15.     border-bottom: 1px dotted #555;
  16. }
  18. .editor-toolbar ul {
  19.     list-style: none;
  20. }
  22. .editor-toolbar ul li {
  23.     width: 20px;
  24.     height: 20px;
  25.     line-height: 20px;
  26.     display: inline-block;
  27.     cursor: pointer;
  28.     margin-left: 10px;
  29. }
  30. .editor-toolbar ul li .iconfont {
  31.     font-size: 16px;
  32. }
  33. .editor-content {
  34.     margin-top: 20px;
  35.     height: 500px;
  36.     overflow: auto;
  37.     padding: 0 25px;
  38. }

3.4 界面效果

富文本编辑器开发系列9——原生API编写简单富文本编辑器001 - 图3

好了，我们写好了界面，下一节，我们将实现编辑器功能。

（本节内容对应代码可在1.0.1 分支找到）