返回

揭秘一万行代码不到，一页轻松搞定富文本编辑器的秘密

前端

仅仅一行核心JavaScript代码就可以实现一个轻量级富文本编辑器，这个想法听起来似乎有些异想天开，但事实证明，这是完全可以做到的。通过利用JavaScript的强大功能和DOM操作，我们可以轻松地创建一个具有基本功能的富文本编辑器，而无需编写大量的代码。

在这个一页式富文本编辑器中，我们可以使用JavaScript来动态地创建和修改编辑器的内容，并使用CSS来控制编辑器的样式。通过这种方式，我们可以轻松地实现诸如加粗、斜体、下划线、对齐、列表等基本功能。

当然，这个一页式富文本编辑器也有其局限性，例如它不支持图片、视频等多媒体内容的编辑，也不支持复杂表格的创建。但对于一些简单的文本编辑需求，它已经足够了。

如果您正在寻找一个简单易用、轻量级且易于集成的富文本编辑器，那么这个一页式富文本编辑器是一个非常不错的选择。它可以在一页中轻松实现富文本编辑功能，而且还非常高效。

下面是这个一页式富文本编辑器的核心JavaScript代码：

function createEditor(element) {
  const editor = document.createElement('div');
  editor.classList.add('editor');

  const toolbar = document.createElement('div');
  toolbar.classList.add('toolbar');

  const buttons = [
    {
      name: 'bold',
      title: '加粗',
      icon: '<b>B</b>',
    },
    {
      name: 'italic',
      title: '斜体',
      icon: '<i>I</i>',
    },
    {
      name: 'underline',
      title: '下划线',
      icon: '<u>U</u>',
    },
    {
      name: 'left',
      title: '左对齐',
      icon: '<i class="fas fa-align-left"></i>',
    },
    {
      name: 'center',
      title: '居中对齐',
      icon: '<i class="fas fa-align-center"></i>',
    },
    {
      name: 'right',
      title: '右对齐',
      icon: '<i class="fas fa-align-right"></i>',
    },
    {
      name: 'unorderedList',
      title: '无序列表',
      icon: '<i class="fas fa-list-ul"></i>',
    },
    {
      name: 'orderedList',
      title: '有序列表',
      icon: '<i class="fas fa-list-ol"></i>',
    },
  ];

  buttons.forEach(button => {
    const buttonElement = document.createElement('button');
    buttonElement.classList.add('button');
    buttonElement.setAttribute('title', button.title);
    buttonElement.innerHTML = button.icon;

    buttonElement.addEventListener('click', () => {
      document.execCommand(button.name, false, null);
    });

    toolbar.appendChild(buttonElement);
  });

  const content = document.createElement('div');
  content.classList.add('content');
  content.setAttribute('contenteditable', true);

  editor.appendChild(toolbar);
  editor.appendChild(content);

  element.appendChild(editor);
}

createEditor(document.getElementById('editor'));

您可以将这段代码复制到您的HTML文件中，并在<body>元素中添加一个<div>元素，然后调用createEditor()函数来创建富文本编辑器。