用纯js实现一个文本编辑器
2024-09-21 21:17:18
效果图
代码
<!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>Document</title>
<style>
.editButtons span{
display:inline-block;
white-space:nowrap;
}
[data-edit] {
float:left;
border:0;
font: 12px/1 monospace;
background:#ddd;
padding:4px 8px;
}
[contenteditable] {
padding:4px 16px;
background:#eee;
}
</style>
</head>
<body>
<div class="editButtons">
<span title="STYLES">
<!-- 加粗 -->
<button data-edit="bold"><b>B</b></button>
<!-- 斜体 -->
<button data-edit="italic"><i>I</i></button>
<!-- 下划线 -->
<button data-edit="underline"><u>U</u></button>
<!-- 中划线 -->
<button data-edit="strikeThrough"><s>S</s></button>
</span>
<span title="TEXT FORMAT">
<!-- 字体标签设置 -->
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="formatBlock:H2">H2</button>
<button data-edit="formatBlock:H3">H3</button>
</span>
<span title="FONT SIZE">
<!-- 字体大小设置 -->
<button data-edit="fontSize:1">s</button>
<button data-edit="fontSize:3">M</button>
<button data-edit="fontSize:5">L</button>
</span>
<span title="LISTS">
<!-- 列表格式设置 -->
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="insertOrderedList">OL</button>
</span>
<span title="ALIGNMENT">
<!-- 文本对齐设置 -->
<button data-edit="justifyLeft">⇤</button>
<button data-edit="justifyCenter">↔</button>
<button data-edit="justifyRight">⇥</button>
</span>
<span title="CLEAR FORMATTING">
<!-- 清除文本 -->
<button data-edit="removeFormat">×</button>
</span>
<span title="COPY">
<!-- 复制选中文本 -->
<button data-edit="copy">C</button>
</span>
</div>
<div contenteditable id="textbox">
<p>文本编辑器</p>
</div>
</body>
<script>
document.querySelectorAll("[data-edit]").forEach(btn =>
btn.addEventListener("click", function (ev) {
ev.preventDefault();
console.log(this.getAttribute("data-edit"))
const cmd_val = this.getAttribute("data-edit").split(":");
if(cmd_val[0] == 'copy'){ // 复制选中的文本
document.execCommand(cmd_val[0]);
}else{
document.execCommand(cmd_val[0], false, cmd_val[1]);
}
})
);
</script>
</html>
最新文章
- C#开发微信门户及应用(10)--在管理系统中同步微信用户分组信息
- MYSQL 5.0 USING BTREE 错误
- mysql python image 图像存储读取
- php抽象工厂模式的研究
- java的InputStream和OutputStream的理解【转】
- oracle表中某个字段含有字符回车、空格的手动修改方式
- Knockout.Js官网学习（event绑定、submit绑定）
- 什么是Intent(意图)
- cocoa pods出现的错误
- Devpexpress 打印预览问题
- UVA 11324 - The Largest Clique（强连通分量+缩点)
- Design Pattern——开放封闭原则
- java多线程之守护线程以及Join方法
- JAVA实用案例之文件导出（JasperReport踩坑实录）
- java String转int int转化为String
- js惰性函数
- Java连接并操作SQLServer数据库
- [openjudge-搜索]城堡问题(The Castle)
- 【题解】Luogu P2730 魔板
- Verilog中的$display和$write任务