jQuery实现 富文本编辑器

<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>复制

<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>复制

什么是contentEditable属性？

HTML5中的contentEditable属性允许用户编辑元素的内容，包括文字、图像等。当将contentEditable属性设置为true时，用户可以直接在网页中编辑内容，在用户输入或选择时，浏览器会将相应的HTML代码生成或更新。

使用jQuery处理contentEditable

使用jQuery处理contentEditable属性非常简单。我们可以使用.attr()方法来获取或设置元素的contentEditable属性。

// 获取元素的contentEditable属性
var contentEditable = ("#myElement").attr("contenteditable");
console.log(contentEditable);
 
// 设置元素的contentEditable属性("#myElement").attr("contenteditable", "true");复制

我们还可以使用.on()方法来监听元素的输入事件。

// 监听元素的输入事件
$("#myElement").on("input", function() {
  // 处理输入事件的代码
});复制

操作contentEditable元素的内容

使用jQuery，我们可以方便地操作contentEditable元素的内容。例如，我们可以使用.html()方法来获取或设置元素的HTML内容。

// 获取元素的HTML内容
var htmlContent = ("#myElement").html();
console.log(htmlContent);
 
// 设置元素的HTML内容("#myElement").html("<p>Hello, world!</p>");复制

我们还可以使用.text()方法来获取或设置元素的纯文本内容。

// 获取元素的纯文本内容
var textContent = ("#myElement").text();
console.log(textContent);
 
// 设置元素的纯文本内容("#myElement").text("Hello, world!");复制

高级功能和交互效果

使用jQuery处理contentEditable属性，我们可以实现更多的高级功能和交互效果。以下是一些示例：

我们可以使用输入事件监听用户的实时输入，并将输入内容即时显示在另一个元素中。

$("#myElement").on("input", function() {
  var inputContent = $(this).html();
  $("#previewElement").html(inputContent);
});复制

我们可以使用contentEditable属性和一些插件来实现一个简单的富文本编辑器。

$("#myEditor").attr("contenteditable", "true");复制

操作选中文本

使用jQuery，我们可以轻松地操作用户选中的文本。以下是一些示例：

// 获取选中的文本
var selectedText = window.getSelection().toString();
console.log(selectedText);
 
// 在选中文本周围插入标签
document.execCommand("wrapSelection", false, "<b>");
 
// 清除选中的文本样式
document.execCommand("removeFormat", false, null);复制

总结

通过本文，我们了解了如何使用jQuery处理HTML5的contentEditable属性。我们可以使用.attr()方法获取或设置元素的contentEditable属性，使用.on()方法监听输入事件。我们还学习了如何操作contentEditable元素的内容，以及如何实现一些高级功能和交互效果。希望这些知识对您有所帮助，让您更好地利用jQuery处理HTML5中的contentEditable。

原文链接：https://blog.csdn.net/qq_32845305/article/details/106443014