使用contentEditable属性创建一个所见即所得「WYSIWYG」编辑器

使用contentEditable属性创建一个所见即所得「WYSIWYG」编辑器

什么是所见即所得「WYSIWYG」编辑器？

所见即所得 (WYSIWYG) 被定义为指编辑器显示的内容（输出内容）与最终的打印或展示的内容必须完全一致的编辑器类型。所见即所得编辑器是一种常用的工具，可帮助用户在不需要了解任何技术知识的情况下创建和编辑内容，并可以在多个网站和平台上发布。

常见的WYSIWYG编辑器

市场上有许多不同的所见即所得编辑器，包括商业版本和免费版本。其中一些最受欢迎的包括：

TinyMCE

CKEditor

Quill

Froala Editor

Summernote

这些编辑器都有类似的功能，包括调整文本样式和格式、插入链接和图像等。但是，使用这些编辑器需要一定的技术知识，例如了解HTML、CSS和JavaScript等。

使用contentEditable属性创建WYSIWYG编辑器

使用contentEditable属性是一种简单的方式来创建所见即所得编辑器。例如，在HTML中，可以为任何元素添加此属性，以使其具有可编辑性。以下是一个例子：

  <div contenteditable="true">
    <p>这是一个可编辑元素。</p>
  </div>

在上面的示例中，div元素可以被编辑。

但是，要创建一个功能强大的编辑器需要更多的代码和复杂的逻辑。以下是一个基本的例子，该例子允许用户编辑文本的样式和格式，插入图像和链接，以及在可编辑区域中创建列表。这是使用纯JavaScript创建的简单WYSIWYG编辑器：

  <div contenteditable="true"></div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var editableDiv = document.querySelector("[contenteditable]");
      document.execCommand("defaultParagraphSeparator", false, "p");
      var buttons = {
        "bold": document.querySelector("#bold-btn"),
        "italic": document.querySelector("#italic-btn"),
        "underline": document.querySelector("#underline-btn"),
        "strikeThrough": document.querySelector("#strikethrough-btn"),
        "justifyLeft": document.querySelector("#justify-left-btn"),
        "justifyCenter": document.querySelector("#justify-center-btn"),
        "justifyRight": document.querySelector("#justify-right-btn"),
        "insertOrderedList": document.querySelector("#ordered-list-btn"),
        "insertUnorderedList": document.querySelector("#unordered-list-btn"),
        "createLink": document.querySelector("#link-btn"),
        "insertImage": document.querySelector("#image-btn")
      };
      for (var name in buttons) {
        buttons[name].onclick = function() {
          document.execCommand(this.getAttribute("data-command"), false, this.getAttribute("data-value"));
        };
      }
    });
  </script>

该编辑器具有以下功能：

- 粗体、斜体、下划线和删除线文本样式

- 左对齐、居中对齐和右对齐文本格式

- 有序和无序列表

- 插入链接和图像

结论

使用contentEditable属性创建基本的WYSIWYG编辑器相对简单，但要实现更复杂的编辑器需要更多的代码和逻辑。市场上有许多不同的WYSIWYG编辑器可用于不同的需求。无论哪种编辑器，都可以帮助用户轻松地在不需要了解HTML、CSS和JavaScript等技术知识的情况下创建和编辑内容，并在多个网站和平台上发布。