Staff button on text editor
5 posters
Page 1 of 1
Staff button on text editor
Hello Forumltion,
I come here with a probloem:I want to make a staff button on the text editor which shows a table like this:
The code I have is this:
EDIT:The table I want:
I come here with a probloem:I want to make a staff button on the text editor which shows a table like this:
- Code:
[table class="moderation-message" style="width: 100%;background: #3399CC;margin-top: 5px;margin-bottom: 5px;border-bottom: 3px solid #2579A2;padding: 5px;border-radius: 4px;font-weight: bold;color: #fff;font-size: 12px;text-shadow: 1px 1px 3px rgba(0,0,0,0.1);font-family: Trebuchet MS, Helvetica, Arial, sans-serif"][tr][td width="1%"][img]IMGLINK[/img][/td]
[td]Salut(Hello),
### Editable message 2 ###
[i]=> ####$Editable message 2###[/i][/td]
[/tr]
[/table]
The code I have is this:
- Code:
$(function() {
var settings = {
img : 'backgroud img for button',
title : 'title of button'
};
if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
$('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
$('body').append('<div id="messageList" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="M1" class="listItem" style="cursor:pointer;">Message 1</div><div id="M2" class="listItem" style="cursor:pointer;">Message 2</div><div id="M3" class="listItem" style="cursor:pointer;">Message 3</div></div>');
$('.sceditor-button-message').click(function() {
var display = $('#messageList').css('display');
if (display == 'none') {
var Y = $(this).offset().top;
var X = $(this).offset().left;
$('#messageList').show().offset({top:Y + 25,left:X});
}
else { $('#messageList').hide(); }
});
$('#M1').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('Message 1',''); });
$('#M2').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('Message 2',''); });
$('#M3').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('Message 3',''); });
$('.listItem').click(function() { $(this).parent().hide(); });
}
});
EDIT:The table I want:
Last edited by m0bber on November 16th 2015, 3:05 pm; edited 3 times in total
Re: Staff button on text editor
Hi @m0bber,
Have you tried the answer in this topic ? It should be better since it adds a condensed list of presets into a single button.
Have you tried the answer in this topic ? It should be better since it adds a condensed list of presets into a single button.
Re: Staff button on text editor
Thanks for the response,Ange,however I have a problem
The code is not copying the right text,it doesn't write the text completely.It seems like it doesn't coppy the image BBCode.Instead of [.img]image link[/img] it copies [img]http: .It seems like it doesn't coppy some of the BBCodes.
What it copies:
What it should have copied:
***Code deleted by user***
The code is not copying the right text,it doesn't write the text completely.It seems like it doesn't coppy the image BBCode.Instead of [.img]image link[/img] it copies [img]http: .It seems like it doesn't coppy some of the BBCodes.
What it copies:
What it should have copied:
***Code deleted by user***
Last edited by m0bber on November 16th 2015, 2:56 pm; edited 1 time in total
Re: Staff button on text editor
Guys,I found the solution!
To make the code coppy the right text(the img bbcode) you must replace the
For example
Hope this can help some of you.The topic can be closed now!
EDIT:The right table code
don't forget to edit the "IMGLINK".
To make the code coppy the right text(the img bbcode) you must replace the
- Code:
[img]IMG LINK[/img]
- Code:
<img src="IMG LINK">
For example
- Code:
[img]http://i21.servimg.com/u/f21/11/80/17/98/garbag11.png[/img]
- Code:
<img src="http://i21.servimg.com/u/f21/11/80/17/98/garbag11.png">
Hope this can help some of you.The topic can be closed now!
EDIT:The right table code
- Code:
[table class="moderation-message" style="width: 100%;background: #3399CC;margin-top: 5px;margin-bottom: 5px;border-bottom: 3px solid #2579A2;padding: 5px;border-radius: 4px;font-weight: bold;color: #fff;font-size: 12px;text-shadow: 1px 1px 3px rgba(0,0,0,0.1);font-family: Trebuchet MS, Helvetica, Arial, sans-serif"][tr][td width="1%"]<img src="IMGLINK">[/td][td]Salut(Hello),
### Editable message 2 ###
[i]=> ####$Editable message 2###[/i][/td][/tr][/table]
don't forget to edit the "IMGLINK".
Re: Staff button on text editor
i worked on the code
this is css file
- Code:
.info{width: 100%;background: #3399CC;margin-top: 5px;margin-bottom: 5px;border-bottom: 3px solid #2579A2;padding: 5px;border-radius: 4px;font-weight: bold;color: #fff;font-size: 12px;text-shadow: 1px 1px 3px rgba(0,0,0,0.1);font-
family: Trebuchet MS, Helvetica, Arial, sans-serif; background: url() no-repeat 6px 100%#3399CC ; }
.solved
{width: 100%;background: #41cc33;margin-top: 5px;margin-bottom: 5px;border-bottom: 3px solid #25a24d;padding: 5px;border-radius: 4px;font-weight: bold;color: #fff;font-size: 12px;text-shadow: 1px 1px 3px rgba(0,0,0,0.1);font-family: Trebuchet MS, Helvetica, Arial, sans-serif; }
.lock{width: 100%;background: #f04242;margin-top: 5px;margin-bottom: 5px;border-bottom: 3px solid #d20f0f;padding: 5px;border-radius: 4px;font-weight: bold;color: #fff;font-size: 12px;text-shadow: 1px 1px 3px rgba(0,0,0,0.1);font-family: Trebuchet MS, Helvetica, Arial, sans-serif;}
and java scripte
- Code:
jQuery(window).load(function() {
if (typeof _userdata === "undefined") return;
if ((_userdata['user_level'] == '1') || (_userdata["user_level"] == '2')) {
jQuery('body').append('<div id="fa_modtable" class="select" style="visibility:hidden;width:auto;text-align:left;"><div class="rndmtablex" id="rndmtable1">Solved/Accept</div><div class="rndmtablex" id="rndmtable2">Warning</div><div class="rndmtablex" id="rndmtable3">Information</div>');
jQuery('.sceditor-group:last-child').after('<div class="sceditor-group" id="fa_modtools"><a class="sceditor-button" title="Mod Tables" onclick="selectWysiwyg(this, \'fa_modtable\');"><div style="background:url(http://i56.servimg.com/u/f56/18/45/41/65/modera10.png) no-repeat center;"></div></a></div>');
jQuery('#rndmtable1').click(function() { jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="solved"][tr][td width="1%"]<img src="http://i21.servimg.com/u/f21/11/80/17/98/solved10.png">[/td]
[td]','[/td][/tr][/table]');});
jQuery('#rndmtable2').click(function() { jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="lock"][tr][td width="1%"]<img src="http://i21.servimg.com/u/f21/11/80/17/98/garbag11.png">[/td]
[td]','[/td][/tr][/table]');});
jQuery('#rndmtable3').click(function() { jQuery('#text_editor_textarea').sceditor('instance').insertText('[table class="info"][tr][td width="1%"]<img src="http://i21.servimg.com/u/f21/11/80/17/98/10oqv711.png">[/td]
[td]','[/td][/tr][/table]'); });
jQuery('.rndmtablex').click(function() { jQuery('#fa_modtable').css('visibility','hidden'); });
}
});
preview
- img:
Re: Staff button on text editor
Topic solved and archived
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Editor Text Color
» Easy write for staff on editor
» Staff colors without changing them in the editor
» Fast BBCodes for Staff in posts on editor
» Change Quote Button, Edit Button and more into the text
» Easy write for staff on editor
» Staff colors without changing them in the editor
» Fast BBCodes for Staff in posts on editor
» Change Quote Button, Edit Button and more into the text
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum