html+css+js实现文本编辑器
简介：本文讲解，如何制作使用html+css+js实现一个好看的文本编辑器。
效果展示
当文本框聚焦的时候，就是显示textarea，然后是可编辑的，这个时候可以对文本框输入内容。
当失去文本框焦点的时候，那么就隐藏textarea，显示div,使用div来显示这个文本的内容，更加的专业。
代码分析
完整的代码：
<html lang="en"> <head> <meta charset="UTF-8"> <title>作文编辑器G</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <style> body{ padding: 100px 200px; } .form-control{ min-height:500px; margin: 30px; border-color: skyblue; } #editor1 { height: 500px; display: inline-block; } #editor2 { display: none; } </style> </head> <body> <div id="editparent"> <!-- 编辑器控制按钮 --> <div id='editControls' style='text-align:center; padding:5px;'> <h1>作文编辑器</h1> </div> <!-- 编辑器可输入内容处 --> <!-- textarea负责文本内容的编辑--> <textarea id='editor1' class='form-control' contenteditable placeholder="在这里输入内容 英文缩写请用全称"></textarea> <!-- div负责文本内容的显示--> <div id="editor2" class='form-control' contenteditable > <h3></h3> </div> </div> <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script> <script> // 默认文本聚焦的 var editor1 =document.getElementById("editor1"); editor1.focus(); var editor2 =document.getElementById("editor2"); var text1 = editor1.value; var text2 = editor2.value; // 当textarea失去焦点的时候 隐藏textarea 现实div editor1.onblur = function (){ editor1.style.display = 'none'; editor2.style.display = 'inline-block'; editor2.innerHTML = "<h3>" + editor1.value + "</h3>"; } // 当div获取焦点的时候 那么就隐藏div 显示textarea启动编辑功能 editor2.onfocus = function (){ editor1.style.display = ''; editor2.style.display = "none"; editor1.focus(); } console.log(text2) </script> </body> </html>
难点分析
- 首先是，如何让这个div的高度根据内容自适应，这里就需要用到min-height这个属性，这个属性就是给这个div盒子指定一个默认的最小大小，当这个大小大过这个最小值的时候，那么就高度根据内容自适应。
- 第二个难点就是聚焦和失去焦点的问题，这里就要好好的看一下我的js部分是怎么处理的，其实原理并不困难，先默认div隐藏，textarea获得焦点，然后了当div获得焦点的时候，textarea隐藏，当div失去焦点的时候，textarea显示，并且获取焦点。
- 第三个地方就是设置，当textarea失去焦点的时候把内容同步到div中去。
// 当textarea失去焦点的时候 隐藏textarea 现实div editor1.onblur = function (){ editor1.style.display = 'none'; editor2.style.display = 'inline-block'; editor2.innerHTML = "<h3>" + editor1.value + "</h3>"; } // 当div获取焦点的时候 那么就隐藏div 显示textarea启动编辑功能 editor2.onfocus = function (){ editor1.style.display = ''; editor2.style.display = "none"; editor1.focus(); }
