您在项目中使用所见即所得 HTML 编辑器吗？这些用户友好的工具在 Web 开发人员和内容创建者中越来越受欢迎，它们提供了直观的界面来制作 Web 内容，而无需深入研究原始 HTML 代码。虽然这些编辑器开箱即用，功能强大，但它们的真正潜力通常是通过定制来释放的。

要点

• 您可以向所见即所得 HTML 编辑器添加新功能

• 自定义按钮帮助用户轻松格式化内容

• 更改编辑器的外观可以匹配您网站的风格

为什么要更改 WYSIWYG HTML 编辑器？

更改所见即所得 HTML 编辑器可以让您：

1. 添加您的项目需要的功能

2. 让用户更容易使用

3. 在整个网站上保持相同的格式

现在，让我们通过一个真实的例子来看看如何做到这一点。

添加方便的突出显示按钮

通常，我们想让一些文本脱颖而出。让我们添加一个按钮来快速完成此操作。首先，我们需要将编辑器添加到我们的页面：

然后，我们可以添加新按钮：

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

这段代码做了一些事情：

1. 它为我们的按钮创建了一个新图标

2. 它告诉编辑器当有人单击按钮时要做什么

3. 它将我们的新按钮添加到工具栏

为了使突出显示的文本看起来更好，我们添加一些样式：

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

让编辑器看起来不错

您还可以更改编辑器的外观。这是一个简单的方法：

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

此更改做了几件事：

• 设置不同屏幕尺寸的按钮

• 它添加了一些文本来显示输入位置

• 关闭字符计数器

• 使工具栏随页面移动

• 它使用预制主题

更改所见即所得 HTML 编辑器的提示

当您更改这些编辑器时，请记住以下提示：

1. 从小处开始：先做小改变，然后再尝试大改变。

2. 使用现有工具：尽可能使用编辑器的内置工具。

3. 进行大量测试：确保您的更改在不同的浏览器中有效。

4. 考虑速度：大的变化可能会减慢速度，因此请使用大量内容进行测试。

5. 保持最新状态：检查可能对您有帮助的新功能。

在不同框架中使用更改的编辑器

您可以在许多 Web 框架中使用这些更改的编辑器。以下是您在 React 中使用我们更改后的编辑器的方法：

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

这个 React 组件包装了我们更改后的编辑器，使其易于在您的 React 应用程序中使用。

总结

所见即所得 HTML 编辑器是制作内容的绝佳工具。此外，当您更改它们以满足您的需求时，它们会变得更好。通过添加新按钮、更改它们的外观并将它们适合您的项目，您可以制作一个完美的编辑工具。

请记住，我们的目标是让编辑器适合您。通过一些巧妙的改变，您可以将一名优秀的编辑器变成一名能够顺利融入您的工作的出色编辑器。

那么，快来尝试一下吧！更改您的所见即所得 HTML 编辑器，看看它能为您的用户带来多少好处。

此 帖子 最初发布在 Froala 的博客上。