Добавление html-тега и стиля в Textarea редактора CKEditor

Я использую django ckeditor, возможно ли добавить html и css в textarea? Что-то вроде этого:

enter image description here

Вы можете использовать пользовательский CKEDITOR.stylesSet в своем проекте, определяя теги и их атрибуты в js-файле:

// file living, e.g in static/js/ckeditor-styles.js
CKEDITOR.stylesSet.add('mystyles', [

  { name: 'Párrafo sin margen', element: 'p', attributes: { 'class': 'p-nomargin' } },
  { name: 'Enlace opinión', element: 'p', attributes: {'class': 'opinion__link'}},
  { name: 'Enlace opinión2', element: 'p', attributes: {'class': 'opinion__link--linea'}},
])

Далее необходимо добавить этот файл в раздел stylesSet словаря CKEDITOR_CONFIGS, в файл settings.py. Помните, что contentCss нужен для того, чтобы правильно просматривать стили в виджете редактора и виджете 'Styles' на панели инструментов. Вот пример моей конфигурации ckeditor:


CKEDITOR_CONFIGS = {
    'default': {
        # 'toolbar': 'full',
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike'],
            ['Undo', 'Redo'],
            ['Link', 'Unlink', 'Anchor', 'Image', 'image2', 'addFile', 'Iframe',
             'Table', 'HorizontalRule'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-',
             'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
             '-', 'Blockquote', 'CreateDiv', 'ShowBlocks'],
            ['RemoveFormat', 'SpecialChar', 'TextColor', 'BGColor',
             '-', 'PasteCode', 'Source', 'Maximize']
        ],
        'stylesSet': 'mystyles:%sjs/ckeditor-styles.js' % STATIC_URL,
        'width': 1000,
        'bodyClass': 'article__body detail',
        'contentsCss': ['%scss/ckeditor-css.css' % STATIC_URL],
        'allowedContent': False,
        'extraPlugins': 'image2,pastecode',
        # 'enterMode': 1  # CKEDITOR.ENTER_P(1), CKEDITOR.ENTER_BR(2), CKEDITOR.ENTER_DIV(3)
    },
}

И вот результат:

Screenshot of the widget

Вернуться на верх