<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