Update sceditor for moderator tables

Forum: https://gothicpub.forumotion.com/
Version: phpBB3

I would like to add new "image" in sceditor only for selected users (I can deal with username check). After selected users click on the button, textarea will be updated with prepared BBcode. That will make moderation much easier. No need to c/p all the time this table..

Good morning!

What about this tutorial:Warning button for Administrators and Moderators

Razor12345 wrote:Good morning!

What about this tutorial:Warning button for Administrators and Moderators

I checked it out but that's not the one I am looking for. I actually need it inside the sceditor group. Is such thing possible? I tried to append for example:

Code:

<a class="sceditor-button sceditor-button-source hover" data-sceditor-command="source" unselectable="on" title="Switch Editor Mode"><div unselectable="on">Switch Editor Mode</div></a>

This already exists but for example purposes.
And it didn't add anything. I used this as base class:

Code: div.sceditor-toolbar

I don't understand what the result should be.
Can you describe your idea in more detail and, if possible, provide screenshots?

So, inside this sceditor (or it can make a new group (better)), I add this image and once clicked, the textarea is being filled with text you see in the image. Possible?

And what's wrong with the tutorial I posted above? It performs exactly the same functionality you described.
The only difference is the location of the buttons and their styling.

Well, in a way, but these are actually added as pseudo elements, and I need them inside scediotor to workout. That's probably the only issue I am having here. I've seen the tutorial you sent but it doesn't fit excatly as I need it to be. How can my idea be achieved?

You can style those buttons into smaller images if you want to and then place them after

Code: .sceditor-group:last

instead of before

Code: .before("<img src='"+modImage+"' title='Moderator warning' id='mod-b'/>");

TheCrow wrote:You can style those buttons into smaller images if you want to and then place them after

Code: .sceditor-group:last

instead of before

Code: .before("<img src='"+modImage+"' title='Moderator warning' id='mod-b'/>");

Why is this not working:

Code:

$(function() {

    var username = _userdata.username;
    var usernames = ["The Raven", "mihai", "Unstopable Mind"];

    for (var i = 0; i < usernames.length; i++) {

        if (username == usernames[i]) {
            $(".sceditor-group:last").after("<img src='https://cdn3.iconfinder.com/data/icons/finance-152/64/26-256.png' width=20 height=20 title='Moderator tool' id='modT'/>");
        }
    }


});

Because the editor is a little bit weird when you try to apply something to it.
Try using this instead:

Code:

$(function() {
  $(function() {
    var username = _userdata.username;
    var usernames = ["The Raven", "mihai", "Unstopable Mind"];
 
    for (var i = 0; i < usernames.length; i++) {
 
        if (username == usernames[i]) {
            $(".sceditor-group:last").after("<div class="sceditor-group" id="modT"><a class="sceditor-button sceditor-button-modTool" unselectable="on" title="Moderator Tool"><img src='https://cdn3.iconfinder.com/data/icons/finance-152/64/26-256.png' width=20 height=20 /></a></div>");
        }
    }
 
  });
});

This should fix your issue.

So, I managed to add the field, but there is not image. I had to change the code you gave me because the strings required \ to ignore end of the string.

Code:

$(function() {
  $(function() {
    var username = _userdata.username;
    var usernames = ["The Raven", "mihai", "Unstopable Mind"];
 
    for (var i = 0; i < usernames.length; i++) {
 
        if (username == usernames[i]) {
            $(".sceditor-group:last").after("<div class=\"sceditor-group\" id=\"modT\"><a class=\"sceditor-button sceditor-button-modTool\" unselectable=\"on\" title=\"Moderator Tool\"><img src='https://cdn3.iconfinder.com/data/icons/finance-152/64/26-256.png' width=20 height=20 /></a></div>");
        }
    }
 
  });
});

Hi @The Raven look this SSF tutorial:

https://asistencia.foroactivo.com/t155890-anadir-boton-con-menu-desplegable-en-el-editor-para-tablas-de-moderacion-de-personales-y-otros-contenidos

Then I think you should try and display the image through CSS instead.

Code:

.sceditor-button.sceditor-button-modTool {
  background-image: url('https://cdn3.iconfinder.com/data/icons/finance-152/64/26-256.png');
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
}

jucarese wrote:Hi @The Raven look this SSF tutorial:

https://asistencia.foroactivo.com/t155890-anadir-boton-con-menu-desplegable-en-el-editor-para-tablas-de-moderacion-de-personales-y-otros-contenidos

Will check this out very soon. Thanks. It has to work. If it does, I will mark this as solved.


Okay, it works. I will do the tweaks regarding styling. Thanks a lot, solved.