How do you add a custom button for staff only to the message editor?

Hi

Please read this: https://help.forumotion.com/t128220-easy-write-for-staff-on-editor

Regards,
Pizza Boi

Hello ddoesmc,

You can try this :
It is a snippet from a project I was working on.

Administration Panel > Modules > Javascript codes management > Create a new script

Title : what you wish
Placement : In all the pages

Code:

$(window).load(function() {
    var settings = {
       img : 'backgroud img for button',
       title : 'title of button',
       message : 'moderation message'
    };
    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>');
       $('.sceditor-button-message').click(function() {
           $('#text_editor_textarea').sceditor('instance').insertText(settings["message"],'');
       });
    }
});

In the code are some settings you can modify :

Code:

   var settings = {
       img : 'backgroud img for button',
       title : 'title of button',
       message : 'moderation message'
    };

img : the url of the image that you want the button to show
title : the title displayed when hovering over the button
message : the message you want inserted into the editor on click

Hi how do I add more then one moderation message?

You would need to turn it into a dropdown list. You would then need to add to the html, and functions that input the messages.

Example :

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(); });
    }
});

I will try this
Edit: I just want text no background

ddoesmc wrote:I will try this
Edit: I just want text no background

I did not comprehend.

Care to explain what you mean ?

Just like a drop down with a list of texts no image etc.

add this :

Code:

$(window).load(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(); });
    }
});

What part do I edit to make the list of texts?  

Replace your last code in javascripts management.

At the bottom I have written the functions for when you click the list items. They're marked with the ID #M1, #M2, #M3. In the instance 'insertText' you'll see 'message 1' that is the texts you edit.

You can also edit the list itself, it is appended from the body.

Does this work on all forum types? Or just phbb3?

If the forum contains the SCEditor it should work. The list is a bit different from my actual project since I didn't include the full style for this.

Topic Solved   
Thanks to all!

Welcome

Topic solved and archived