Rich Text Editor options

[ghost]

Hi,

The default rich text editor is very great in backend, but it have not enough option available.
It would be aswome if there were options to choose what is displayed in the toolbar.

For now, I must edit your rich text editor js script to disable media manager buttons.

I see there are 5 options when redactor script is loaded : fullscreen, figure, table, pagelinks and mediamanager. It could be easier if we can modify them directly in the form yaml configuration file.

Thanks for reading,
I love your work !

[jwilson8767]

This is already on the General Todo list. #858

That said, I plan to address several issues with RichEditor this week. What sort of buttons would you like to display?

[daftspunk]

Waiting on #1744 #2005

[daftspunk]

After #2005, it is now possible to define the toolbar buttons in the form field definition. See Backend > Forms docs for more info.

Option	Description
toolbarButtons	which buttons to show on the editor toolbar.

The available toolbar buttons are:

fullscreen, bold, italic, underline, strikeThrough, subscript, superscript, fontFamily, fontSize, |, color, emoticons, inlineStyle, paragraphStyle, |, paragraphFormat, align, formatOL, formatUL, outdent, indent, quote, insertHR, -, insertLink, insertImage, insertVideo, insertAudio, insertFile, insertTable, undo, redo, clearFormatting, selectAll, html

Note: | will insert a vertical separator line in the toolbar and - a horizontal one.

[LukeTowers]

Support for changing the global default toolbar buttons has been added in dfcf324 by @Harti

[jvanremoortere]

The docs mention you can use the 'inlineStyle' button but can't seem to figure out how to config these styles...

Defining them as mentioned at https://www.froala.com/wysiwyg-editor/examples/inline-styles doesn't seem to work in this case.

<script>
        $(function() {
            $('div.field-richeditor').froalaEditor({
                inlineStyles: {
                    'Big Red': 'font-size: 20px; color: red;',
                    'Small Blue': 'font-size: 14px; color: blue;'
                }            
            })
        });
    
    </script>

[LukeTowers]

@goeroe you would set that up in the editor settings: http://example.com/backend/system/settings/update/october/backend/editor. Alternatively, you can access the Froala editor directly by extending the DEFAULTS object in JS:

+function ($) { "use strict";
    $(document).render(function() {
        if ($.FroalaEditor) {
            $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, {
                inlineStyles: {
                    'Big Red': 'font-size: 20px; color: red;',
                    'Small Blue': 'font-size: 14px; color: blue;'
                }
            });
        }        
    })
}(window.jQuery);

[richardwo]

@LukeTowers I'd like to enable the pastePlain option on Froala to remove formatting - where would JS like your example need to go in an October site?

[LukeTowers]

put it in a JS file that your plugin extends the Backend\Classes\Controller class to add the script file.

[LukeTowers]

Example as asked for via email:
JS File (plugins/myauthor/myplugin/assets/js/froala.js)

+function ($) { "use strict";
    $(document).render(function() {
        if ($.FroalaEditor) {
            $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, {
                inlineStyles: {
                    'Big Red': 'font-size: 20px; color: red;',
                    'Small Blue': 'font-size: 14px; color: blue;'
                }
            });
        }        
    })
}(window.jQuery);

Extending the backend controller to include your JS file on every backend page (Note, you should be more selective what pages you include it on, i.e. if you just want to add it to your plugin, then extend only your plugin's controllers)
Plugin.php (plugins/myauthor/myplugin/plugin.php):

public function boot()
{
    \Backend\Classes\Controller::extend(function($controller) {
        $controller->addJs('/plugins/myauthor/myplugin/assets/js/froala.js');
    });
}

[LukeTowers]

@arashonline please don't hijack old unrelated issues, make new issues instead or ask for help on Slack.