Drupal 9CKEditorをポップにする-あなたが知らなかった7つの便利なモジュールが存在しました

公開: 2021-12-06

コンテンツエディタは、基本的にCMSの最も重要な機能です。また、デフォルトのリッチテキスト編集ツールとしてCKEditorのような強力な機能を備えた、Drupalは、CKEditorウィジェットシステムやAdvanced Content Filter（ACF）などのDrupal8 / 9のいくつかの新機能でコンテンツ管理ゲームを大幅に強化しました。つまり、デフォルトの機能を使用してもかなり強力です…しかし、いくつかの提供されたモジュールとプラグインの助けを借りて、CKEditorゲームを実際に向上させることができます。 CKEditorの機能と使いやすさを拡張するための、最も優れた最も興味深いアドオンを入手するために読んでください。

Drupal 9 CKEditor

まず、Drupalを初めて使用する場合、CKEditor 4.5は、Drupal 8/9のデフォルトのWYSIWYG（表示されるものが取得されるもの）リッチエディターです。これは、Webサイト管理者がWebページに直接コンテンツを書き込んだり編集したりするのに役立つテキストエディタです。 Drupalと同様に、CKEditorはオープンソースプロジェクトであり、最近アップグレードされ、今後も改善される多くの強力な新機能が追加されました。 Drupal 10準備イニシアチブの一環として、Drupalの貢献者は、Drupal10に最新かつ最新のバージョンであるCKEditor5を実装することに取り組んでいます。

基本がわからなくなったので、アップグレードに取り掛かりましょう。

これらの素晴らしいDrupal9モジュールでCKEditorを拡張する

1.CKEditor続きを読む

読者に大量のテキストの残りを見る選択肢を与えたいときを知っていますか？これが、CKEditorの続きを読む機能を使用するための手がかりです。この機能を使用すると、ページをコンパクトにレイアウトしながら、ユーザーを「読み進める」ことができます。これを追加するために、Drupal 9は、コントリビューターモジュールをインストールすると、続きを読む/表示を減らす機能を有効にするシンプルで簡単な方法を提供します。

モジュールの実装：

このモジュールをインストールしたら、いくつかの設定を構成する必要があります。

優先するテキスト形式を編集し、「許可されるHTMLタグを制限する」を有効にします。
「許可されたHTMLタグ」に<divdata-readmore-less-text data-readmore-more-text data-readmore-type class = "ckeditor-readmore">を追加します。「許可されたHTMLタグの制限」を無効にして、[保存]をクリックします。
次に、[続きを読む]アイコンを[利用可能な]ボタンから[アクティブなツールバー]にドラッグアンドドロップし（上の画像を参照）、[保存]をクリックします。
キャッシュをクリアした後、「優先テキスト形式」を選択すると、テキストエディタに「続きを読む」アイコンが表示されます。

どうやって使うのですか：

コンテンツエリア内で、「テキスト形式」アイコンをクリックします。これで、長方形のボックスが表示されます。ユーザーが[続きを読む]をクリックした後に表示する残りのコンテンツを追加します。

FAQ：続きを読むテキストを変更できますか？

絶対！「CKEditorプラグイン設定」の「続きを読むボタン」タブをクリックして、テキストを変更するだけです。

2.CKEditorカラーボタン

デフォルトでは、CKEditorはエディター内からテキストの色を変更する選択肢を提供していません。ただし、特定のテキストの色を変更したり、テキストを別の色で強調表示したりする場合は、Drupal 9CKEditorカラーボタンモジュールをリストに含める必要があります。このモジュールでは、パネルボタンモジュールもインストールする必要があり、これらのモジュールの両方で、ライブラリ、カラーボタンライブラリ、およびパネルボタンライブラリをインストールする必要があることに注意してください。モジュールをインストールし、テーマのライブラリフォルダーにライブラリを追加した後、色ボタンを[使用可能なボタン]から[アクティブ]ツールバーに希望のテキスト形式で移動できます。

FAQ：カスタムカラーを追加できますか？

はい！すでに使用可能なデフォルトの色を使用したくない場合は、カスタムの色を設定することもできます。これは、からカラーオプションをアクティブにした「テキストエディタ形式」セクションで実行できます。「テキストエディタ形式」の「CKEditorプラグイン設定」セクションで「CKEditorカラーボタン」を見つけ、「テキストカラー」テキスト領域にコンマ区切りで＃記号なしで色を追加します。

3. CKEditor Youtube

Drupal 9 CKEditor Youtubeモジュールは、長い埋め込みコードなしでYoutubeビデオをコンテンツに追加するのに役立ちます。 Youtubeアイコンフォームをインストールして[利用可能なボタン]から[アクティブ]ツールバーに移動すると、テキストエディタで任意のテキスト形式のYoutubeアイコンを見つけることができます。このモジュールはライブラリに依存します。

このモジュールの最も優れている点の1つは、柔軟性です。上のスクリーンショットに示されているように、幅と高さを指定しながら、「埋め込みコードを貼り付ける」か、YoutubeのURLを貼り付けることができます。また、「自動再生」、「（特定の時間）に開始」、「プレーヤーのコントロールを表示」などの便利なオプションがあります。

4.CKEditorテンプレートとCKEditorテンプレートのユーザーインターフェイス

あなたのウェブサイトのページや投稿に同じコンテンツ構造がたくさんありますか？ CKEditorテンプレートとCKEditorテンプレートのユーザーインターフェイスモジュールは、簡単に複製するためのチケットです。どちらのモジュールも、モジュールページの指示に従ってダウンロードおよびインストールできるライブラリに依存しています。これらのライブラリをインストールした後、次の図に示すように、テンプレートアイコンを[使用可能なボタン]から[アクティブなツールバー]に移動できます。

CKEditorテンプレートモジュールは、事前定義されたテンプレートを含むダイアログポップアップを提供します。テンプレートアイコン（上のスクリーンショットに示されている）をクリックすると、ポップアップが開き、事前定義されたテンプレートのいずれかを選択できます。テンプレートは、含まれている「テキスト形式とスタイル」で挿入されます。

CKEditorテンプレートのユーザーインターフェイスモジュールは、 CKEditorテンプレートモジュールで選択したテンプレートを作成するために使用するものです。モジュールを有効にすると、[構成]> [コンテンツオーサリング]> [CKEditorテンプレート]セクションにオプションが表示されます。

構成からCKEditorテンプレートをクリックすると、 CKEditor構成テンプレートページにリダイレクトされます。これで、テンプレートを追加または編集できます。

5. CKEditor CodeSnippet

CKEditor CodeSnippetモジュールを使用すると、コンテンツ内に「コードコンテンツ」を追加して、強調表示され、適切にフォーマットされるようにすることができます。このモジュールは、 highlight-jsライブラリとそれに使用できるすべてのスタイルを使用します。 composerを使用してこのモジュールをインストールすると、ライブラリが自動的にインストールされます。このモジュールをインストールした後、「コードスニペット」アイコンを[利用可能]ボタンから[アクティブ]ツールバーに移動できます。

これで、テキスト形式のCKEditorプラグイン設定に[コードスニペット]タブが表示されます。ここでは、サポートされているプログラミング言語をチェック/チェック解除できます。

FAQ：それを使用する方法は？

モジュールをインストールすると、CKEditorからコンテンツにCodeSnippet機能を挿入できます。コードスニペットアイコンをクリックすると、ポップアップが表示されます。ここで、コードを貼り付けてコード言語を選択できます。

6.CKEditorの単語数

つまり、単語/文字の制限で作業しているのです…これは、動的なレイアウトを持つ高度に様式化されたサイトで一般的な状況です。そして、それらは、同じコンテンツで複数の手が作業していると特に厄介になる可能性があります。このような場合、（MS Wordの場合と同じように）エディター自体のフッターにあるCKEditorで文字と単語の数を確認すると便利です。そのとき、CKEditorWordcountモジュールをインストールします。モジュールとライブラリをインストールすると、テキスト形式のCKEditorプラグイン設定で「単語数と文字数」を確認できます。ここでは、要件に応じて機能をチェック/チェック解除できます。また、CKEditorの右下にカウンターがあります。

7.CKEditorツイート可能テキスト

いくつかのインターネットポイントを獲得しようとしていますか？ CKEditor Tweetable Textモジュールを使用すると、ユーザーが単語または構文をクリックして特定のテキストをツイートするオプションを提供できます。モジュールページの指示に従ってモジュールとライブラリをインストールし、ツイート可能なテキストアイコンを[利用可能]ボタンから[アクティブ]ツールバーに移動するだけです。次に、テキストエディタにツイートアイコンが表示されます。このアイコンをクリックすると、ポップアップが開きます。ここでは、表示テキスト（ツイートアイコンを追加する単語）とツイート可能テキスト（ツイートに表示されるテキスト）を追加できます。ユーザーが[テキストの表示]をクリックすると、Twitterにリダイレクトされ、ツイート可能なテキストが表示されます。