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

View user profile 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 : 13244
Reputation : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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 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

View user profile 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 on text editor Bump10
m0bber
m0bber
New Member

Posts : 13
Reputation : 3
Language : Romanian

View user profile 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

View user profile 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

View user profile 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

View user profile 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 on text editor Left1212Staff button on text editor Center11Staff button on text editor Right112
Staff button on text editor Ape_b110
Staff button on text editor Keep_s10
Staff button on text editor Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 17863
Reputation : 1904
Language : fluent in dork / mumbojumbo & English haha

View user profile 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

View user profile 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 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 : 50346
Reputation : 3473
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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