The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Staff button on text editor

View previous topic View next topic Go down

Solved Staff button on text editor

Post by m0bber on November 11th 2015, 6:52 am

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:

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(); });
    }
});
And my question is:how can I edit the code so that it can show the table I want?

EDIT:The table I want:
Salut(Hello),

### Editable message 2 ###

=> ####$Editable message 2###


Last edited by m0bber on November 16th 2015, 3:05 pm; edited 3 times in total

m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

http://darkyx.forumer.ro

Back to top Go down

Solved Re: Staff button on text editor

Post by Ange Tuteur on November 11th 2015, 10:37 am

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber on November 11th 2015, 2:24 pm

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:
[img]http:[td]Salut(Hello)

,###Editable message 2###

=>####$Editable message 2###

What it should have copied:
Salut(Hello),

### Editable message 2 ###

=> ####$Editable message 2###

***Code deleted by user***


Last edited by m0bber on November 16th 2015, 2:56 pm; edited 1 time in total

m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

http://darkyx.forumer.ro

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber on November 13th 2015, 6:29 pm


m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

http://darkyx.forumer.ro

Back to top Go down

Solved Re: Staff button on text editor

Post by alla13 on November 15th 2015, 3:36 pm

i am intrestied in this as well

alla13
Forumember

Posts : 44
Reputation : 4
Language : arabic

http://alla-omar.mo-rpg.com

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber on November 16th 2015, 2:56 pm

Guys,I found the solution!

To make the code coppy the right text(the img bbcode) you must replace the
Code:
[img]IMG LINK[/img]
with
Code:
<img src="IMG LINK">
.
For example
Code:
[img]http://i21.servimg.com/u/f21/11/80/17/98/garbag11.png[/img]
becomes
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! Very Happy

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".

m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

http://darkyx.forumer.ro

Back to top Go down

Solved Re: Staff button on text editor

Post by alla13 on November 16th 2015, 6:03 pm

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:

alla13
Forumember

Posts : 44
Reputation : 4
Language : arabic

http://alla-omar.mo-rpg.com

Back to top Go down

Solved Re: Staff button on text editor

Post by APE on November 16th 2015, 9:54 pm

is this problem solved ?




APE
Manager
Manager

Male Posts : 8622
Reputation : 754
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber on November 17th 2015, 6:34 am

Yes,it is marked as solved.

m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

http://darkyx.forumer.ro

Back to top Go down

Solved Re: Staff button on text editor

Post by SLGray on November 17th 2015, 12:52 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36691
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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