Extending Rich Text Editor - dark/light background

Tips and Tricks
#1

Hi all,

Sometimes you need to add white or very light text into form widget richeditor.

I have added button which help switch from white background to black background.

Use below code for Plugin.php inside boot() . adjust path to JS file as you need

public function boot()
{
    \Backend\FormWidgets\RichEditor::extend(function($controller) {
        $controller->addJs('/plugins/magnetica/stranky/assets/js/rteextendbuttons.js', ['defer' => true]);
    });
}

Then create rteextendbuttons.js

oc.richEditorRegisterButton('mgDarkMode', {
    title: 'DARK MODE',
    icon: '<i class="icon-moon"></i>',
    undo: false,
    focus: true,
    refreshOnCallback: false,
    callback: function () {
        var $iframe = this.$iframe;
        var $target = $iframe ? $iframe.contents().find('body') : this.$wp.find('.fr-element');
        var isDark = $target.hasClass('dark-mode');
        var $btnWrap = this.$tb.find('.fr-command[data-cmd="mgDarkMode"]');
        var $btn = $btnWrap.find('i');

        if (isDark) {
            $target.removeClass('dark-mode').css({ 'background-color': '', 'color': '' });
            $btn.attr('class', 'icon-moon');
            $btnWrap.attr('title', 'DARK MODE');
        } else {
            $target.addClass('dark-mode').css({ 'background-color': '#1e1e1e', 'color': '#d4d4d4' });
            $btn.attr('class', 'icon-lightbulb');
            $btnWrap.attr('title', 'LIGHT MODE');
        }
    }
});

Add mgDarkMode button into richeditor toolbarButtons or globally from backend settings ,Editor settings, and then tab ,Toolbar Buttons,