从零开始撸一个富文本编辑器

前端

2023-11-23 01:23:18

前言

身为程序员，如果不能像玩乐高一样创造出自己的开发工具，岂不辜负了身为程序员的灵魂？今天，我们就从头撸一个富文本编辑器吧！

功能

按照功能区域来划分，富文本编辑器一般主要包含两个部分：

菜单栏 ：用于设置输入框的文本格式，如字体大小、字体颜色、字号、标题、背景、行高、缩减等等。
文本编辑区域 ：用于输入富文本内容。

实现

菜单栏

菜单栏的实现相对简单，我们可以使用 HTML 的 <ul> 和 <li> 元素来创建菜单项，再为每个菜单项绑定对应的事件监听器，从而实现文本格式的设置。

<ul>
  <li><a href="javascript:void(0)" onclick="setFontSize(12)">12px</a></li>
  <li><a href="javascript:void(0)" onclick="setFontSize(14)">14px</a></li>
  <li><a href="javascript:void(0)" onclick="setFontSize(16)">16px</a></li>
</ul>

文本编辑区域

文本编辑区域的实现则需要用到一些 JavaScript 技巧。首先，我们需要创建一个 <div> 元素作为编辑区域，再使用 contentEditable 属性使其可编辑：

<div id="editor" contenteditable="true"></div>

接下来，我们需要监听编辑区域内的事件，以便在用户输入内容时进行相应的处理，例如自动换行、自动保存等。

const editor = document.getElementById('editor');

// 监听键盘事件
editor.addEventListener('keydown', (e) => {
  // 如果按下了回车键，则自动换行
  if (e.keyCode === 13) {
    e.preventDefault();
    document.execCommand('insertParagraph');
  }
});

// 监听内容改变事件
editor.addEventListener('input', (e) => {
  // 将编辑器中的内容保存到数据库或其他存储介质
  // ...
});