Advertisement:

Author Topic: How can I add buttons to toolbar of SC Editor?  (Read 1765 times)

Offline davidhs

  • Sophist Member
  • *****
  • Posts: 1,055
  • Gender: Male
How can I add buttons to toolbar of SC Editor?
« on: July 05, 2019, 04:54:23 PM »
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):
Code: [Select]
<?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:
Quote
Note: '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:
Code: [Select]
<?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.

Offline Sesquipedalian

  • The Mad Doctor
  • Lead Developer
  • Sr. Member
  • *
  • Posts: 943
  • Gender: Male
  • It works! ... in theory.
    • Sesquipedalian on GitHub
Re: How can I add buttons to toolbar of SC Editor?
« Reply #1 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. :)
I promise you nothing.

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

Offline davidhs

  • Sophist Member
  • *****
  • Posts: 1,055
  • Gender: Male
Re: How can I add buttons to toolbar of SC Editor?
« Reply #2 on: July 06, 2019, 01:13:47 PM »
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. :)

Offline davidhs

  • Sophist Member
  • *****
  • Posts: 1,055
  • Gender: Male
Re: How can I add buttons to toolbar of SC Editor?
« Reply #3 on: August 12, 2019, 12:29:23 PM »
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:
Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
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.

Offline Sesquipedalian

  • The Mad Doctor
  • Lead Developer
  • Sr. Member
  • *
  • Posts: 943
  • Gender: Male
  • It works! ... in theory.
    • Sesquipedalian on GitHub
Re: How can I add buttons to toolbar of SC Editor?
« Reply #4 on: August 19, 2019, 02:05:29 AM »
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.

Offline davidhs

  • Sophist Member
  • *****
  • Posts: 1,055
  • Gender: Male
Re: How can I add buttons to toolbar of SC Editor?
« Reply #5 on: August 19, 2019, 12:38:37 PM »
Yes, I think problem there is in format definitions.

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

1. Toggle mode to source view. I write:
Code: [Select]
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:
Code: [Select]
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) {

Offline Sesquipedalian

  • The Mad Doctor
  • Lead Developer
  • Sr. Member
  • *
  • Posts: 943
  • Gender: Male
  • It works! ... in theory.
    • Sesquipedalian on GitHub
Re: How can I add buttons to toolbar of SC Editor?
« Reply #6 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. :)
I promise you nothing.

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

Offline davidhs

  • Sophist Member
  • *****
  • Posts: 1,055
  • Gender: Male
Re: How can I add buttons to toolbar of SC Editor?
« Reply #7 on: August 20, 2019, 03:04:39 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. :(

Offline Sesquipedalian

  • The Mad Doctor
  • Lead Developer
  • Sr. Member
  • *
  • Posts: 943
  • Gender: Male
  • It works! ... in theory.
    • Sesquipedalian on GitHub
Re: How can I add buttons to toolbar of SC Editor?
« Reply #8 on: August 22, 2019, 04:03:01 PM »
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.