Fast BBCodes for Staff in posts

Hello,

I've seen on some other forums (Gameforge ones) that they use some quick bbcodes for staff members in the posts and the have specific fonts/color/size etc.

For example, a Staff User named MrMind would use the quick bbcode in the sceditor
[mmd]text[/mmd]
Or a Staff User named Steve would use the quick bbcode in the sceditor
[ste]text[/ste]
and the text would automatically change font/color/size etc while these specific font/color/size etc where different for each one.

Ex. In editor will be shown: [mmd]text[/mmd] but this would give the result to the post: text

Code:

[color=#0033cc][font=Comic Sans MS][size=16]text[/size][/font][/color]

& In editor will be shown: [ste]text[/ste] but this would give the result to the post: text

Code:

[size=16][font=Georgia][color=#ff6600][b]text[/b][/color][/font][/size]

Question: Is there a way that we could have this effect on our forums?

Hello,

Yes this is possible I'll give you the code when I'm back cuz I got to go now.

OK thank you Mati!

Isn't that like when they do <div class="Classname">Text</div> and in their CSS stylesheet they'll style it something like this.

Code:

div .Classname {
  background-color: #9ccf5a;
  border: 1.5px solid;
  border-radius: 4px;
  border-color: #000000;
  float: left;
  padding-top: 5px;
  padding-right: 8px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-top: 4px;
  margin-left: 2px;
}

Feel free to use this. Change "Classname" and ".Classname" to any name you wish.

Similar, but the one i am talking about, instead of writing <div class="classname">text</div> you only write [mmd]text[/mmd]. 

I really want to know how to do that because i am fascinated by that.
I was aware of that stylish way but honestly i am not really into that because one mistake can confuse everything. But still if i don't find anything i will be using that! 
Me greatest thanks for your reply.



MrMind

https://help.forumotion.com/t9834p30-custom-bbcode?highlight=bbcode


other then that u might be able to use like a replace option with js

Look, i don't know that much about javascripts.
If it is possible to do what i want with them then i would be please to learn how to do that. But the easiest way to think of it is:

By writing in the sceditor [bbc]text[/bbc] or something else, then the javascript will replace the [bbc] with the #bbc{style} that i wrote in the CSS via the div classes.

Ex. I added the div class Ramdaman provided.
<div class="bbc">text</div>
and i added in the CSS:
.bbc{style}
Then the javascript must know that even if i write <div class="bbc">text</div> or [bbc]text[/bbc] that it would be the same thing. Because it is easier to write [bbc]text[/bbc] then the javascript should see that because i wrote [bbc] then that command would be the <div class="bbc"> and replace it with the style given in the CSS.

Is there a way to do that? If yes please tell me how to do it. Or else if someone knows an easier way i would be glad to see it.

Go in to Javascript codes management -> Create a new javascript
Title : whatever you wish
Placement : In all the pages

Code:

jQuery(window).load(function() {
        /* mod text */
        jQuery('body').append('<div id="fa_modtable" class="select" style="visibility:hidden;width:auto;text-align:left;"><div class="modtext" id="Text1">MrMind</div><div class="modtext" id="Text2">ste</div>');
        jQuery('.sceditor-group:last-child').after('<div class="sceditor-group" id="fa_modtools"><a class="sceditor-button" title="Mod Text" 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>');

        /* mtable functions */
        jQuery('#Text1').click(function() { /* MrMind */
        jQuery('#text_editor_textarea').sceditor('instance').insertText('[color=#0033cc][font=Comic Sans MS][size=16]text','[/size][/font][/color]
');
        });
        jQuery('#Text2').click(function() { /* ste */
        jQuery('#text_editor_textarea').sceditor('instance').insertText('[size=16][font=Georgia][color=#ff6600][b]text','[/b][/color][/font][/size]');
        });

       /* hide list onclick */
        jQuery('.modOption').click(function() { jQuery('#fa_modtable').css('visibility','hidden'); });
        });

Then CSS:

Code:

.modtext {
    color: #000;
    cursor: pointer;
    font-size: 10px;
    padding: 3px;
}
.modtext:hover {
    background: none repeat scroll 0 0 #ddd;
}
.modtext:active {
    background: none repeat scroll 0 0 #ff8;
}

You can add as many members as you want.

Ok so with this what happens? How does it work?

In the sceditor button you see this icon click on and you get the text you want.

Yeah i already have that. What i wanted is somehow if i write to the sceditor for example: [sls]text[/sls]
then the text will change based on the changed that i made for the [sls]. I dont know how to explain it else way. The only thing i can say if you didn't understand read the examples i gave. Lets hope it works!


note: i have the same image for the mod tools (info,solve,warning boxes)
p.s.: i tested the code you gave me and didn't work!

I believe those forums are using a tutorial that adds customized BBCodes.  I believe it is on Avacweb.

I don't understand what you are saying SLGray. Those BBCodes on AvacWeb are really difficult for me to understand which one to use for..

The code works fine on my forum.

Hi MrMind,

Something similar to this ?
https://help.forumotion.com/t136169-warning-button-for-administrators-and-moderators

Νo. Not at all.
Ok it is MrMind & Ange that are in the staff.
MrMind wants a fast bbcode with "mrm" and Ange wants one with "ang".
Now by setting these two variables as the bbcode (i don't know if this is the correct word), "mrm" will be set to have some specific characteristics (font/color etc.) as well as "ang". After setting that, if MrMind, writes in the editor the below text:
[mrm]text[/mrm]
then the text will reshape and take place as the characteristics of that variable was set. As well as if Ange posts:
[ang]text[/ang]


It is something like the <div class="mrm">text</div> and set the .mrm{style} in the CSS, but with less characters that i don't know if it is possible to do.

Try this, it's a modified version of the tuto I translated. ^^

Create a new script
Title : Your choice
Placement : In all the pages
Paste the code below :

Code:

$(function() {
  if (!document.getElementById('text_editor_textarea')) return;
  
  
  userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>');
  
  
  function userTag(id, tagname, image, htmlStart, htmlEnd) {
    var breg = new RegExp('\\['+tagname+'\\](.+?)\\[\\/'+tagname+'\\]','gi');
    if (_userdata.user_id === id) {
      $("#text_editor_textarea").before("<img src='"+image+"'id='"+tagname+"-b'/>");
      $('#'+tagname+'-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('['+tagname+']','[/'+tagname+']')});
    }
    $('div.postbody div').each(function () {if ($(this).text().indexOf('['+tagname+']') != -1) $(this).html($(this).html().replace(breg, htmlStart + '$1' + htmlEnd))});
  }
});

To add a new button for a specific user write :
userTag(id, tagname, image, htmlStart, htmlEnd)

id : The id of the user, it can be seen from the profil. https://help.forumotion.com/u1 1 for user 1 !

tagname : The name of your tag. Plain text like mrm, ange, me

image : The image of the button. In the default example : https://i.servimg.com/u/f39/18/21/41/30/bouton10.png

htmlStart : The starting tag of your HTML. example : <span style="color:red">

htmlEnd : The ending tags of your HTML. example : </span>

All together you will have the following !

Code:

userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>');

i would change

Code:

<span style="color:#F66;font-style:italic;">

to

Code:

<span class="angeclass">

then style it in css so its faster to make changes if need be rather then searching threw tons of js

It is an example, you do not have to do it exact. However, It is good to use a class if your style is extensive. e.g. backgrounds, animation, pseudo selectors.. ^^

Infact it is still simple to edit since it's done through arguments. That way you can write the function multiple times, and it will only execute for specific users. Additionally you can utilize comments to help remind yourself of what the function modifies..

Code:

userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>'); // ange
userTag(2,'u2', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F22;font-weight:bold;">', '</span>'); // user 2
userTag(3,'u3', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#85D;">', '</span>'); // user 3

This is only a portion, it would of course go where I have the example in the full script !

Ok this works but i have 2 questions.

1. This button is visible only to the user i set via the id?

2. Is it necessary to have the button? If i remove the button above the editor and i write by myself [mrm][/mrm] will it have the same result?

Thanks!

js

Code:

$(function() {
$('div.postbody div').each(function () {
    if ($(this).text().indexOf('[adm]') != -1) $(this).html($(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div>$1 </div></div>'));
  });
});

css

Code:

.adm_mess {
font-size:large;
  font-weight: bolder;
color:black;
  padding:10px;
 text-shadow: 1px 0px 3px #00ff00 , 0px 1px 3px #00ff00, -1px 0px 3px #00ff00,
  0px -1px 3px #00ff00, 0px 0px 10px #00ff00;
  background-color:black;
}

MrMind wrote:Ok this works but i have 2 questions.

1. This button is visible only to the user i set via the id?

2. Is it necessary to have the button? If i remove the button above the editor and i write by myself [mrm][/mrm] will it have the same result?

Thanks!

Yes i knew that twistedkilla but i want to answer these questions to go on with any other code.

the code i just gave u was without the button just using [adm] and [/adm]

as far as it showing up for only some users just switch the user and see if you can see if or not

Ok i checked it and with the button it is easier. Ange can i have the blank image of that button please?

EDIT: Never mind. I will make my ones! TOPIC SOLVED!!

Thank you all for your help with this. I really appreciate your help!
Have a great day!

here dont think angi would mind


and if u want some buttons to match ur theme or somthing just make a request in gfx section and ill make u some

i have question for you ange how would i link this to groups so i wouldnt have to type any bb code it would auto add it to any post iv ever made if im in that group

I made mines! It is ok!

thetwistedkilla wrote:i have question for you ange how would i link this to groups so i wouldnt have to type any bb code it would auto add it to any post iv ever made if im in that group

I believe you should open a new topic for your question.

MrMind wrote:Ok i checked it and with the button it is easier. Ange can i have the blank image of that button please?

EDIT: Never mind. I will make my ones! TOPIC SOLVED!!

Thank you all for your help with this. I really appreciate your help!
Have a great day!  

You're welcome ^^

Topic archived

Enjoy your weekend.