Button Creator 1.2

[cclaerhout]

cclaerhout submitted a new resource:

Button Creator - Create and use Buttons in your messages

Button Creator
By Cédric CLAERHOUT

Presentation:
A powerful and simple way to configure and create some buttons in your buttons. A user interface is available for the TinyMCE Quattro.

Installation/Update:

1. Install the "BbCodes & Buttons...

Read more about this resource...

 

[Gonanda]

@cclaerhout, this is only for TinyMCE? Or may be used in Redactor?

 

[cclaerhout]

@cclaerhout, this is only for TinyMCE? Or may be used in Redactor?

As usual, the Bb Code doesn't depend on any editor ; the user interface (Button Creator helper) is only for MCE.

Edit: to have the Bb Codes available options, just check the Bb Code help section (disabled by default for this one), it has all possible examples.

 

[cclaerhout]

cclaerhout updated Button Creator with a new update entry:

Version 1.1 released

Version 1.1 released

This update requires at least the version 2.7 of the BBM addon

• Fix a bug with colors on Internet Explorer when a RGB color was set

Read the rest of this update entry...

 

[ray6]

could you tell us how to integrate it with TinyQuatro editor so that will looks like in the attached images,

 

[cclaerhout]

could you tell us how to integrate it with TinyQuatro editor so that will looks like in the attached images,

0) Install TinyMCE Quattro and the Bbm addon
1) Import the Bb Code xml file (in the extra directory of this addon archive) with the Bbm (through the Bbm "Bb Codes Manager")
2) Use the Bbm "Buttons manager" to position the Button inside the Editor configuration
3) Use the button and creator "buttons" in your post.

 

[ray6]

But how can make it like in this picture:

i mean how to make it in this list in the editor and thank you for the reply

 

[cclaerhout]

@ray6
Did you do steps 1 & 2 of my previous message ?
Do you see the added button in the editor (toolbar or menu bar, depending on your configuration) ?

If yes, just click on it.

 

[cclaerhout]

By the way, its button icon is the "rounded star".

 

[ray6]

but watch how it looks in my site
​

 

[cclaerhout]

but watch how it looks in my site
View attachment 68789​

Why are you using the demo user interface (UI) of the TinyMCE quattro addon ? This is only for developers or advanced users who want to create their own UI. This addon Bb Code xml file is certainly not this one. One more time, download this addon. Extract the archive. There's an "extra" directory. Go inside it. You will find an xml file. This is the Bb Code xml file. Import this xml file with the Bbm Bb Codes Manager (see first attached picture). Use the Bbm Buttons Manager to position this button (check its icon - see second attached picture).

I don't know what you did, but you've looked too far. It's something actually basic to do.

 

[ray6]

Why are you using the demo user interface (UI) of the TinyMCE quattro addon ? This is only for developers or advanced users who want to create their own UI. This addon Bb Code xml file is certainly not this one. One more time, download this addon. Extract the archive. There's an "extra" directory. Go inside it. You will find an xml file. This is the Bb Code xml file. Import this xml file with the Bbm Bb Codes Manager (see first attached picture). Use the Bbm Buttons Manager to position this button (check its icon - see second attached picture).

I don't know what you did, but you've looked too far. It's something actually basic to do.

Okay, thank you Brother, it's working now, Sorry for the inconvenience ​

 

[HenrikHansen]

Installed fine, but my button links are not working, what might be the reason? I can see the button is active when hovering it. I can see no links in the html on site

<div class="bbm_button moda" >Button with link</div>
<br />
<div class="bbm_button moda" >Button with link opening in the same window</div>
<br />

 

[cclaerhout]

@HenrikHansen
You can add an url the button using this format:

[btn=http://www.xenforo.com]Test[/btn]

If you don't use the Quattro Editor UI, just look the example above.

If you use it and you've typed your button url in the second page of the overlay but the when you insert the text in your editor, the url is not there anymore, it might means you're url is not compatible with the JavaScript url regex (I wrote something in the TinyMCE faq about url & regex in JS which can't match utf8 url). You can send to me by pm so I can check. But what you can do is manually enter the url in the BB Code option (like the example above).

If even with the manual entry, the url is still not recognized it means your url doesn't match the php url regex (compatible with utf8 format). Send it to me, so I can check.

 

[HenrikHansen]

Thanks, works really fine now. . I had used

[btn=#323456|http://www.xenforo.com]Button with link[/btn]

from your example in admin-demo example box. I suggest you delete #323456 in next update, because these numbers make the examples not work.

 

[cclaerhout]

Thanks, works really fine now. . I had used

[btn=#323456|http://www.xenforo.com]Button with link[/btn]

from your example in admin-demo example box. I suggest you delete #323456 in next update, because these numbers make the examples not work.

That's a bug then, I will look at it later. Thanks !

 

[cclaerhout]

@HenrikHansen
Edit the Button Bb Code and in the "Parser Configuration Option" add as custom separator: |
It will work then. I will update the Bb Code xml to avoid this.

 

[HenrikHansen]

Thanks. One question more. If you type in codes (witthout editors), where do you type in which gradient color to use?
I can only see from examples which model. Thanks a lot for your help.

[btn=moda]Button model A[/btn]

 

[cclaerhout]

cclaerhout updated Button Creator with a new update entry:

Version 1.2 released

Version 1.2 released

• Add a missing color property
  It must have been included in one of my other addons. I need to find which one once I got back my other computer which is currently at the Lenovo/ThinkPad maintenance service (which clearly doesn't seem as good as it was in the past)
• Add a custom separator in the Bb Code xml file

Read the rest of this update entry...

 

[cclaerhout]

Thanks. One question more. If you type in codes (witthout editors), where do you type in which gradient color to use?
I can only see from examples which model. Thanks a lot for your help.

[btn=moda]Button model A[/btn]

I should have written a FAQ for this. It's quite easy, if you go to the styles properties, you can see there's 6 different models: a, b, c, d, e, f. So to change the model, just use the model name in the tag options: moda, modb, modc, modd, mode, modf. If you want a custom color, you already know it in your previous example, just use an hexa or rgb color (easier with the TinyMCE UI) in your tag options instead of the model name.