Bootstrap UI エディター

この記事では、Bootstrap フレームワークで提供されている2つの UI エディター、Bootstrap wysihtml5 エディターと Bootstrap markdown エディターについて紹介します。それぞれの使用方法、設定オプション、サンプルコードを詳しく説明します。

Bootstrap wysihtml5 エディター

概要

wysihtml5 エディターは、WYSIWYG（What You See Is What You Get）の機能を持つリッチテキストエディターです。つまり、編集画面に表示されている内容が、そのまま出力結果に反映されます。使い慣れたワープロソフトのような感覚で、HTML の知識がなくても、簡単にテキストを編集することができます。

導入方法

Bootstrap プロジェクトに wysihtml5 エディターを導入するには、以下の手順に従います。

1. wysihtml5 エディターの JavaScript と CSS ファイルをダウンロードまたは CDN から読み込みます。
2. HTML の <textarea> 要素に wysihtml5 クラスを付与します。
3. JavaScript で wysihtml5() メソッドを呼び出し、エディターを初期化します。

サンプルコード

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-wysiwyg/0.8.18/bootstrap3-wysihtml5.all.min.js"></script>

<textarea class="form-control wysihtml5" rows="10">
  <p>ここにテキストを入力してください。</p>
</textarea>

<script>
$(function () {
  $('.wysihtml5').wysihtml5();
});
</script>

設定オプション

wysihtml5 エディターには、さまざまな設定オプションが用意されています。主な設定オプションとその説明は以下の通りです。

設定オプションのサンプルコード

<script>
$(function () {
  $('.wysihtml5').wysihtml5({
    parser: function(html) {
      // カスタムパーサー
      return html;
    },
    styleSheets: [
      '//example.com/css/editor.css'
    ],
    events: {
      'load': function() {
        console.log('エディターがロードされました。');
      }
    }
  });
});
</script>

Bootstrap markdown エディター

概要

markdown エディターは、プレーンテキストで記述できる Markdown 記法に対応したエディターです。Markdown 記法は、HTML のようなマークアップ言語よりもシンプルで、読み書きしやすいのが特徴です。ブログ記事やドキュメントの作成などに適しています。

導入方法

Bootstrap プロジェクトに markdown エディターを導入するには、以下の手順に従います。

1. markdown エディターの JavaScript と CSS ファイルをダウンロードまたは CDN から読み込みます。例えば、Bootstrap-Markdownなどが利用できます。
2. HTML の <textarea> 要素に markdown-editor などのクラスを付与します。
3. JavaScript で markdown() メソッドを呼び出し、エディターを初期化します。

サンプルコード

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown.js/0.5.0/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script>

<textarea class="form-control markdown-editor" rows="10">
  # 見出し1
  ## 見出し2
  これはサンプルテキストです。
</textarea>

<script>
$(function () {
  $(".markdown-editor").markdown();
});
</script>

設定オプション

markdown エディターには、さまざまな設定オプションが用意されています。主な設定オプションとその説明は以下の通りです。

設定オプションのサンプルコード

<script>
$(function () {
  $(".markdown-editor").markdown({
    autofocus: true,
    codePrettify: true
  });
});
</script>

よくある質問

Q1: wysihtml5 エディターで日本語を入力しようとすると、文字化けしてしまう。

A1: wysihtml5 エディターの文字コードが、ページの文字コードと一致しているか確認してください。ページの文字コードが UTF-8 であれば、wysihtml5 エディターの文字コードも UTF-8 に設定する必要があります。設定方法は、wysihtml5 エディターの初期化時に encoding: 'UTF-8' を指定します。

Q2: markdown エディターでコードブロックのシンタックスハイライトを有効にできない。

A2: コードブロックのシンタックスハイライトを有効にするには、Google Code Prettify などのライブラリを読み込む必要があります。ライブラリを読み込んだ後、markdown エディターの初期化時に codePrettify: true を指定します。

Q3: 他の Bootstrap UI コンポーネントと組み合わせることはできますか？

A3: はい、Bootstrap UI エディターは他の Bootstrap UI コンポーネントと組み合わせて使用することができます。例えば、エディターをモーダルウィンドウ内に配置したり、ボタンをクリックしてエディターを表示したりすることができます。Bootstrap のドキュメントを参照して、他のコンポーネントとの連携方法を確認してください。