Интеграция wysiwyg редактора с Django. Обзор

    Одно из самых частых требований заказчика — wysiwyg редактор в админке. Wysiwyg редактор имеет (как правило) интуитивно понятный интерфейс и позволяет пользователям, не знающим html, подготовить текст для размещения на сайте. Редакторы позволяют: форматировать текст, вставлять изображения и таблицы, создавать списки и много другое. Но имеют и свои минусы, самый главный из них, пожалуй, большое количество лишнего html кода.
    На сегодняшний день существует большое количество различных wysiwyg редакторов и приложений для интеграции этих редакторов с django. Сегодня я расскажу про самые популярные.
    Помимо собственно разметки текста, на практике важными характеристиками wysiwyg редактора для клиента являются — удобная вставка изображений и перенос отформатированного текста из сторонних источников (Word, веб-ресурсы). Важно чтобы при переносе отформатированного текста редактор удалял стили, которые могут конфликтовать со стилями сайта, например, шрифт текста. Во время обзора приложений особое внимание будет уделено этим двум характеристикам.

    django-tinymce


    image

    Ссылка: github.com/aljosa/django-tinymce

    В качестве редактора используется TinyMce 3.5.8 — www.tinymce.com

    Пожалуй самый популярный редактор и самое популярное django приложение в этой области. TinyMce — хорошо расширяемый редактор, для которого создано большое количество плагинов, тем и шаблонов.

    Особенности приложения:
    — отличная документация;
    — хорошая поддержка;
    — проверка орфографии (требуется подключение словарей);
    — отсутствует возможность загрузки файлов (распространенное решение — установка плагина filebrowser github.com/sehmaschine/django-filebrowser);
    — использует версию tinymce 3.5.8 (последняя версия на данный момент — 4.0.10);
    — очистка стилей источника:
    TINYMCE_DEFAULT_CONFIG = {
    	'plugins': 'paste',
    	'paste_remove_styles': 'true',
    	'paste_remove_styles_if_webkit': 'true',
    	'paste_strip_class_attributes': 'all',
    }
    


    django-markitup


    image

    Ссылка: bitbucket.org/carljm/django-markitup

    В качестве редактора используется MarkItUp 1.1.14 — markitup.jaysalvat.com/home

    MarkItUp — мощный редактор, который поддерживает большое количество языков разметки, таких как: html, textile, wiki syntax, markdown, bbcode. Редактор очень гибок в настройке. Markitup — единственный не wysiwyg редактор в обзоре. В этом есть как плюсы: на выходе получается более «чистый» html код, удобно создавать свои расширения. Так и минусы — менее очевидный результат для пользователя. Эту проблему частично решает функция ajax предпросмотра.

    В качестве альтернативы django-markitup существует проект django-markdown, он хоть и является более популярным на github, но давно не обновлялся.

    Особенности приложения:
    — активно поддерживаеся и развивается;
    — отсутствие функции загрузки файлов (можно использовать приложение django-adminfiles от того же автора bitbucket.org/carljm/django-adminfiles);
    — очистка стилей источника: не требуется.

    django-ckeditor


    image

    Ссылка: github.com/riklaunim/django-ckeditor

    В качестве редактора используется Ckeditor 4.2.1 — ckeditor.com

    Довольно мощный и при том легковесный редактор. Имеется большое количество скинов и плагинов. Проект — форк давно не обновляющегося проекта github.com/shaunsephton/django-ckeditor. Из основных улучшений: поддержка Django 1.6, обновлен Ckeditor до версии 4.2.1 и добавлена поддержка Django storage API. В PyPI проект доступен под названием django-ckeditor-updated.

    Особенности приложения:
    — присутствует возможность загрузки файлов;
    — очистка стилей источника:
    CKEDITOR_CONFIGS = {
        'default': {
            'forcePasteAsPlainText': True
        }
    }
    
    (стоит отметить, что при этой опции Ckeditor вставляет свои стили для отображения текста).

    django-wysiwyg-redactor


    image

    Ссылка: github.com/douglasmiranda/django-wysiwyg-redactor

    В качестве редактора используется RedactorJS 7.6.3 — redactorjs.com

    Минималистичный редактор, присутствует возможность подключения плагинов. Отлично реализованная загрузка файлов с поддержкой drag&drop. Редактор сменил лицензию, новые версии стали платными, поэтому обновление версии редактора в проекте (текущая версия — 9.1.7) не предвидится.

    Особенности приложения:
    — активно поддерживается;
    — отличная реализация загрузки изображений (drag&drop);
    — очистка стилей источника:
    REDACTOR_OPTIONS = {'removeStyles': True}
    


    django-summernote


    image

    Ссылка: github.com/lqez/django-summernote

    В качестве редактора используется Summernote 0.4.1 — hackerwins.github.io/summernote

    Summernote — простой и минималистичный редактор использующий Twitter Bootstrap.
    Приложение активно развивается, но на данный момент содержит мелкие недоработки. Например периодически возникают ошибки в javascript коде, при вставке изображений.

    Особенности приложения:
    — активно поддерживается и развивается;
    — отличная реализация загрузки изображений (drag&drop, поддерживается multiupload);
    — содержит недоработки;
    — очистка стилей источника: не предусмотрено.

    В данном обзоре были представлены популярные приложения для интеграции wysiwyg редакторов и django. Скриншоты редакторов представлены в конфигурации «из коробки». Стоит отметить, что все редакторы предоставляют гибкую систему настроек, а так же API для возможности расширения стандартной функциональности. В заключение приведем таблицу со сравнением ключевых особенностей приложений:
    django-tinymce django-markitup django-ckeditor django-wysiwyg-redactor django-summernote
    Особенности редактора Самое большое количество расширений и тем Поддержка нескольких языков разметки Минималистичный дизайн, широкий функционал Минималистичный дизайн. Стал платным Использует Twitter Bootstrap
    Вставка изображений Необходима установка плагина Необходима установка плагина + С поддержкой drag&drop C поддержкой drag&drop и multiupload
    Стабильность + + + + -
    Удаление стилей при вставке отформатированного текста + не требуется вставляет свои стили + -
    • +15
    • 22,6k
    • 8
    Hot Dot Production 29,38
    Компания
    Поделиться публикацией
    Комментарии 8
    • 0
      Для тех, кто, как и я, заинтересовался текстом: это Терри Пратчетт. Кот без дураков.
      • +2
        есть еще простейшая интеграция с nicedit, но порой этого вполне хватает:
        pypi.python.org/pypi/django-nicedit

        > drug&drop
        &Rock'n'roll!
        • 0
          Есть еще pencil/django-pencil — легковесный очень. я его правда чуток переделал для себя под стиль bootstrap.
          • 0
            Вроде неплохой редактор, но смущает то, что проект давно не обновлялся…
          • 0
            > drug&drop

            опечатка. Drug = наркотик :)
            Наконец-то нашёл то, что искал долго — удобная загрузка. В Mezzanine чтобы вставить 1 картинку, нужно тыкать мышью раз 7.
            • 0
              Поправил, спасибо!)
            • 0
              Спасибо за обзор!
              Пользовался tinymce (в чистом виде и приделывал к нему django) и django-ckeditor из коробки.
              Самое на мой взгляд востребованная и в тоже время проблемная функция — это загрузка картинок удобным для пользователя способом.
              Причем чтобы исходные картинки можно было ужимать до нужного размера перед вставкой и возможно поворачивать, чтобы пользователю до загрузки не приходилось делать это в графическом редакторе на десктопе.

              Какой по вашему из представленных редакторов наиболее подходит для удобной загрузки картинок (с ужатием на сервере и т.д.)
              • 0
                Из коробки ни один редактор из обзора не обладает такими функциями… это все умеет django-filebrowser: можно выбрать размер изображения из заданных заранее в настройках, можно повернуть изображение, а так же есть еще несколько полезных функций.
                Но назвать загрузку изображений, при использовании этого плагина, удобной, я не могу…

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое