Как настроить всплывающее окно с помощью кнопки панели инструментов в Kentico.EMS12.MvcComponents.Widget.RichText

Question

Недавно я добавил пакет nuget для Kentico.EMS12.MvcComponents.Widget.RichText, чтобы воспользоваться преимуществами нового основанного на froala виджета и встроенного редактора. Эта версия (на основе документации froala) очень настраиваема. К сожалению, реализация пакета nuget, по-видимому, скрыла базовую библиотеку froala, поэтому большая часть документации froala не применима. Мне было любопытно, если бы кто-нибудь мог сказать мне, как я могу go сделать вызовы, чтобы настроить команду панели инструментов. Большая проблема, с которой я столкнулся при моих первых попытках, заключалась в том, что я не мог получить доступ к базовой библиотеке froala, что означает, что я не мог выполнять вызовы, перечисленные в документации (например, для добавления команды). Я смотрел на использование события, но все еще не смог запустить код в соответствующем контексте.

Answer 1

Настройка виджета Rich text - совершенно новая функция, которая только что была задокументирована здесь: https://github.com/Kentico/ems-mvc-components/wiki/Implementing-Rich-text-editor-plugins.

Kentico пропустит объект FroalaEditor в качестве параметра функции в ваш плагин. Ваш плагин может быть помещен в регистр расширенных текстовых плагинов См plugins.push(myButtonPlugin);

(function (pageBuilder) {
    var richTextEditor = pageBuilder.richTextEditor = pageBuilder.richTextEditor || {};
    var plugins = richTextEditor.plugins = richTextEditor.plugins || [];

    var sampleButtonPlugin = function (FroalaEditor) {
            FroalaEditor.DefineIcon("sampleButtonIcon", { NAME: "star", SVG_KEY: "help" });
            FroalaEditor.RegisterCommand("sampleButton", {
                title: "Sample Button",
                icon: "sampleButtonIcon",
                callback: function () {
                    // Use the current context to work with the content of the inline editor.
                    console.log(this.html.get());
                }
            });
        };
    plugins.push(myButtonPlugin);
})(window.kentico.pageBuilder);