只使用jQuery实现简单功能富文本编辑器[关于selection和range的进一步理解运用]

目的

在上一篇文章中简单实现了一个文本编辑的功能,但是仅仅只是使用了自带的命令进行操作,基本上是没有其他更深入的运用,所以在此基础上,想通过一些简单的操作来稍微深入的使用一下富文本操作中的selection和range对象.

功能要求

1. 在编辑区域输入一些文字，例如“12345”
2. 选中几个字，例如选中“234”
3. 鼠标点击页面空白处，即非编辑区域
4. 点击“B”加粗按钮

按照上一篇文章的简易实现会发现,想要的加粗功能并没有实现,这是因为点击其他空白处所选区域已经被清除了,之前也有简单提到过selection和range对象,因为只使用了命令操作,所以选中区域等全部都是在其方法内部自动读取的当前选中区域对象,而按照上述步骤操作,会清除所选区域,因此无法实现加粗.

思路

简单根据执行步骤来看,很明显,只需要实现一个在清除所选区域前,使用一个自定义变量记录所选区域即可.

一阶段

既然提供了selection和range这样的对象,那么是否有提供值的变化这种的事件呢?
百度一翻后,并没法发现这样的内容,但是却发现了一个不错的api网站,MDN
这个网站内有非常详细的web API.

二阶段

既然selection本身自己没有监听方法,那就只有看看selection本身是在什么dom事件后值是改变了的.按照个人习惯,只在需要时进行操作,最初使用onblur事件,发现onblur时,selection的值已经被清除了,不能使用,因此选择使用onmouseup事件进行操作.

	//selection记录
	function selectChange() {
        // selection = window.getSelection().getRangeAt(0);
        range = window.getSelection().getRangeAt(0);
    }
    //方法执行
    function execute(cmd, args = null) {
        var s = window.getSelection();
        if (s.isCollapsed && cmd === "bold" && !range.collapsed) {
            if (s.rangeCount > 0) s.removeAllRanges();//必须清除,否则add并没有效果(因为本次涉及内容仍然比较浅显,所以不准备深究此原因)
            s.addRange(range);
        }
        document.execCommand(cmd, false, args)
    }

<div class="text" contenteditable="true" onmouseup="selectChange()">

    </div>

更新后的全部代码

<script src="./jQuery.js"></script>
<script>

    var selection;
    var range;

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

    function execute(cmd, args = null) {
        var s = window.getSelection();
        if (s.isCollapsed && cmd === "bold" && !range.collapsed) {
            if (s.rangeCount > 0) s.removeAllRanges();
            s.addRange(range);
        }
        document.execCommand(cmd, false, args)
    }

    function HExecute(className, cmd) {
        let H = $(className).val();
        execute(cmd, H);
    }

    function selectChange() {
        // selection = window.getSelection().getRangeAt(0);
        range = window.getSelection().getRangeAt(0);
    }

</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" onmouseup="selectChange()">

    </div>
</div>

<style>
    .text {
        border: solid 1px black;
        width: 800px;
        height: 500px;
    }

    .menun {
        border: solid 1px black;
        width: 800px;
        height: 30px;
    }
</style>