WYSIWYG HTML エディターを使いやすくする

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

重要なポイント

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

• カスタム ボタンにより、ユーザーはコンテンツを簡単にフォーマットできます

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

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

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

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

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

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

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

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

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

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('<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 アプリで使いやすくなっています。

まとめ

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

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

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

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

以上がWYSIWYG HTML エディターを使いやすくするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。