TinyMCEで始めるリッチテキスト入門：Djangoでの使い方を徹底解説！

はじめに

皆さんは、Webサイトの入力フォームが単なるテキストボックスだけで物足りないと感じたことはありませんか？ブログ記事や商品詳細、お知らせなど、もっと表現豊かなコンテンツを作成したい場面はたくさんあります。そこで活躍するのがリッチテキストエディタです。

今回は、その代表格であるTinyMCEをDjangoプロジェクトに導入し、リッチなコンテンツを簡単に作成する方法をご紹介します。

1. リッチテキストとは？

リッチテキストとは、文字の装飾（太字、色、サイズ）や、画像、リンク、箇条書きなど、書式情報を含んだテキストのことです。普段私たちがWordやGoogleドキュメントで作成している文章が、まさにリッチテキストです。

これに対し、メモ帳などで作成される文字情報のみのテキストはプレーンテキストと呼ばれます。リッチテキストエディタは、このリッチなコンテンツをWeb上で簡単に作成・編集するためのツールです。

2. TinyMCEの導入方法（Djangoプロジェクト）

DjangoにTinyMCEを導入するには、django-tinymceというライブラリを使います。

Step 1: パッケージのインストール

以下のコマンドで、必要なライブラリをインストールします。

Bash

pip install django-tinymce

Step 2: settings.pyの設定

プロジェクトのsettings.pyに以下の設定を追加します。TINYMCE_DEFAULT_CONFIGでエディタの機能や見た目をカスタマイズできます。特にlicense_key: "gpl"は、エディタが正しく表示されるために重要です。

Python

INSTALLED_APPS = [
    # ...
    'tinymce',
    'flatpages_custom', # Flatpagesをカスタマイズするアプリ名
]

# TinyMCEのJavaScriptファイルURLを指定
TINYMCE_JS_URL = 'https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js'

# TinyMCEのデフォルト設定
TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 500,
    "menubar": True,
    "plugins": "advlist,autolink,lists,link,image,charmap,preview,anchor,searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,help,wordcount",
    "toolbar": "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image media | code | help",
    "language": "ja",
    "license_key": "gpl",
}

Step 3: urls.pyの設定

プロジェクトのurls.pyに、TinyMCEが提供するURLパターンを追加します。

Python

from django.urls import path, include

urlpatterns = [
    # ...
    path('tinymce/', include('tinymce.urls')),
]

Step 4: admin.pyでのウィジェット適用

flatpages_customアプリのadmin.pyで、FlatPageの管理画面をカスタマイズします。forms.ModelFormを使ってcontentフィールドにTinyMCEウィジェットを適用することで、テキストエリアがリッチテキストエディタに置き換わります。

Python

from django.contrib import admin
from django.contrib.flatpages.admin import FlatPageAdmin as DefaultFlatPageAdmin
from django.contrib.flatpages.models import FlatPage
from tinymce.widgets import TinyMCE
from django import forms

class FlatPageTinymceForm(forms.ModelForm):
    class Meta:
        model = FlatPage
        fields = '__all__'
        widgets = {
            'content': TinyMCE(attrs={'cols': 80, 'rows': 30}),
        }

admin.site.unregister(FlatPage)

class FlatPageAdminTinymce(DefaultFlatPageAdmin):
    form = FlatPageTinymceForm

admin.site.register(FlatPage, FlatPageAdminTinymce)

3. リッチテキストエディタの使い方

TinyMCEが管理画面に表示されたら、早速リッチなコンテンツを作成してみましょう。

書式設定：ツールバーのアイコンを使って、テキストを太字、斜体、下線にしたり、色やサイズを変更したりできます。

• B アイコンで太字
• I アイコンで斜体
• formatselect で見出し（H1〜H6）や段落を選択

画像や動画の挿入：

• 画像：ツールバーのアイコンをクリックし、画像のURLを入力するか、アップロード機能（別途設定が必要）を使って画像を挿入できます。
• 動画：アイコンをクリックし、YouTubeなどの動画URLを貼り付けるだけで、簡単に動画を埋め込めます。

リンクの挿入：

• テキストを選択し、アイコンをクリックしてリンク先のURLを入力します。

リスト：

• アイコンで箇条書き、アイコンで番号付きリストを作成できます。

これらの機能を使うことで、視覚的に分かりやすく、魅力的なコンテンツを簡単に作成できるようになります。

まとめ

TinyMCEは、Djangoにリッチテキスト機能を導入するための強力なツールです。今回ご紹介した設定で、管理画面の入力フィールドがパワフルなエディタに変わり、誰でも簡単にリッチなコンテンツを作成できるようになります。ぜひ、あなたのDjangoプロジェクトで活用してみてください！