讓所見即所得 HTML 編輯器為您服務

您在專案中使用所見即所得 HTML 編輯器嗎？這些使用者友善的工具在 Web 開發人員和內容創作者中越來越受歡迎，它們提供了直覺的介面來製作 Web 內容，而無需深入研究原始 HTML 程式碼。雖然這些編輯器開箱即用，功能強大，但它們的真正潛力通常是透過客製化來釋放的。

要點

• 您可以為所見即所得 HTML 編輯器新增功能

• 自訂按鈕可協助使用者輕鬆格式化內容

• 更改編輯器的外觀可以符合您網站的風格

為什麼要更改所見即所得 HTML 編輯器？

更改所見即所得 HTML 編輯器可以讓您：

1. 加入您的項目所需的功能

2. 讓使用者更容易使用

3. 在整個網站上保持相同的格式

現在，讓我們透過一個真實的例子來看看如何做到這一點。

新增方便的突出顯示按鈕

通常，我們想讓一些文字脫穎而出。讓我們新增一個按鈕來快速完成此操作。首先，我們需要將編輯器新增到我們的頁面：

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

然後，我們可以新增按鈕：

// 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('<span class="custom-highlight">' + this.selection.text() + '</span>');
  }
});

// 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('<span class="custom-highlight">' + this.selection.text() + '</span>');
        }
      });
    }
  }, []);

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

  return <FroalaEditor tag='textarea' config={config} ref={editorRef} />;
};

export default MyEditor;

這個 React 元件包裝了我們更改的編輯器，使其易於在您的 React 應用程式中使用。

總結

所見即所得 HTML 編輯器是製作內容的絕佳工具。此外，當您更改它們以滿足您的需求時，它們會變得更好。透過新增按鈕、更改它們的外觀並將它們適合您的項目，您可以製作一個完美的編輯工具。

請記住，我們的目標是讓編輯器適合您。透過一些巧妙的改變，您可以將優秀的編輯器變成能夠順利融入您的工作的優秀編輯器。

所以，快來嘗試吧！更改您的所見即所得 HTML 編輯器，看看它能為您的用戶帶來多少好處。

此貼文最初發佈在Froala的部落格上。

以上是讓所見即所得 HTML 編輯器為您服務的詳細內容。更多資訊請關注PHP中文網其他相關文章！