Advanced editor with BBCode - color and size buttons?

Caylus

So I've found that in plugins ->editor ->class.editor.plugin.php I can edit getAllowedEditorActions to enable a color button.
('color' => true).

But if I use the BBCode inputformatter, that button doesn't seem to do anything.

Anyone an idea how to adapt the advanced editor so that it'll add a "color=" bb tag when you press a certain color button?

Also, is there a button already for text size I can activate somewhere?

Thanks in advance for any ideas

River

@Caylus said
So I've found that in plugins ->editor ->class.editor.plugin.php I can edit getAllowedEditorActions to enable a color button.

('color' => true).

or you could use https://vanillaforums.org/addon/aeconfig-plugin instead of editing plugin directly.

But if I use the BBCode inputformatter, that button doesn't seem to do anything.

True. it probably only works with wyiswyg due to js to handle for bbcode does not exist in the plugin

Anyone an idea how to adapt the advanced editor so that it'll add a "color=" bb tag when you press a certain color button?

Also, is there a button already for text size I can activate somewhere?

no buttons for size (except for h1 and h2 which is not presented in markdown) but there are some classes allowed for different text sizes when used with span.

Thanks in advance for any ideas

h e llo w orld

Someone might have a solution. I see that you are up against 3 factors.

creating a new toolbar item or clicking an existing toolbar item and having it insert a bbcode, as well as making sure the js converts it to a whitelisted item.

you pretty much have to use classes and assign them to spans, otherwise you would could get XSS attacks with the style command, and you wouldn't want user to use unlimited font-size probably.

if you look at the editor js you see it uses different js depending on the formatter.

you see depending upon wysiwyg vs. bbcode different js files get loaded.

so you need to either add some js to do what you might want to do probably based on the js that is loaded

e.g. wysihtml5-0.4.0pre.js does the work for the wysiwyg combined with the whitelisting of advanced.js

and BBCode uses buttonbar.plus.js to translate and act upon things.

https://github.com/vanilla/vanilla/blob/Vanilla_2.2.1/plugins/editor/js/editor.js#L1754

so you can add things and change arrays with public function EditorPlugin_InitEditorToolbar_Handler

then you need to make sure your js interacts properly and translates to a whitelisted item.

you can look at sketchfab addon on integrating to toolbar and you can look at premhide or spoiler for other ideas to replace things.

you could also try adding bbcode as a case but it will probably break other things.

https://github.com/vanilla/vanilla/blob/Vanilla_2.2.1/plugins/editor/js/editor.js#L1511

regarding colors you could make a dropdown menu with new color and values and test for operation the way buttonbar.plus.js

although ultimately I think someday the editor will be cleaned up and the disparate parts cleaned up.

X

kind or ironic though, to use bbcode format period for new posts, when you have a toolbar menu to produce the effects one-click with other formatters.

River

@Caylus said:
So I've found that in plugins ->editor ->class.editor.plugin.php I can edit getAllowedEditorActions to enable a color button.
('color' => true).

But if I use the BBCode inputformatter, that button doesn't seem to do anything.

Anyone an idea how to adapt the advanced editor so that it'll add a "color=" bb tag when you press a certain color button?

Since the colors grid was implemented for the wysiwyg and the js associated with it, you would need to know how to trigger on that.

But, if you wanted to modify with a suboptimal work-around

https://github.com/vanilla/vanilla/blob/master/plugins/editor/js/buttonbarplus.js#L418

and add your own case statements. did a couple of examples for you. But if you decide to do it you or someone else would need to add whatever you need and/or figure out how to add a separate workig color box and font-size dropdown.

for the bbcode look for this

            PerformBBCode: function(TextArea, Operation, Value) {
                bbcodeOpts = {
                    opener: '[',
                    closer: ']'
                }
                switch (Operation) {

then add your case statements to do what you want.

                     case 'color-red':
                        var thisOpts = $.extend(bbcodeOpts, {
                            prefix: '',
                            opentag: 'color=red',
                            closetag: 'color',
                            opener: '[',
                            closer: ']'
                        });
                        $(TextArea).insertRoundTag('', thisOpts);
                        break;


                      case 'color-blue':
                        var thisOpts = $.extend(bbcodeOpts, {
                            prefix: '',
                            opentag: 'color=blue',
                            closetag: 'color',
                            opener: '[',
                            closer: ']'
                        });
                        $(TextArea).insertRoundTag('', thisOpts);
                        break;

                        case 'xx-large':
                        var thisOpts = $.extend(bbcodeOpts, {
                            prefix: '',
                            opentag: 'span class="post-font-size-xx-large"',
                            closetag: 'span',
                            opener: '<',
                            closer: '>'
                        });
                        $(TextArea).insertRoundTag('', thisOpts);
                        break;

                      case 'xx-small':
                        var thisOpts = $.extend(bbcodeOpts, {
                            prefix: '',
                            opentag: 'span class="post-font-size-xx-small"',
                            closetag: 'span',
                            opener: '<',
                            closer: '>'
                        });
                        $(TextArea).insertRoundTag('', thisOpts);
                        break;

and create a plugin to add options to the toolbar.

public function EditorPlugin_toolbarConfig_handler($sender) {

        $MoreFormats = array(
          'color-separator' => array(
            'text' => '',
            'command' => '',
            'value' => '',
            'class' => 'dd-separator',
            'html_tag' => 'div',
            'sort' => 7
         ),
         'color-red' => array(
            'text' => t('Font Color 1') . '- <span class="cell-color-red">__<span>',
            'command' => 'color-red',
            'value' => 'color-red',
            'class' => '',
            'sort' => 6
         ),

            'color-blue' => array(
            'text' => t('Font Color 2') . '- <span class="cell-color-blue">__<span>',
            'command' => 'color-blue',
            'value' => 'color-blue',
            'class' => '',
            'sort' => 6
         ),
          'size-separator' => array(
            'text' => '',
            'command' => '',
            'value' => '',
            'class' => 'dd-separator',
            'html_tag' => 'div',
            'sort' => 5
         ),

          'xx-large' => array(
            'text' => t('Extra Extra Large', 'XX-Large'),
            'command' => 'xx-large',
            'value' => 'xx-large',
            'class' => '',
            'sort' => 4
         ),

         'xx-small' => array(
            'text' => t('Extra Extra Small', 'XX-Small'),
            'command' => 'xx-small',
            'value' => 'xx-small',
            'class' => '',
            'sort' => 4
         )





        );
        $Formats = & $sender->EventArguments['format'];
        $Formats = array_merge($Formats, $MoreFormats);
        $sender->EventArguments['format']  = $Formats;



}

so for every option, there is an operation in buttonbar-plus.js

ideally clone the plugin. or remove the editor.js and create a new editor.js that loads your new
buttonbar-NEW-plus.js

removejsfile editor.js
addjsfile neweditor.js (that has the lazy load buttonbar-NEW-plus.js)

https://vanillaforums.org/discussion/comment/243214/#Comment_243214

above code would produce this option in button bar and the resulting code in box during edit

and after post.

for the colors it would produce the bbcode tags that get converted.

for the size you would need to use html spans and classes but you could could create your own for font-zsize probably other than the xx-small x-small small smaller medium large x-large xx-large larger,

or you could add the bbcode option with wysiwyg and use the other js in the wysiwyg, whatever works for you.

Caylus

Thanks River!

I'm aware of the irony to use bbcode format period for new posts, when I have a toolbar menu to produce the effects one-click with other formatters : P

But the other plugins only work with BBCode, so c'est la vie, sadly.

Thanks!