Django создает личный блог: используйте текстовый редактор django-ckeditor.

Django

Ранее мы реализовали написание статей в синтаксисе Markdown. Однако использование Markdown для комментариев к статьям не подходит, вы не можете заставить пользователей потратить время на ознакомление с синтаксисом. Кроме того, обычно присутствуют такие функции, как смайлики и цветные шрифты в комментариях, которых также нет в Markdown.

Итак, редактор форматированного текстаDjango-ckeditorЭто пригодилось.

Использование Ckeditor в фоновом режиме

существуетвиртуальная средаУстановите django-ckeditor в:

(env) > pip install django-ckeditor

После успешной установки это все еще старое правило.settings.pyЗарегистрируйте приложение в:

my_blog/settings.py

...
INSTALLED_APPS = [
    ...
    
    'ckeditor',

    ...
]
...

Следующим шагом является модификация модели. Собственные форматированные текстовые поля с библиотекой django-ckeditorRichTextFieldЗаменить обычные текстовые поляTextField:

comment/models.py

...
# django-ckeditor
from ckeditor.fields import RichTextField

class Comment(models.Model):
    ...
    # 之前为 body = models.TextField()
    body = RichTextField()
    ...

Не забудьте изменитьПеренести данные:

(env) > python manage.py makemigrations
(env) > python manage.py migrate

Для облегчения тестирования изменитеcomment/admin.pyфайл для регистрации модуля комментариев в фоновом режиме:

comment/admin.py

from django.contrib import admin
from .models import Comment

admin.site.register(Comment)

Запустите сервер, войдите на страницу комментариев в фоновом режиме и обнаружите, что django-ckeditor уже доступен:

img

Функции довольно полные, со шрифтами, размерами шрифтов, цветами, ссылками и выражениями.

Что делать, если мне нужна только часть функциональности? НапримерВставить флеш-анимациюВ принципе бесполезен. Тоже вроде не видитвставить кодовый блокфункция.

ckeditorпозволить вамsettings.pyНастройте конфигурацию в:

my_blog/settings.py

...
CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'250px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'], 
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
            # 最大化
            ['Maximize']
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet']),
    }
}

существуетtoolbar_CustomОпределите функциональные модули, которые необходимо использовать; функции, которых нет в списке, больше не отображаются. Функция блока кода — это подключаемый модуль, который поставляется вместе с редактором и должен бытьextraPluginsуказывается в использовании. Эффект следующий:

img

После редактирования форматированного текста его необходимо отобразить во внешнем интерфейсе. Форматированный текст — это что-то вродеhtmlФормат сохраняется, поэтому его нужно добавить в код, выводящий комментарий.|safeФильтр для предотвращения экранирования браузера.

Исправлятьdetail.htmlЧасть кода, показывающая комментарии в:

templates/article/detail.html

...

<!-- 显示评论 -->
<h4>共有{{ comments.count }}条评论</h4>
<div>
    {% for comment in comments %}
        ...
        <!-- 修改这里 -->
        <div>{{ comment.body|safe }}</div>
    {% endfor %}
</div>

...

Войдите на страницу сведений о статье, чтобы увидеть эффект:

img

подсветка кода

Подсветка кода требует добавления дополнительных плагиновPrism. существуетPrismЗагрузка официальной страницы плагина (также можно нажатьздесьПосле прямой загрузки) распакованныйprismставитьenv\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\pluginsПод содержанием. Уведомлениеenv— это каталог созданной вами виртуальной среды.

Все библиотеки, которые вы установили ранее, находятся в этом каталоге env.

затем вофициальный сайт призмыВыберите тему:

img

  • Выберите тему, которая вам нравится
  • Затем выберите язык, который хотите выделить. Если вы не знаете, вы можете выбрать все
  • Проверьте плагин номера строки
  • последний кликDOWNLOAD CSSСкачать стиль

существуетstaticновый в каталогеprismкаталог и поместите в него загруженный файл CSS.

Обратите внимание, что static здесь — это каталог статических файлов в проекте (такой же, как в предыдущей главе), а не статический каталог в папке env.

Затем в коде, который нужно выделитьфайл шаблонаВизуализируйте код, ссылаясь на статический файл prism:

templates/article/detail.html

...

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">

...

будетPrism,widget,lineutilsПлагин добавляется в файл конфигурации. Два последних редактора идут вместе с ними, их не нужно скачивать отдельно, достаточно добавить:

my_blog/settings.py

...
CKEDITOR_CONFIGS = {
    'default': {
        ...
        # 添加 Prism 相关插件
        'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
    }
}

Готово:

img

Подсветка кода работает отлично!

Использование Ckeditor на переднем плане

Чтобы пользователи могли использовать редактор форматированного текста на переднем плане, необходимо немного изменить код.

Во-первых, вам нужно передать форму комментария на страницу сведений о статье. Так изменитьarticle_detailПосмотреть:

article/views.py

...
# 引入评论表单
from comment.forms import CommentForm

...
# 文章详情
def article_detail(request, id):
    ...
    
    # 引入评论表单
    comment_form = CommentForm()
    context = { 
        ...
        'comment_form': comment_form,
    }
    ...

потомdetail.htmlОсновная часть исходной формы комментария (то есть та, что написана в предыдущей главе<textarea>) заменяются следующим образом:

templates/article/detail.html

...

<!-- 发表评论 -->
<form ...>
{% csrf_token %}
    <div class="form-group">
        <label for="body">...</label>
        
        <!-- 将之前的<textarea>替换掉 -->
        <!-- <textarea type="text" 
                       class="form-control" 
                       id="body" 
                       name="body" 
                       rows="2"></textarea>  -->
        <div>
            {{ comment_form.media }}
            {{ comment_form.body }}
        </div>
        
    </div>
    <!-- 提交按钮 -->
    ...                   
</form>

...

один из нихcomment_form.mediaэто код рендеринга самого редактора,comment_form.bodyполе текста комментария.

Взгляните на эффект:

img

Да, редактором можно нормально пользоваться, но есть небольшая проблема: кажется, что ширина редактора не адаптивна, а большое пустое пространство справа слишком расточительно. Так держать.

адаптивная ширина

Сначала установите ширину в файле конфигурации какauto, мы сделали этот шаг.

Сам редактор Ckeditor имеетinline-blockстиль, препятствующий адаптивному эффекту, необходимо использоватьJqueryСинтаксис очищает это. Добавьте код внизу страницы сведений:

templates/article/detail.html

<!-- 注意这是错误的示范！ -->

...
<!-- 新增代码 -->
<script>
    $(".django-ckeditor-widget").removeAttr('style');
</script>

<!-- 这个已经有了 -->
{% endblock content %}

$Символы представляют операторы Jquery. Это предложение означает: найти страницуclass='django-ckeditor-widget'контейнер, затем удалите контейнерstyleАтрибуты.

Вроде бы и нет проблемы, но баг кроется в деталях. Обратите внимание, что это оператор Jquery, поэтому его необходимо загрузить перед запуском.Jquery.js. Однако при отображении страницы она содержит$Приговор{% block content %}будет вставлен вbase.htmlшаблонJquery.jsПеред меткой оператор не вступит в силу, а консоль сообщит$ is not definedошибка.

Самый простой способ — упомянуть тег, введенный в Jquery.js, в верхнюю позицию и загрузить его до того, как будет вставлен шаблон блока. Проблема в том, что файлы JS обычно загружаются медленно и блокируют код позади, замедляя общую скорость загрузки страницы. В данной статье такой подход не используется.

Решение находится вbase.htmlДобавлено в специальное для сращиванияJavaScriptРасположение скрипта с именем{% block script %}. Обратите внимание, что он должен быть помещен вJqueryПосле этикетки:

templates/base.html

...

<body>
    ...
    <!-- 已有代码 -->
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
    ...
    <!-- 新增代码 -->
    {% block script %}{% endblock script %}
</body>

потомdetail.htmlПоместите код JS в этот блок:

templates/article/detail.html

...

{% block script %}
<script>
    $(".django-ckeditor-widget").removeAttr('style');
</script>
{% endblock script %}

Этот метод может гибко определять порядок выполнения JS-скриптов, и код выглядит чище. Рекомендуется вставлять таким образом весь JS-код.

Обновите страницу, и редактор сможет адаптироваться к ширине:

img

Разместите комментарий с блоком кода, страница сведений будет выглядеть так:

img

Суммировать

Теперь как посты в блогах, так и комментарии к ним можно красиво оформить. Для некоторых людей, которым не нравится Markdown, можно использовать даже записи в блогах.django-cdeditorПредоставлен форматированный текстовый редактор. Я сам до сих пор склонен использовать Markdown для написания статей: эффективность написания важнее, чем хороший внешний вид, и почти все основные веб-сайты поддерживают Markdown, поэтому очень удобно публиковать на нескольких платформах.

  • Если у вас есть какие-либо вопросы, пожалуйстаЛичный сайт ДьюсиОставьте сообщение, и я отвечу как можно скорее.
  • Или напишите мне: dusaiphoto@foxmail.com
  • Полный код проекта:Django_blog_tutorial

благодарныйЛичный блог Аарона ЧжаоДана ссылка на эту статью. Также блогер объяснил настройки загрузки картинок в django-ckeditor, если вам интересно, то можете перейти на более подробную информацию.

Категории