富文本编辑器（WYSIWYG 编辑器）是一个允许用户在网页中以可视化方式创建和编辑文本内容的工具。用户可以通过按钮和工具栏来插入文本样式、图片、链接等内容，而无需直接操作 HTML 代码。实现富文本编辑器有多种方法，下面是一个基本的富文本编辑器的 HTML、CSS 和 JavaScript 代码示例。这个例子展示了如何使用 contenteditable 属性和 JavaScript 操作 DOM 元素来构建一个简单的富文本编辑器。

基本的富文本编辑器代码示例

HTML + CSS + JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单富文本编辑器</title>
  <style>
    /* 编辑器外观 */
    #editor {
      width: 80%;
      height: 300px;
      margin: 20px auto;
      border: 1px solid #ccc;
      padding: 10px;
      background-color: #f9f9f9;
      font-family: Arial, sans-serif;
      font-size: 16px;
    }

    /* 工具栏 */
    #toolbar {
      display: flex;
      justify-content: flex-start;
      margin: 10px 0;
      background-color: #f1f1f1;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    #toolbar button {
      margin-right: 10px;
      padding: 5px 10px;
      cursor: pointer;
      border: none;
      background-color: #ddd;
      border-radius: 4px;
    }

    #toolbar button:hover {
      background-color: #bbb;
    }

    /* 编辑器内容 */
    .editable {
      outline: none;
    }
  </style>
</head>
<body>

  <!-- 工具栏 -->
  <div id="toolbar">
    <button onclick="document.execCommand('bold')">加粗</button>
    <button onclick="document.execCommand('italic')">斜体</button>
    <button onclick="document.execCommand('underline')">下划线</button>
    <button onclick="document.execCommand('justifyLeft')">左对齐</button>
    <button onclick="document.execCommand('justifyCenter')">居中</button>
    <button onclick="document.execCommand('insertOrderedList')">有序列表</button>
    <button onclick="document.execCommand('insertUnorderedList')">无序列表</button>
    <button onclick="document.execCommand('createLink', false, prompt('输入链接地址'))">插入链接</button>
    <button onclick="document.execCommand('insertImage', false, prompt('输入图片地址'))">插入图片</button>
  </div>

  <!-- 富文本编辑区 -->
  <div id="editor" contenteditable="true" class="editable">
    在此输入文本...
  </div>

  <script>
    // 使富文本编辑器能够实时更新
    document.getElementById('editor').addEventListener('input', function() {
      console.log("内容更新了");
      // 可以在这里执行其他逻辑，例如将内容保存到本地或者同步到服务器
    });
  </script>

</body>
</html>

解释：

  1. contenteditable：
    • 使用 contenteditable="true" 属性使 #editor 元素变为可编辑的区域，允许用户直接在其中输入或修改文本内容。
  2. 工具栏（#toolbar）：
    • 工具栏提供了一些按钮，允许用户进行基本的文本样式编辑，比如加粗、斜体、下划线、对齐方式、插入链接和图片等。
  3. document.execCommand()：
    • execCommand() 是一个 JavaScript 方法，用来执行文本编辑命令。通过 document.execCommand('bold') 可以将选中的文本加粗。类似的命令可以实现其他文本样式操作。
  4. insertOrderedList 和 insertUnorderedList：
    • 这些命令可以用来插入有序列表和无序列表。
  5. 插入链接和图片：
    • 插入链接时，调用 prompt() 方法获取链接地址，然后使用 document.execCommand('createLink', false, url) 插入链接。
    • 插入图片时，使用 document.execCommand('insertImage', false, url) 插入图片。

自定义样式和扩展功能：

你可以根据需求进一步修改和扩展此编辑器，比如：

  • 添加字体大小、颜色选择器。
  • 支持更多的文本样式和格式化（如背景颜色、字体选择等）。
  • 将编辑器中的内容保存为 HTML 格式，供进一步处理。

现代富文本编辑器：

为了构建更加功能强大的富文本编辑器，通常会使用现有的开源库，以下是一些流行的 JavaScript 富文本编辑器：

  1. Quill：轻量级且功能强大的富文本编辑器，支持多种格式、插入图片、视频等。
  2. TinyMCE：功能全面，具有丰富的插件和扩展，广泛应用于网页开发中。
  3. CKEditor：一个成熟的富文本编辑器，提供了丰富的功能和插件，支持浏览器端与服务器端的无缝集成。

这些库提供了更多的功能、更好的跨浏览器兼容性以及更强大的 API，适合需要构建复杂编辑器的开发场景。

如果你对任何特定功能有问题，或者需要进一步的扩展帮助，请告诉我！