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

hjb2722404

已于 2022-12-09 14:12:41 修改

阅读量850

点赞数

分类专栏：前端编辑器探究文章标签： html 前端 javascript

于 2022-12-08 23:13:35 首次发布

本文链接：https://blog.youkuaiyun.com/hjb2722404/article/details/128245327

版权

前端编辑器探究专栏收录该内容

13 篇文章

订阅专栏

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

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

1. 设计

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

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

2. 图标准备

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktRo8kIW-1670512094428)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/202203101510248.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKddQ9G2-1670512094431)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/202203101518863.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;
}