Wiki

Clone wiki

sprint.editor / CkeditorInTextBlock

Подключаем ckeditor в текстовом блоке вместо trumbowyg.

Пример кастомизации стандартного блока без изменения структуры материала.

1) Копируем папку bitrix/admin/sprint.editor/blocks/text

в local/admin/sprint.editor/blocks/text

2) Подключаем в конфиге блока внешние скрипты ckeditor через cdn или из локальной директории

Правим local/admin/sprint.editor/blocks/text/config.json

{
  "title": "Текст",
  "sort": "20",
  "js": [
    "https://cdn.ckeditor.com/ckeditor5/29.1.0/classic/ckeditor.js"
  ]
}

3) Инициализируем ckeditor5 в скрипте текстового блока

Правим local/admin/sprint.editor/blocks/text/script.js

sprint_editor.registerBlock('text', function ($, $el, data, settings) {
        data = $.extend({
            value: ''
        }, data);

        let editor;

        this.getData = function () {
            return data;
        };

        this.collectData = function () {
            data.value = editor.getData();
            return data;
        };

        this.afterRender = function () {
            ClassicEditor
                .create(
                    $el.find('.sp-text').get(0)
                ).then(newEditor => {
                editor = newEditor;
            });
        };
    }
);

Результат

Selection_012.png

Настройка плагинов редактора https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html

Updated