2014-02-22, 11:40
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)
How to add buttons in your SCEditor (Quick reply and New Topic form)
1º - 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]");
});
});
});
- [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) |