The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Staff button on text editor

5 posters

Go down

Solved Staff button on text editor

Post by m0bber 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:
staff button - Staff button on text editor Garbag11Salut(Hello),

### Editable message 2 ###

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


Last edited by m0bber on November 16th 2015, 3:05 pm; edited 3 times in total
m0bber
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 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber 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:
staff button - Staff button on text editor Garbag11Salut(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
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 November 13th 2015, 6:29 pm

staff button - Staff button on text editor Bump10
m0bber
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 November 15th 2015, 3:36 pm

i am intrestied in this as well
alla13
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

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

Back to top Go down

Solved Re: Staff button on text editor

Post by m0bber 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
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 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
alla13
Forumember

Posts : 91
Reputation : 6
Language : Arab5/5 Eng3/5 Fr2/5

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

Back to top Go down

Solved Re: Staff button on text editor

Post by Ape November 16th 2015, 9:54 pm

is this problem solved ?


staff button - Staff button on text editor Left1212staff button - Staff button on text editor Center11staff button - Staff button on text editor Right112
staff button - Staff button on text editor Ape_b110
staff button - Staff button on text editor Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Solved Re: Staff button on text editor

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

Yes,it is marked as solved.
m0bber
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 November 17th 2015, 12:52 pm

Topic solved and archived


staff button - Staff button on text editor Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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