html+css+js实现文本编辑器

傷城~ 2024-03-29 15:22 22阅读 0赞

## html+css+js实现文本编辑器 ##

简介：本文讲解，如何制作使用html+css+js实现一个好看的文本编辑器。

**效果展示**  
当文本框聚焦的时候，就是显示textarea，然后是可编辑的，这个时候可以对文本框输入内容。  
![在这里插入图片描述][346bbe74e54f4143b264dbfda0e7f445.png]

当失去文本框焦点的时候，那么就隐藏textarea，显示div,使用div来显示这个文本的内容，更加的专业。  
![在这里插入图片描述][219b45674e734ea184499ab8dca7ed60.png]

### 代码分析 ###

完整的代码：

<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 id='editor1' class='form-control'  contenteditable placeholder="在这里输入内容 英文缩写请用全称"></textarea>
    
        <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();
        }

[346bbe74e54f4143b264dbfda0e7f445.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/ab328152b7574c2282acbeadc29b7ef1.png
[219b45674e734ea184499ab8dca7ed60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2ad7b468dcba4acd84e64d81b5cdf783.png