プロジェクトで WYSIWYG HTML エディターを使用していますか?これらのユーザーフレンドリーなツールは、生の HTML コードを深く掘り下げることなく Web コンテンツを作成するための直感的なインターフェイスを提供するため、Web 開発者やコンテンツ作成者の間でますます人気が高まっています。これらのエディタはそのままでも強力ですが、多くの場合、カスタマイズすることで真の可能性が解き放たれます。

重要なポイント

• WYSIWYG HTML エディタに新機能を追加できます

• カスタム ボタンにより、ユーザーはコンテンツを簡単に書式設定できます

• エディターの外観を変更すると、サイトのスタイルに合わせることができます

WYSIWYG HTML エディタを変更する理由

WYSIWYG 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'
});

この変更によりいくつかのことが行われます:

• さまざまな画面サイズに合わせてボタンを設定します

• 入力する場所を示すテキストを追加します

• 文字カウンターをオフにします

• ツールバーをページに合わせて移動させます

• 既製のテーマを使用しています

WYSIWYG 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 アプリで簡単に使用できるようにしています。

まとめ

WYSIWYG HTML エディタは、コンテンツを作成するための優れたツールです。さらに、ニーズに合わせて変更すると、さらに良くなります。新しいボタンを追加し、その外観を変更し、プロジェクトに適合させることで、完璧な編集ツールを作成できます。

覚えておいてください、目標は、エディターが自分にとって適切に機能するようにすることです。いくつかの賢い変更を加えることで、優れたエディタを自分の作業にスムーズに適合する優れたエディタに変えることができます。

それでは、ぜひ試してみてください。 WYSIWYG HTML エディタを変更して、ユーザーにとってどれだけ改善できるかを確認してください。

この 投稿 は最初に Froala のブログに公開されました。