Help us understand the problem. What is going on with this article?

django-ckeditorにコードスニペット機能を追加

django-ckeditorはリッチテキストエディター(多機能な編集機能を持った入力装置?)を提供してくれる便利なライブラリです!

インストール方法は割愛します。(時間があれば別記事で書いてみます!
今回は、ckeditorにコードスニペット(pythonやJSなどのコードをいい感じに表示してくれる機能)を実装する方法をまとめたいと思います。

Step1. CKEDITOR_CONFIGにプラグインを認識させる。

django-ckeditorの設定をする際に、setting.pyの中に以下のような記述を行っていると思います。

setting.py
CKEDITOR_CONFIGS = {
    'default': {
        'height': 150,  # defaultで高さ150pxに固定という意味
        'width': '100%',  # defaultで親要素の幅に固定 ー> 便利です。
    },
}

少し、設定をいじっていますがこんな感じになっているはずです。

ここでは自作の設定などを追加したりすることができますが、内容が本記事の趣旨と異なりますので別記事で。

続いて、以下のような自作設定に'extraPlugins'という形でコードスニペット機能を追加します。(この他にもdjango-ckeditorはプラグインという形で機能を拡張させることが可能です。

setting.py
CKEDITOR_CONFIGS = {
    'custom_toolbar': {
        'height': 150,
        'width': '100%',
        'toolbar_Custom': [
            ['CodeSnippet'],  # これがコードスニペットの機能
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['NumberedList', 'BulletedList'],
            ['Maximize'],
            ['Styles', 'Format'],
        ],
        'toolbar': 'Custom',
        'extraPlugins': ','.join(['codesnippet']),  # コードスニペット機能のプラグイン

    },
    'default': {
        # 'toolbar': 'Basic',
        'height': 150,
        'width': '100%',
    },
}

Step2. templateでコードスニペットの表示を有効にする。

このままでは、templateにて作成した文章などを呼び出したときコードスニペットが以下のように有効になりません。

templateで有効にするためには、以下のJS/CSSファイルの読み込みが必要です。

template
{# テーマに関するcssファイル #}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">


{# JSファイル+実行 #}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これでtemplateでテーマの割当が以下のように行われます。

番外編:テーマを変更する

ちゃんとテーマが割り当てられる用になりましたが、なにか物足りない。。。他のテーマを割り当てたい!というときは以下のサイトから好きなテーマを探して見てください。
各テーマのCDNを利用することができます。

https://cdnjs.com/libraries/highlight.js

例えば、monokaiに変更したいときは

template
{# テーマに関するcssファイル #}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> -->これを変更

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css"> --> 変更後

上記のように変更したいテーマのcssファイルを指定すれば以下のように好きなテーマを割り当てることが可能です!

終わりに

多くの機能を作成して頂いてありがとうございます。。。先人に感謝です。笑

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした