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:

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

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.

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

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!

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

is this problem solved ?

Yes,it is marked as solved.