WebDesigner's Memorandumウェブデザイナーの備忘録

ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」

ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」

単なる入力機能だけではなく、入力した文字を選択して太字にしたり色を変えたりリンクを付けたりなどの機能があるエディタのことをWYSIWYGエディタと呼びます。これは「What You See Is What You Get(見た通りのものが得られる)」の略で、エディタ上で見た通りに文章を編集できます。

WYSIWYGエディタを実装するときは、すでに有名な「TinyMCE」を使うと非常に簡単に実装できます。

TinyMCE

TinyMCEはJavaScriptで簡単にリッチテキストエディタを実装できるJavaScriptライブラリです。

  • 機能が豊富でカスタマイズも柔軟に可能
    • ツールバーの追加
    • ボタンの入れ替えや削除
    • 独自のボタンを追加
  • WordPressにも採用されている

公式サイトから「Download TinyMCE SDK Now」をクリックしてダウンロードして、中に入っているJavaScriptファイルを読み込めば使えます。
(一緒に入っている「plugins」「langs」「themes」などのフォルダも必要です)

基本的な使い方

TinyMCEはtextareaに対してJavaScriptを適用して使います。

<textarea id="tinymce"></textarea>

「tinymce.init」で設定の初期化ができて、「selector」でtextareaのidやclassを指定します。

tinymce.init({
  selector: '#tinymce',
});

これでWYSIWYGエディタが表示されます。

日本語化

公式サイトの「Language Packages」ページから日本語のフォルダをダウンロードして「ja.js」を「js/tinymce/」にある「langs」へ移動します。

あとはtinymce.initで「language」に「ja」を指定します。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
});

これで日本語化されました。

初期入力内容を設定

<textarea>の中にHTMLを入力すれば、初期入力内容として表示されます。

<textarea id="tinymce">
  <p>ここに入力したHTMLは<strong>初期入力内容</strong>として表示されます。</p>
</textarea>

最低限のエディタのカスタマイズ

エディタの横幅や高さの設定

「width」や「height」に数値を指定すると、エディタの横幅や高さを指定できます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  width: 680,
  height: 420
});

他にも、エディタの右下をドラッグして拡大縮小するときに、最小のサイズを指定する「min_width」「min_height」や最大のサイズを指定する「max_width」「max_height」もあります。

ツールバーの変更

「toolbar」ではツールバーに表示するツールを指定します。
|」で区切りアイコンを表示できて、半角スペースで区切りながら表示したいツールを左から順に書いていきます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  toolbar: 'undo redo | bold italic link | image table',
  plugins: "image link table",
});

ツールの種類と名前は、公式サイトの「Toolbar Buttons」で確認できます。
また、一部のツールは「plugins」に指定してプラグインファイルを読み込む必要があります。

クレジットの非表示

「branding」を「false」にすると、下に表示される「Powered by TinyMCE」というクレジットが非表示になります。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  branding: false
});

CSSの読み込み

「content_css」にパスを指定すると、CSSの読み込みができます。

tinymce.init({
  selector: '#tinymce',
  language: 'ja',
  content_css: '/assets/css/editor.css'
});

これで指定したCSSファイル内に、見出しなどのスタイルを指定しておくとそれが適用されます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね