1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Button Creator 1.2

Create and insert buttons in your messages

  1. cclaerhout

    cclaerhout Well-Known Member

    QenTox likes this.
  2. resonansER

    resonansER Well-Known Member

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

    cclaerhout Well-Known Member

    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.
     
    Last edited: Feb 8, 2014
  4. cclaerhout

    cclaerhout Well-Known Member

  5. ray6

    ray6 Member

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

    cclaerhout Well-Known Member

    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 and resonansER like this.
  7. ray6

    ray6 Member

    But how can make it like in this picture:
    [​IMG]
    i mean how to make it in this list in the editor and thank you for the reply
     
  8. cclaerhout

    cclaerhout Well-Known Member

    @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.
     
  9. cclaerhout

    cclaerhout Well-Known Member

    button_creator_btn.png
    By the way, its button icon is the "rounded star".
     
  10. ray6

    ray6 Member

    but watch how it looks in my site
    Sans titre.jpg
     
  11. cclaerhout

    cclaerhout Well-Known Member

    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.
     

    Attached Files:

    • a.png
      a.png
      File size:
      43 KB
      Views:
      15
    • b.png
      b.png
      File size:
      28.8 KB
      Views:
      13
  12. ray6

    ray6 Member

    Okay, thank you Brother, it's working now, Sorry for the inconvenience :)
     
  13. HenrikHansen

    HenrikHansen Well-Known Member

    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 />
     
    Last edited: Mar 8, 2014
  14. cclaerhout

    cclaerhout Well-Known Member

    @HenrikHansen
    You can add an url the button using this format:
    Code:
    [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 likes this.
  15. HenrikHansen

    HenrikHansen Well-Known Member

    Thanks, works really fine now. :). I had used

    Code:
    [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 likes this.
  16. cclaerhout

    cclaerhout Well-Known Member

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

    cclaerhout Well-Known Member

    @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.
     
  18. HenrikHansen

    HenrikHansen Well-Known Member

    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.

    Code:
    [btn=moda]Button model A[/btn]
     
  19. cclaerhout

    cclaerhout Well-Known Member

    cclaerhout updated Button Creator with a new update entry:

    Version 1.2 released

    Read the rest of this update entry...
     
  20. cclaerhout

    cclaerhout Well-Known Member

    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.
     

Share This Page