News:

Wondering if this will always be free?  See why free is better.

Main Menu

How can I add buttons to toolbar of SC Editor?

Started by davidhs, July 05, 2019, 04:54:23 PM

Previous topic - Next topic

davidhs

I have one mod who add two BBC and also add two buttons to SC Editor. Now I use this function as integration hook type integrate_bbc_codes in SMF 2.1 RC2 (similar to SMF 2.0):
<?php

function bbcws_bbc_buttons(&$bbc_tags, &$editor_tag_map)
{
global $txt;

$bbc_tags[1][] = array();
$bbc_tags[1][] = array(
'code' => 'div',
'description' => $txt['style_paragraph'],
'image' => 'div',
'before' => '[div style=""]',
'after' => '[/div]',
);
$bbc_tags[1][] = array(
'code' => 'span',
'description' => $txt['style_character'],
'image' => 'span',
'before' => '[span style=""]',
'after' => '[/span]',
);
}

?>


In Sources\Subs-Editor.php, line 1581, there is this note:
QuoteNote: 'before' and 'after' are deprecated as of SMF 2.1. Instead, use a separate JS file to configure the functionality of your toolbar buttons.

I want use this new feature, writing only this:
<?php

function bbcws_bbc_buttons(&$bbc_tags, &$editor_tag_map)
{
global $txt;

$bbc_tags[1][] = array();
$bbc_tags[1][] = array(
'code' => 'div',
'description' => $txt['style_paragraph'],
'image' => 'div',
);
$bbc_tags[1][] = array(
'code' => 'span',
'description' => $txt['style_character'],
'image' => 'span',
);
}

?>


but I do not see what write in JavaScript file (perhaps this code?
Code (MyMod.js) Select

sceditor.command.set(
'div', {
txtExec: ['[div style=""]', '[/div]'],
}
);
sceditor.command.set(
'span', {
txtExec: ['[span style=""]', '[/span]'],
}
);

) and where/how link to forum.

Sesquipedalian

If you download and examine my HTML button mod, I think you will find it helpful. I made it primarily to give mod authors an example with documentation of how to do exactly this. :)
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

davidhs

Quote from: Sesquipedalian on July 06, 2019, 11:45:00 AM
If you download and examine my HTML button mod, I think you will find it helpful. I made it primarily to give mod authors an example with documentation of how to do exactly this. :)
Thank you! I looked for similar mods but I did not find anything. I will see your mod. :)

davidhs

Quote from: davidhs on July 06, 2019, 01:13:47 PM
Quote from: Sesquipedalian on July 06, 2019, 11:45:00 AM
If you download and examine my HTML button mod, I think you will find it helpful. I made it primarily to give mod authors an example with documentation of how to do exactly this. :)
Thank you! I looked for similar mods but I did not find anything. I will see your mod. :)
I applied your example (in SMF 2.1 RC2) but it do not works. :(

I use integration hooks in order to add new tags (span and div) with style and class attributes:
Code (package-info.xml, install section) Select

<hook hook="integrate_pre_include" function="$sourcedir/Subs-BBCodeWithStyle.php" />
<hook hook="integrate_bbc_buttons" function="bbcws_bbc_buttons" />
<hook hook="integrate_bbc_codes" function="bbcws_bbc_codes" />
<require-file name="Subs-BBCodeWithStyle.php" destination="$sourcedir" />
<require-file name="BBCodeWithStyle.js" destination="$themedir/scripts" />


I attach Subs-BBCodeWithStyle.php and BBCodeWithStyle.js files.

I tested these cases:

1. With style attribute (with space): Works

1. Toggle mode to source view. I write:

Text1.
[div style="margin: 10px;"]Text with style.[/div]
Text2.


2. Toggle mode to WYSIWYG. Show correct text:
Code (html) Select

Text1.
<div style="margin: 10px;" class="bbc_div">Text with style.</div>
Text2.


3. Toggle mode to source view. Show correct code:

Text1.
[div style="margin: 10px;"]Text with style.[/div]
Text2.


2. With style attribute (with not space): Works but quotes are removed in BBC

1. Toggle mode to source view. I write:

Text1.
[div style="margin:10px;"]Text with style.[/div]
Text2.


2. Toggle mode to WYSIWYG. Show correct text:
Code (html) Select

Text1.
<div style="margin:10px;" class="bbc_div">Text with style.</div>
Text2.


3. Toggle mode to source view. Show code with not quotes:

Text1.
[div style=margin:10px;]Text with style.[/div]
Text2.

I need define style as attribute with quotes, similar to bbcws_bbc_codes function (Subs-BBCodeWithStyle.php file, line 85).

3. With style attribute (with space) and class attribute: BBC is removed

1. Toggle mode to source view. I write:

Text1.
[div style="margin: 10px;" class="myclass"]Text with style.[/div]
Text2.


2. Toggle mode to WYSIWYG. Show correct text:
Code (html) Select

Text1.
<div style="margin: 10px;" class="bbc_div myclass">Text with style.</div>
Text2.


3. Toggle mode to source view. Tags are removed:

Text1.
Text with style.
Text2.

There is a JavaScript error when get value of class attribute (but always this attribute exists) in BBCodeWithStyle.js file, line 23.

Sesquipedalian

It sounds like those issues have to do with the SCEditor format definitions you created, rather than with your SCEditor commands. Studying the float BBC's format definition might be helpful as you try to solve the problem (or perhaps not).
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

davidhs

Yes, I think problem there is in format definitions.

For my case
Quote from: davidhs on August 12, 2019, 12:29:23 PM
3. With style attribute (with space) and class attribute: BBC is removed

1. Toggle mode to source view. I write:

Text1.
[div style="margin: 10px;" class="myclass"]Text with style.[/div]
Text2.


2. Toggle mode to WYSIWYG. Show correct text:
Code (html) Select

Text1.
<div style="margin: 10px;" class="bbc_div myclass">Text with style.</div>
Text2.


3. Toggle mode to source view. Tags are removed:

Text1.
Text with style.
Text2.

There is a JavaScript error when get value of class attribute (but always this attribute exists) in BBCodeWithStyle.js file, line 23.
class HTML attribute can be only one class (bbc_div) or can be this and more class (bbc_div myclass). But in format I do not know how I can put this. I write this
Code (JavaScript) Select
sceditor.formats.bbcode.set(
'div', {
tags: {
div: {
class: 'bbc_div'
}
},
format: function (element, content) {

but I need something like this (content can be bbc_div and other CSS class)
Code (JavaScript) Select
sceditor.formats.bbcode.set(
'div', {
tags: {
div: {
class: ('bbc_div', *)
}
},
format: function (element, content) {

Sesquipedalian

The SCEditor documentation, especially its Custom BBCodes page, can teach you how to do what you want. :)
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

davidhs

Quote from: Sesquipedalian on August 19, 2019, 01:05:37 PM
The SCEditor documentation, especially its Custom BBCodes page, can teach you how to do what you want. :)
Yes, I read the documentation but I do not find anything. Examples are too simple or I can not do this. :(

Sesquipedalian

First, make sure that you have the syntax right. I noticed the wrong type of brackets being used in your sample above.

Second, consider using a custom data-* attribute instead of class to identify the HTML elements that should be mapped to your custom BBCode by SCEditor. Since the formatting that SCEditor uses to render a BBCode into HTML is independent of the formatting that parse_bbc() uses, you are free to tell SCEditor to render your [div] BBC as <div data-bbctag="div" class="foo bar" style="baz: qux;">Example content</div> while telling parse_bbc() to do something different. Then you can select by data-bbctag instead of by class in your SCEditor definition.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

Randem

Sesquipedalian, Your program example was great for adding a button to the SCEditor. Clear and Precise with the explanations.
Scams - How to Protect Yourself
Why Professionals Should Not Use Free Email Accounts

Always ignore those who attempt to tell you what to think and believe those who will allow you think for yourself

Advertisement: