adding BBCode buttons to toolbar of SC Editor?

[Julius_2000]

Ok: For some reason (i think it was an addtional "id" element that I had inserted in the format section of the javascript file next to "class" which tripped it up), the button is no longer grayed out and the tag can now be used via the button. In my case  [ispoil]...[/ispoil]. But the wrapped element does not get its own div and class, that I defined in the javascript file. Thus, the string is simply shown wrapped by the tags.

What do I need to do to let the java take effect and create a div for the wrapped element and let the tags disappear?

[Kindred]

If you are adding a button that is going to trigger a BBC -- then you have to ALSO add the code to parse the BBC in Subs.php

[Julius_2000]

Awesome, thank you so much! Now I can at least get the first step of my idea to work! I followed the examples in the Sub.php and was able to establish the div and class for my button.

[Sesquipedalian]

You're now asking questions on a different subject. You should ask them in a new topic.

[Julius_2000]

I'm sorry! I will. Thanks!

[Julius_2000]

One minor issue I have with my new button is: When I try to modify a message, each (text) element that is wrapped with the BBcode gets a line break. I can see the correct layout for a second and then it converts it.

This does not happen in quick edit where the text and its BBcodes stay in line.

Quick edit
You cannot view this attachment.

Full modify
You cannot view this attachment.

[live627]

Can you post your code? (Your previous posted code seems to have been sacrificed to the gods of the void)

[Julius_2000]

Did anyone split the topic? I can't remember opening a seperate one..

Can you post your code? (Your previous posted code seems to have been sacrificed to the gods of the void)

Yeah, of course!

The code was adapted from the HTML button mod

The xml file

Code Select Expand

[...]
<install for="2.1 RC1 - 2.1.99">
<readme type="file" parsebbc="true">readme.txt</readme>
<require-file name="inlineSP.php" destination="$sourcedir" />
<require-file name="inlineSP.js" destination="$themedir/scripts" />
<require-file name="inlineSP.png" destination="$imagesdir/bbc" />
<require-file name="inlineSP.english.php" destination="$languagedir" />
<require-file name="inlineSP_remove.js" destination="$themedir/scripts" />
<hook hook="integrate_bbc_buttons" function="iSpoiler_bbc_buttons" file="$sourcedir/inlineSP.php" />
<hook hook="integrate_credits" function="iSpoiler_credits" file="$sourcedir/inlineSP.php" />
</install>
<uninstall for="2.1 RC1 - 2.1.99">
<hook hook="integrate_bbc_buttons" function="iSpoiler_bbc_buttons" file="$sourcedir/inlineSP.php" reverse="true" />
<hook hook="integrate_credits" function="iSpoiler_credits" file="$sourcedir/inlineSP.php" reverse="true" />
<remove-file name="$sourcedir/inlineSP.php" />
<remove-file name="$themedir/scripts/inlineSP.js" />
<remove-file name="$imagesdir/bbc/inlineSP.png" />
<remove-file name="$languagedir/inlineSP.english.php" />
<remove-file name="inlineSP_remove.js" destination="$themedir/scripts" />
</uninstall>

This is the php file

Code Select Expand

function iSpoiler_bbc_buttons(&$bbc_tags, &$editor_tag_map)
{
    global $context, $editortxt;

    // This language file contains the description text for the button
    loadLanguage('inlineSP');

    $context['bbc_tags'][count($context['bbc_tags']) - 1][] = array(
        // Required
        'image' => 'inlineSP', // Name of PNG file to use for button icon
        'code' => 'ispoil',
        'description' => $editortxt['inlineSP'],

        // Deprecated. Define these in the JavaScript file instead.
        // 'before' => '[ispoil]',
        // 'after' => '[/ispoil]',
    );

    loadJavaScriptFile('inlineSP.js', array('minimize' => true),'smf_htmlbutton');
}


This is the .js file

Code Select Expand

// Defines the formatting info that SCEditor uses to render a BBCode in the editor.
// See https://www.sceditor.com/documentation/custom-bbcodes for info.
sceditor.formats.bbcode.set(
    'ispoil', {
        // The HTML tags that this command will act on when toggling view modes.
        tags: {
            div: {   
                class: 'inlineSP'
               
            }
        },
        // Called when toggling from WYSIWYG mode to source mode.
        format: function (element, content) {
            return '[ispoil]' + content + '[/ispoil]';
        },
        // Called when toggling from source mode to WYSIWYG mode.
        html: function (token, attrs, content) {
            return '<div class="inlineSP">' + content + '</div>';
        },
        // Other options
        allowsEmpty: true,
        isInline: true
    }
);

// Defines the command info that SCEditor uses when the user clicks a BBCode's button.
// See https://www.sceditor.com/documentation/custom-commands for info.
sceditor.command.set(
    'ispoil', {
        // Called when editor is in WYSIWYG mode.
        exec: function() {
            // The insert() method lets you define opening and closing BBC strings, which
            // will be rendered according to the formatting info defined for that BBC.
            // For more advanced possibilites, such as defining the exact HTML you want
            // to use, see the SCEditor documentation.
            this.insert('[ispoil]', '[/ispoil]');
        },
        // Called when editor is in source mode.
        txtExec: function() {
            this.insert('[ispoil]', '[/ispoil]');
        }
    }
);

And this is the code I added to Subs.php

Code Select Expand

[...]
$codes = array(
            array(
                'tag' => 'ispoil',
                'before' => '<span class="inlineSP ihide">',
                'after' => ' </span>',
                'quoted' => 'optional',
            ),


[Julius_2000]

Observing FF's inspector, I noticed that while in the regular editor, it keeps adding a div with a <br> element each time I press the source view toggle button to switch back to WYSIWYG mode.
So I guess when I try modifying a post, the "modify" logic does as well switch from text to WYSIWYG mode and thus adding these div elements.

EDIT:
I think I might have found the "error": I replaced the div tag in the .js file with a span and now everything stays the way it's intented.