javascript 简单的WYSYWYG编辑器(单击按钮取消选择所选内容)

hrirmatl 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(95)

function getSelectionText() {
    let text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

jQuery("#h").click(function() {
    let selection = getSelectionText();
    selection = "<p class='n-h8'>" + selection + "</p>"
});

<p>
        <span id="h" class="button tag">H</span>
</p>

<textarea></textarea>

我正在尝试创建一个所见即所得的编辑器。我想在文本区输入一些文本。然后用鼠标选择其中的一部分。然后点击“h”按钮。
所选文本将以〈
示例：如果我选择了
"Lorem Ipsum是什么？"
然后点击“H”按钮后，我将得到：

<p class='n-h8'>What is Lorem Ipsum?</p>

嗯，我甚至没有得到选定的文本。只要我点击我的按钮，文本不再被选中，因为我已经点击了按钮，因此没有文本被选中了。
你能帮助我理解如何使用JavaScript组织这样的WYSYWYG按钮吗？

JavaScript

来源：https://stackoverflow.com/questions/75751916/simple-wysywyg-editor-clicking-a-button-unselects-what-was-selected

1条答案

按热度按时间

ifsvaxew1#

let selection = '';
    // function getSelectionText() {
    //     let text = "";
    //     if (window.getSelection) {
    //         text = window.getSelection().toString();
    //     } else if (document.selection && document.selection.type != "Control") {
    //         text = document.selection.createRange().text;
    //     }
    //     return text;
    // }

    $("#h").click(function () {
        this.innerHTML = selection;
    });

    function onMouseUp(e) {
        const activeTextarea = document.activeElement;
        selection = activeTextarea.value.substring(
            activeTextarea.selectionStart, activeTextarea.selectionEnd
        );
    }

    const textarea = document.querySelector('textarea');
    textarea.addEventListener('mouseup', onMouseUp, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Static Template</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
    crossorigin="anonymous"></script>

<body>
    <p id="text-container">
        <span id="h" class="button tag">H</span>
    </p>

    <textarea></textarea>
</body>

</html>

此问题可能特定于浏览器。有关详细信息和解决方案，请参阅W3C或MDN documentation。

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 简单的WYSYWYG编辑器(单击按钮取消选择所选内容)

1条答案

相关问题

热门标签

最新问答