您在專案中使用所見即所得 HTML 編輯器嗎？這些使用者友善的工具在 Web 開發人員和內容創作者中越來越受歡迎，它們提供了直覺的介面來製作 Web 內容，而無需深入研究原始 HTML 程式碼。雖然這些編輯器開箱即用，功能強大，但它們的真正潛力通常是透過客製化來釋放的。
您可以為所見即所得 HTML 編輯器新增功能
自訂按鈕可協助使用者輕鬆格式化內容
更改編輯器的外觀可以符合您網站的風格
更改所見即所得 HTML 編輯器可以讓您：
加入您的項目所需的功能
讓使用者更容易使用
在整個網站上保持相同的格式
現在，讓我們透過一個真實的例子來看看如何做到這一點。
通常，我們想讓一些文字脫穎而出。讓我們新增一個按鈕來快速完成此操作。首先，我們需要將編輯器新增到我們的頁面：
<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']
});
這段程式碼做了一些事情：
它為我們的按鈕建立了一個新圖示
它告訴編輯器當有人點擊按鈕時要做什麼
它將我們的新按鈕加入工具列
為了讓突出顯示的文字看起來更好，我們添加一些樣式：
.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'
});
此變更有幾個作用：
它設定了不同螢幕尺寸的按鈕
它添加了一些文字來顯示在哪裡輸入
它會關閉字元計數器
讓工具列隨頁移動
它使用預製主題
當您變更這些編輯器時，請記住以下提示：
從小處開始：先做小改變，然後再嘗試大改變。
使用現有的：盡可能使用編輯器的內建工具。
進行大量測試：確保您的變更在不同的瀏覽器中有效。
考慮速度：大的變化可能會減慢速度，因此請使用大量內容進行測試。
保持最新狀態：檢查可能對您有幫助的新功能。
您可以在許多 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中文網其他相關文章！
