原生API编写简单富文本编辑器001
系列文章快速阅读：
富文本编辑器开发系列-1-基础概念
富文本编辑器开发系列2-document.execCommand 的API
富文本编辑器开发系列3-selection
富文本编辑器开发系列4——Range对象
富文本编辑器开发系列5——浏览器Selection API探究
富文本编辑器开发系列6——Range API探究
富文本编辑器开发系列7——textRange对象详解
富文本编辑器开发系列8——常用DOM API
原生API编写简单富文本编辑器001
原生API编写简单富文本编辑器002
原生API编写简单富文本编辑器003
原生API编写简单富文本编辑器004
原生API编写简单富文本编辑器005
从这一节开始，我们将亲自动手，使用我们之前介绍过的浏览器原生API来实现一个简单的可以处理文本的富文本编辑器。
1. 设计
这一个简单版的编辑器，由于我们是基于原生的API，基于浏览器原生API的能力，我们将实现以下功能：
文字输入
文字格式调整
加粗斜体下划线删除线前景色背景色改变字号改变字体上角标下角标
段落格式调整
清除格式首行缩进段落居左对齐段落居右对齐段落居中对齐段落两端对齐插入有序列表插入无序列表
其它
插入超链接取消超链接插入网络图片拷贝剪切撤销重做
2. 图标准备
通常，当用户使用富文本编辑器时，都希望点击一个按钮来实现某种功能，而传统的按钮太过丑陋，所以我们为其准备一个按钮图标。
这里，我们使用上提供的免费图标。
我们可以进入iconfont 官网，登陆后，新建一个项目：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktRo8kIW-1670512094428)(/hjb2722404/tuchuang/raw/master/img/03101510248.png)]
然后根据功能设计，将免费图标先添加到购物车，再导入到项目中：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKddQ9G2-1670512094431)(/hjb2722404/tuchuang/raw/master/img/03101518863.png)]
3. 编写界面
3.1 初始结构
├── index.html└── static├── css│ ├── iconfont│ │ ├── demo.css│ │ ├── demo_index.html│ │ ├── iconfont.css│ │ ├── iconfont.js│ │ ├── iconfont.json│ │ ├── iconfont.svg│ │ ├── iconfont.ttf│ │ ├── iconfont.woff│ │ └── iconfont.woff2│ └── index.css└── js|——index.js
3.2 html结构：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./static/css/index.css"><link rel="stylesheet" href="./static/css/iconfont/iconfont.css"><script src="./static/css/iconfont/iconfont.js"></script></head><body><div class="editor-box"><div class="editor"><div id="editorBar" class="editor-toolbar"><ul><li command="undo"><i class="iconfont icon-chexiao" title="撤销"></i></li><li command="redo"><i class="iconfont icon-zhongzuo" title="重做"></i></li><li command="copy"><i class="iconfont icon-fuzhi" title="复制"></i></li><li command="cut"><i class="iconfont icon-jianqie" title="剪切"></i></li><li command="fontName"><i class="iconfont icon-ziti" title="字体"></i></li><li command="fontSize"><i class="iconfont icon-zihao" title="字号"></i></li><li command="Bold"><i class="iconfont icon-zitijiacu" title="加粗"></i></li><li command="italic"><i class="iconfont icon-zitixieti" title="斜体"></i></li><li command="underline"><i class="iconfont icon-zitixiahuaxian" title="下划线"></i></li><li command="strikeThrough"><i class="iconfont icon-zitishanchuxian" title="删除线"></i></li><li command="superscript"><i class="iconfont icon-zitishangbiao" title="上标"></i></li><li command="subscript"><i class="iconfont icon-zitixiabiao" title="下标"></i></li><li command="fontColor"><i class="iconfont icon-qianjingse" title="字体颜色"></i></li><li command="backColor"><i class="iconfont icon-zitibeijingse" title="字体背景色"></i></li><li command="removeFormat"><i class="iconfont icon-qingchugeshi" title="清除格式"></i></li><li command="insertOrderedList"><i class="iconfont icon-youxuliebiao" title="有序列表"></i></li><li command="insertUnorderedList"><i class="iconfont icon-wuxuliebiao" title="无序列表"></i></li><li command="justifyLeft"><i class="iconfont icon-juzuoduiqi" title="局左对齐"></i></li><li command="justifyRight"><i class="iconfont icon-juyouduiqi" title="居右对齐"></i></li><li command="justifyCenter"><i class="iconfont icon-juzhongduiqi" title="居中对齐"></i></li><li command="justifyFull"><i class="iconfont icon-liangduanduiqi" title="两端对齐"></i></li><li command="createLink"><i class="iconfont icon-charulianjie" title="插入链接"></i></li><li command="unlink"><i class="iconfont icon-quxiaolianjie" title="取消链接"></i></li><li command="indent"><i class="iconfont icon-shouhangsuojin" title="首行缩进"></i></li><li command="insertImage"><i class="iconfont icon-tupian" title="插入图片"></i></li></ul></div><div id="editor-content" class="editor-content" contenteditable></div></div></div></body><script src="./static/js/index.js"></script></html>
注意：
我们这里为每一个按钮所在
li元素添加了command属性，这个属性就是当点击该按钮时需要传递给
document.execCommand(command);命令的命令名称参数。
3.3 css
.editor-box {width: 960px;margin: auto;}.editor {width: 100%;margin-top: 50px;height: 600px;border: 1px solid #ccc;}.editor-toolbar {width: 100%;border-bottom: 1px dotted #555;}.editor-toolbar ul {list-style: none;}.editor-toolbar ul li {width: 20px;height: 20px;line-height: 20px;display: inline-block;cursor: pointer;margin-left: 10px;}.editor-toolbar ul li .iconfont {font-size: 16px;}.editor-content {margin-top: 20px;height: 500px;overflow: auto;padding: 0 25px;}
3.4 界面效果
好了，我们写好了界面，下一节，我们将实现编辑器功能。
本系列文章代码可从gitee获取
（本节内容对应代码可在1.0.1分支找到）
