はじめに
皆さんは、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プロジェクトで活用してみてください！
