Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] How to add buttons in your SCEditor



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


Tutorial: How to add buttons in your SCEditor (Quick reply and New Topic form)

This tutorial will allow you to add many buttons in your editor if you need to.


--> Tutorials, tips and tricks <--
How to add buttons in your SCEditor (Quick reply and New Topic form)



- Javascript
Code:
[panda=js]$(function(){
  $(function(){
    $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="Title of Button"><div unselectable="on" style="background-image:url(image.png)">Button Name</div></a>').insertBefore('.sceditor-button-size').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[example]","[/example]");
     });
      });
      });
So to explain now:

- [ic]<a class="sceditor-button sceditor-button-code"[/ic] -This red colored text mean's the position where new buttons will be added, for example if you write code then in your editor it will be next to code button.

- [ic]title="Title of Button">[/ic] - Name it as you wish, when someone mouseover button text will be shown.

- [ic]<div unselectable="on" style="background-image:url(image.png)">Button Name</div>[/ic]
Red text means, this will be the image of your button (recommended size 16x16 )
Green text means, it will be the Button Name.

- [ic]$('#text_editor_textarea').sceditor("instance").insertText("[example]","[/example]");[/ic] [example][/example] means this will be shown in quick reply or new topic when someone click the button. If you have HTML enabled you can use something like [ic]<span class="info">Info field</span>[/ic]

Example of my old Info, Locked and Solved buttons:
Code:
[panda=js]$(function(){
  $(function(){
    $('<a class="sceditor-button sceditor-button-sucesso" unselectable="on" title="Solved"><div unselectable="on" style="background-image:url(http://i.imgur.com/EISZPwN.png)">Solved</div></a>').insertBefore('.sceditor-button-size').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=solved][tr][td]","[/td][/tr][/table]");
     });
 
    $('<a class="sceditor-button sceditor-button-aviso" unselectable="on" title="Lock"><div unselectable="on" style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Locked</div></a>').insertAfter('.sceditor-button-sucesso').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=lock][tr][td]","[/td][/tr][/table]");
     });
     $('<a class="sceditor-button sceditor-button-info" unselectable="on" title="Info"><div unselectable="on" style="background-image:url(http://i.imgur.com/40zM1qS.png)">Info</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=info][tr][td]","[/td][/tr][/table]");
     });
    });
      });



© PunBB Design



If you have any questions related to this topic create a topic with the following title:
How to add buttons in your SCEditor (Quick reply and New Topic form)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  tommycoo

avatar
Punbb Senior
Punbb Senior
Tested on my forum and it does'nt work Smile

Powered by PunBB
Currently 0 users have thanked tommycoo for this post:

3
Offline

  Shadow

avatar
Administrator
Administrator
@tommycoo wrote:[link="/t319-javascript-how-to-add-buttons-in-your-sceditor#2094"]Tested on my forum and it does'nt work Smile
I've tested it too and seems to work,

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

4
Offline

  kite trojan

avatar
Punbb Rookie
Punbb Rookie
so only staff could use this?

Powered by PunBB
Currently 0 users have thanked kite trojan for this post:

5
Offline

  Shadow

avatar
Administrator
Administrator
@kite trojan wrote:[link="/t319-javascript-how-to-add-buttons-in-your-sceditor#2289"]so only staff could use this?
It's visible to everyone.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

6
Offline

  Michael_vx

avatar
Punbb Junior
Punbb Junior
hi can i make some buttons for stuff only and some for everyone
or that is not possible ?

Powered by PunBB
Currently 0 users have thanked Michael_vx for this post:

7
Offline

  DaViD-DaViD

avatar
Pemanently Banned
Pemanently Banned
I Liked this tutorial! Shadow is a best developer of punbb.biz!

Powered by PunBB
Currently 0 users have thanked DaViD-DaViD for this post:

8
Offline

  smejker

avatar
Punbb Rookie
Punbb Rookie
I like this... but I want some else. How to put in SCEditor "Undo & Redo" button...
And... how to change height and width of SCEditor... but not height and width of quick reply...
I Want to change height and width of Full SCEditor..
Thanks in advance!

Powered by PunBB
Currently 0 users have thanked smejker for this post:

9
Offline

  abed_abed

avatar
Newbie
Newbie
شكراً
*You have received an infraction* All publicly displayed messages are only limited to English.

Powered by PunBB
Currently 0 users have thanked abed_abed for this post:

10
Offline

  Fibo

avatar
Newbie
Newbie
How do I make it only show on new topic form?

Thanks,

Powered by PunBB
Currently 0 users have thanked Fibo for this post:

11
Offline

  Forumotion

avatar
Punbb Rookie
Punbb Rookie
This is a great tutorial.

Powered by PunBB
Currently 0 users have thanked Forumotion for this post:

12
Offline

  Guest

avatar
Guest
@Fibo wrote:[link="/t319-javascript-how-to-add-buttons-in-your-sceditor#3621"]How do I make it only show on new topic form?

Thanks,
Put javascript placement on all pages.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

13
Offline

  BSG*

avatar
Newbie
Newbie
Great job.

Powered by PunBB
Currently 0 users have thanked BSG* for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum