点亮指尖，挥洒创意：亲手打造专属富文本编辑器

2024-02-19 22:39:46

手写 H5/uniapp 专属富文本编辑器：释放创造力的技术突破

赋能标签，释放潜能

踏上创建专属富文本编辑器的旅程，第一步是为目标标签赋予可编辑的能力。为此，我们使用了 contentEditable 属性。这个神奇的属性赋予元素可编辑性，就像你用文本编辑器编辑文本一样。

<div contentEditable="true">
  //可编辑内容
</div>

兼容之选，iOS 特殊

苹果系统对 contentEditable 属性情有独钟，需要额外的兼容处理。我们加上 -webkit-user-select: text; 样式，让 iOS 设备也能享受编辑的乐趣。

div[contentEditable="true"] {
  -webkit-user-select: text;
}

内置魔法，innerHTML 妙用

有了 contentEditable 的加持，我们可以使用 innerHTML 属性来操控编辑内容。这个属性就像是文本编辑器的操控棒，让我们可以轻松编辑文本，就像在文本编辑器中操作一样。

// 获取可编辑元素
const editor = document.querySelector('[contentEditable="true"]');

// 设置内容
editor.innerHTML = '欢迎来到你的专属编辑器！';

// 获取内容
const content = editor.innerHTML;

总结要点，实现功能

通过以上步骤，我们构建了一个基本的可编辑富文本编辑器，它具备以下功能：

文本编辑： 直接在标签内进行文本编辑，无须其他操作。
内容读取： 通过 innerHTML 获取编辑后的内容。
内容设置： 通过 innerHTML 设置编辑器中的内容。

扩展进阶，功能升级

基础编辑器完成，接下来让我们赋予其更强大的功能，释放你的创造力。

加粗、斜体、下划线： 运用 execCommand() 方法，轻松实现文本加粗、斜体、下划线等格式化效果。
插入链接： 同样使用 execCommand() 方法，为选中文本添加链接。
有序、无序列表： 插入有序、无序列表，丰富文本结构。
撤销、重做： 使用 document.execCommand('undo') 和 document.execCommand('redo') 实现撤销、重做功能。

保存编辑，持久记录

最后，我们为编辑器增添保存功能，让你的心血不随刷新而逝。

// 保存按钮点击事件
const saveButton = document.querySelector('#saveButton');
saveButton.addEventListener('click', () => {
  // 获取编辑内容
  const content = editor.innerHTML;
  
  // 保存到本地存储或数据库
  // ... 保存操作
  
  alert('内容已保存！');
});