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

极客李华

已于 2023-09-14 09:01:57 修改

阅读量1.4k

点赞数 2

分类专栏： JS学习之旅文章标签： javascript html css

于 2023-01-14 17:17:06 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128686946

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

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();
    }