富文本框编辑器原理

最新推荐文章于 2025-06-20 09:40:24 发布

曼～

最新推荐文章于 2025-06-20 09:40:24 发布

阅读量523

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签：富文本框编辑器

本文链接：https://blog.youkuaiyun.com/Mary_wmt/article/details/94435475

基础专栏收录该内容

6 篇文章

订阅专栏

本文探讨了富文本框编辑器的工作原理，包括利用`contenteditable`属性和`document.execCommand()`方法来实现文本编辑功能。`contenteditable`允许元素可编辑，而`execCommand()`则用于执行各种编辑命令，如加粗、设置颜色等。通过代码演示，展示了如何在div中创建一个可编辑并可操作文字的编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

富文本框编辑器原理

文章目录

富文本框编辑器原理

contenteditable：

1.枚举属性
2.全局属性

document.execCommand()

1.设计模式下，允许允许命令，操纵可编辑内容区域的元素
2.三个参数（ aCommandName, aShowDefaultUI, aValueArgument）
3.命令 bold，foreColor，backColor。。。。

代码演示

在div中输入文字，div中的文字选中后可以进行操作

<!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>富文本框编辑器原理</title>
    <style>
        /* 居中样式设置 */
        body {
            display: flex;
            justify-content: center;
        }

        div {
            margin-top: 50px;
            width: 600px;
            height: 500px;
            border: 1px solid;
            text-align: center;
        }

        button {
            border: 0;
            background: #9966cc;
            color: #ffffff;
            width: 100px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div contenteditable>
        <p>使用 contenteditable枚举属性，表示元素能否被用户编辑</p>
        <p>
            <button onclick="bold()">加粗</button>
            <button onclick="bigger()">加大</button>
            <button onclick="changeColor()">变色</button>
        </p>
        [外链图片转存失败(img-GAgGZArF-1562038612713)(http://img5.imgtn.bdimg.com/it/u=8685675,2171717858&fm=26&gp=0.jpg)]
    </div>



    <script>
        function bold() {
            document.execCommand('bold')
        }

        function bigger() {
            document.execCommand('fontSize', null, '7')
        }

        function changeColor() {
            document.execCommand('foreColor', null, 'pink')
        }
    </script>
</body>

</html>