Discuz 是一个流行的论坛软件，它具有一个非常好用的文本编辑器，用户可以在其中输入格式化文本并上传图片和视频。如果你正在开发一个类似于 Discuz 的网站，并希望实现类似的文本编辑器功能，那么你可以使用 JavaScript 在网页中创建一个弹出层，让用户在其中编辑他们的内容。
实现方法概述
我们将通过以下步骤来实现这个效果：
- 创建一个包含所有必要元素的 HTML 结构
- 使用 CSS 样式来隐藏弹出层
- 使用 JavaScript 添加事件监听器
- 显示或隐藏弹出层
HTML 结构
以下是我们需要的 HTML 元素：
<div class="editor-container"> <textarea id="editor"></textarea> <div id="toolbar"> <button class="btn">Bold</button> <button class="btn">Italic</button> <button class="btn">Underline</button> </div> </div>
其中，#editor 是一个 textarea 输入框，用户可以在其中输入文本。#toolbar 包含了一些按钮，用于添加粗体、斜体、下划线等格式。
CSS 样式
我们需要使用 CSS 样式将弹出层隐藏起来：
-- -------------------- ---- ------- ----------------- - --------- --------- - -------- - -------- ----- --------- --------- ---- ----- ----- -- -------- -- ----------------- ----- ------- --- ----- ----- -------- ---- - -------- ---- - ------------- ---- -展开代码
这里我们使用 position 属性将工具栏相对于输入框进行定位，同时使用 display: none 来隐藏它。当用户点击输入框时，我们将用 JavaScript 显示工具栏。
JavaScript 代码
我们需要为文本输入框添加一个 click 事件监听器来显示工具栏：
const editor = document.querySelector('#editor'); const toolbar = document.querySelector('#toolbar'); editor.addEventListener('click', () => { toolbar.style.display = 'block'; });
当用户在输入框中点击时，我们将设置工具栏的 display 样式为 block，从而让它显示出来。
我们还可以添加其他事件监听器来实现更复杂的功能，比如在用户选择一段文本时自动加粗、斜体或下划线等。
完整示例代码
以下是完整的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------------- ------- ----------------- - --------- --------- - -------- - -------- ----- --------- --------- ---- ----- ----- -- -------- -- ----------------- ----- ------- --- ----- ----- -------- ---- - -------- ---- - ------------- ---- - -------- ------- ------ ---------- ----------- ---- ------------------------- --------- ----------------------- ---- ------------- ------- ------------------------- ------- --------------------------- ------- ------------------------------ ------ ------ -------- ----- ------ - ---------------------------------- ----- ------- - ----------------------------------- -------------------------------- -- -- - --------------------- - -------- --- --------- ------- -------展开代码
指导意义
本文介绍了使用 JavaScript 实现仿 Discuz 文本框弹出层效果的方法。在实际开发过程中，我们可以根据需求扩展代码，添加更多的按钮和事件监听器，并实现更
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3854
