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 现实diveditor1.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 现实diveditor1.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();}

html+css+js实现文本编辑器相关推荐

js富文本编辑器_自制富文本编辑器
前言介绍一款 markdown富文本编辑器源码 https://gitee.com/pingfanrenbiji/markdown-nice 这里要感谢一些开源作者这位大佬的微信公众号是本地启 ...
Vue/js 富文本编辑器、excel编辑器合集
Vue 富文本编辑器 wangEditor JMEditor vue-quill-editor vue2-editor simditor kindeditor ueditor tinymce cked ...
css+js解决文本两端对齐以及分散对齐
一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式. 这就是传说中的两端对齐还有一种更确切的说法是两端分散对齐. 最开始的时候 ,我试图使用CSS来解决这个小问题, ...
商家后台-商品录入【商品介绍】、富文本编辑器
1.1 需求分析实现商品介绍的录入,要求使用富文本编辑器. 1.2 富文本编辑器介绍富文本编辑器,Rich Text Editor,简称RTE,它提供类似于Microsoft Word 的编辑功能 ...
学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
富文本编辑器KindEditor在前端JS的应用
1.引入KindEditor资源包 2.页面引入Js,Css文件 3.html代码: <tr><td class="left">讲师信息</td> ...
js 免费可靠cdn地址（富文本编辑器tinymce的实践）
推荐一个 cdn源的可靠源地址(免费且持久) https://www.jsdelivr.com/?query=tinymce 有个富文本编辑的需求,要求导入html字符串去生成富文本htm,使用的是r ...
原生JS实现富文本编辑器
富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editor.ueditor等,都是很优秀的富文本编辑器.在我们写网页的时候也会用到它,通常省事的 ...
学习js在线html(富文本)编辑器
你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框.textarea不行,它只能用来输入纯文本,不能显示颜色.斜体之类的文字样式,就像记事本.你可 ...

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

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

代码分析

难点分析

html+css+js实现文本编辑器相关推荐

最新文章

热门文章