For e.g I'd like to add another spoiler button whereby the bbcode would be:
[spoiler2=random title]your text[/spoiler2] and the output would be,
-Stephane1200
Please check:
1. go to:
Tools ->
Settings ->
Custom buttons2. click on plus
3. choose
Regular Expression4. as
Expression put:
\[spoiler2=(.*?)](.*?)\[/spoiler2]
5. as
Replacement put:
<div class="spoiler-box"><div class="spoiler-content"><input value="$1" class="spoiler_button" onclick="var tmp = this.parentElement.getElementsByTagName('div')[0]; if (tmp.style.display != ''){ tmp.style.display = '';}else { tmp.style.display = 'none';}" type="button"><div class="spoiler-content-in" style="display: none;">$2</div></div></div>
6. choose your own icon for
Button image and
Path7. click OK
In Edit area you have text which is searched for specific regular expression defined in
Expression and – if found – it is replaced with the content of
Replacement field.
The basic syntax for any custom tag is:
\[CUSTOM](.*?)\[/CUSTOM]
or:
\[CUSTOM=(.*?)](.*?)\[/CUSTOM]
You reference any
(.*?) with dollar sign and proper number like
$1 in
Replacements field.
For second paranthesis you will use
$2 of course.
At the end you may write for
Replacement something like:
<div>$1</div>
or:
<div><h2>$1</h2><p>$2</p></div>
This should put a block with title taken from first paranthesis and content – from second.
If you want some look and feel changes you will need to add proper classes to it and define them in style.css file.
For
Replacement:
<div class="my-custom"><h2>$1</h2><p>$2</p></div>
you would need to put something in style.css, ex.:
.my-custom {
background-color:yellow;
color:red;
padding:8px;
margin:0;
border:1px solid red;
}
.my-custom h2 {
font-size:16px;
border-bottom:dotted red 1px;
padding:0;
margin:0;
}
.my-custom p {
font-style:italic;
margin-top:2px;
}
And the end result would be:
