一文入门富文本编辑器

最新推荐文章于 2024-01-17 20:44:16 发布

may_walkaway

最新推荐文章于 2024-01-17 20:44:16 发布

阅读量568

点赞数

本文链接：https://blog.csdn.net/sinat_27535209/article/details/104053520

版权

本文介绍如何从零开始实现一个简易的富文本编辑器，讲解了富文本编辑器的基本概念、基本使用方法，包括命令式操作、文本范围与选区的处理。通过理解并运用Document.execCommand、Selection和Range对象，实现富文本编辑器的常见功能，如文本加粗、颜色设置等，并探讨了富文本粘贴时格式过滤的处理逻辑。

摘要由CSDN通过智能技术生成

简介

富文本编辑器，能够使web页面像word一样，实现对文本的编辑，通常应用在一些文本处理比较多的系统中。现在业界有很多成熟的富文本编辑器，比如功能齐全啊TinyMCE、轻量高效的wangEditor、百度出品的UEditor等。富文本编辑器很多，但是却很少思考如何从零开始，实现一个富文本编辑器。本文主要简述如何从零开始，实现一个简易的富文本编辑器。

基本使用

普通的HTML标签，能够输入的通常只是表单，表单输入的是纯文本，不带格式的内容。富文本相对于表单，能够给输入文本内容增加一些自定义内容样式，比如加粗、字体颜色、背景...。富文本的实现，主要是给HTML标签，比如div增加一个contenteditable属性，拥有该属性的HTML标签，就能够对该标签里的内容，实现自定义的编辑。最简单的富文本编辑器如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     
</head>
<body>
    <div id="app" style="width: 200px;height: 200px;background-color: antiquewhite;" contenteditable='true'></div>
</body>
</html>