WYSIWYG HTML エディターを使いやすくする-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-08-29 12:43:23

オリジナル

875 人が閲覧しました

Make WYSIWYG HTML Editors Work for You

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

重要なポイント

WYSIWYG HTML エディターに新機能を追加できます
カスタムボタンにより、ユーザーはコンテンツを簡単にフォーマットできます
エディターの外観を変更すると、サイトのスタイルに合わせることができます

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

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

ログイン後にコピー

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

さまざまな画面サイズに合わせてボタンを設定します
入力する場所を示すテキストを追加します
文字カウンターをオフにします
ツールバーをページに合わせて移動させます
既製のテーマを使用します

WYSIWYG HTML エディターを変更するためのヒント

これらのエディタを変更するときは、次のヒントに留意してください:

小さく始める: 大きな変更を試す前に、最初に小さな変更を加えます。
そこにあるものを使用する: 可能な場合は、エディターの組み込みツールを使用します。
たくさんテストしてください: 変更が別のブラウザで機能することを確認してください。
速度について考える: 大きな変更を行うと速度が低下する可能性があるため、多くのコンテンツでテストしてください。
最新情報を入手: 役立つ可能性のある新機能をチェックしてください。

異なるフレームワークでの変更されたエディタの使用

これらの変更されたエディターは、多くの 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 アプリで使いやすくなっています。