只使用jQuery实现简单功能富文本编辑器

最新推荐文章于 2025-08-17 14:11:16 发布

原创最新推荐文章于 2025-08-17 14:11:16 发布 · 3k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #js

本文探讨了使用jQuery实现富文本编辑器的初步想法与设计。从理解富文本编辑器的基本需求出发，讨论了利用contenteditable属性简化编辑器实现的过程。介绍了通过document.execCommand方法控制文本样式，包括字体、颜色、列表等，展示了如何结合HTML和jQuery构建基本的编辑功能。

初步想法

最开始的时候对富文本是完全没什么了解的,怎么实现的也不是很清楚,感觉可能就是个文本域编辑带个样式?但是在想做这个东西的时候仔细想,却发现挺多问题或者说难点的.

首先肯定不是一个简单的文本域这样做的,因为要实现各种样式的功能,文本域好像只能全局设置样式,没法分段落设置样式,

在使用元素查看器查看现有的各类编辑器后发现,输入或者说其他操作内容,都是实时改变在dom元素中的,而且最大的dom就是看起来像是文本域的一个div,这时其实是比较懵比的,因为很多事件或者说操作的实现完全不能理解,比如说光标定位,文字输入.

不过呢,因为我本人是全栈开发,而且是以后端入门的,在对一些问题进行抽象后,简单的设计就有,虽然对于具体实现还有问题没有搞明白.但是对问题进行拆分后,至少有了每一步要实现的方向,自我感觉可以开始了.

简单设计

第一版

菜单一个div,编辑区域一个div,编辑区域绑定click事件,进行是否在编辑状态的切换(模拟焦点),

这个最开始的思路,但是在进一步思考时就遇到了第一个问题,光标对象是怎样来的,如何实现input一样的输入操作?

突如其来的完结

在第一版设计时发现光标定位和输入操作用我本人已知的方法来实现,会显得特别麻烦,所以进行了百度,没想到居然居然有这样一个标签属性"contenteditable",标签节点可编辑属性,此属性设置为true时,其下节点会自然呈现出一种类似于文本域一样的空间提供编辑操作,光标定位,选择范围等功能自带实现(光标和选择范围在实现方式是一样的,都是范围,只不过光兵是起点和终点相同的特殊范围),提供了丰富的操作命令.

// document.execCommand(命令名称，是否展示用户界面，命令需要的额外参数)
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

所有操作都基于一个方法执行,执行此方法时不需要考虑选择范围参数,方法实现内部自己去选取了该参数

一个超简易的实现

<script>
    $(function () {
        $('.text').text("2222222");
    })

    function execute(cmd, args = null) {
        document.execCommand(cmd, false, args)
    }

    function HExecute(className, cmd) {
        let H = $(className).val();
        // execute('heading', H);
        execute(cmd, H);
    }
</script>

<div class="body">
    <div class="menun">
        <span><button onclick="execute('bold')"><b>B</b></button></span>
        <span>
            <select class="H-select" onchange="HExecute('.H-select','formatBlock')">
                <option>H1</option>
                <option>H2</option>
                <option>H3</option>
                <option>H4</option>
            </select>
        </span>
        <span>
            <select class="C-select" onchange="HExecute('.C-select','foreColor')">
                <option value="red">红</option>
                <option value="black">黑</option>
                <option value="blue">蓝</option>
                <option value="white">白</option>
            </select>
        </span>
        <span>
            <select class="S-select" onchange="HExecute('.S-select','fontSize')">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
            </select>
        </span>
    </div>
    <div class="text" contenteditable="true">

    </div>
</div>

在这里插入图片描述

提供的命令

backColor:

修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个类型的字符串值作为参数传入。注意，IE浏览器用这个设置文字的背景颜色。

bold:

开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用标签，而不是标签。

ClearAuthenticationCache:

清除缓存中的所有身份验证凭据。

contentReadOnly:

通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)

copy:

拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

createLink:

将选中内容创建为一个锚链接。这个命令需要一个hrefURI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）

cut:

剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

decreaseFontSize:

给选中文字加上标签，或在选中点插入该标签。(IE浏览器不支持)

defaultParagraphSeparator:

更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。

delete:

删除选中部分.

enableAbsolutePositionEditor:

启用或禁用允许移动绝对定位元素的抓取器。Firefox 63 Beta/Dev Edition 默认禁用此功能(bug 1449564)。

enableInlineTableEditing:

启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)

enableObjectResizing:

启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)

fontName:

在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如：“Arial”)作为参数。

foreColor:

在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。

formatBlock:

添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. “H1”, “P”, “DL”, “BLOCKQUOTE”). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 “