Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Advanced editor with BBCode - color and size buttons?

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 :D

Comments

  • RiverRiver MVP
    edited September 2016

    @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.

    Pragmatism is all I have to offer. Avoiding the sidelines and providing centerline pro-tips.

  • 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!

Sign In or Register to comment.