Drupal8 WYSIWYGエディターでソースコード(code)を入力するための機能追加方法

abechiyo 2019/07/18(木) - 16:23 に投稿

Drupal8から、コアにWYSIWYGエディターが同梱されました。このWYSIWYGエディター(CKEditor)に、下記のようなソースコード入力用機能を追加します。

require_once 'Zend/Uri/Http.php';

namespace Location\Web;

interface Factory
{
    static function _factory();
}

 

構築手順

 

ソースコードの入力昨日は、CKEditorのCodeSnippet機能を使います。

  1. Drupalのモジュール、CodeSnippetをダウンロードし、「/modules」に設置します。

    https://www.drupal.org/project/codesnippet
     
  2. CKEditorのサイトにアクセスし、CodeSnippetをダウンロードし、「/libraries」に設置してください。

    CodeSnippetのバージョンは、4.11.4をご利用ください。最新版を利用するとエラーが出力され使うことができません。
    (2019年7月18日現在)

    codesnippet
     
  3. 2つのライブラリを有効にし、Drupalの管理画面から、CKEditor CodeSnippetを有効にします。


     
  4. 「環境設定 > テキストフォーマットとエディター」に進み、「フルHTML」など、CodeSnippetを利用する、テキストフォーマットを設定します。
     
  5. 利用可能なボタンから、アクティブツールバーに、CodeSnippetのボタンをドラックアンドドロップし、「構成を保存」をクリックします。

    コードスニペエット設定

 

以上で、設定は環境です。

入力した、フロントページなどの閲覧ページにソースコードの色付けを行う場合は、別途利用しているテーマにCodeSnippetのスタイル(css )読み込みが必要です。

CSSファイルは、ダウンロードしたCodeSnippetフォルダの「lib/highlight/styles」に格納されています。
 

 

タグ