[Tutorial] Text Shortcuts

Create a new SCEditor button to define text shortcuts!
There are pre-defined shortcuts for everyone, and also every user can define his own shortcuts.

Here's how it works, it's very easy:
To insert an existing shortcut you simply click the new shortcut icon, select one of the options and click Insert: The text will be inserted in your text area automatically.
To create a new shortcut click in the + button and define its name and content (you can copy/paste from your textarea). After that, click Create.
To delete an existing shortcut click in the - button. You can only delete your shortcuts, not the pre-defined ones via script.

Image:

The user can define as many shortcuts as he wants.
The user-defined shortcuts are stored in a hidden profile field, so they will not be removed even if he clears the forum cookies or browser cache.

Now I'll tell you how to insert this.

1) Create the profile field

To do that you have to go to:
Users & Groups  Users  Profiles  Profile fields  Add

Most important label is the 'Display', which must be picked in Profile and not picked in Messages.

Image:

2) Get the ID of the profile field

You have to inspect the element in a profile page of the forum itself, as far as I know it's the only way...
There you will see which ID corresponds to this field, that's a crucial step.

Image:

3) Add this in your CSS

Go to Display  Colors  CSS Stylesheet

This is used to hide the field in the profiles directly. They are also removed via javascript but without this they would still be visible while loading the profile page.
This code uses the field ID (in my case it's 2) so you will have to replace it for the one you got.

Code:

#field_id2, #field_id2 + .separator { display: none; }

4) Create a new Javascript

Modules  HTML & Javascript  Javascript codes management

Title: Text Shortcuts
Placement: In all the pages

Code:

/*
* -- Text Shortcuts --
* Version: 1.1 EN (2018-05-17)
* Author: Wecoc
* Description: New BBCode to insert user-defined shortcuts
*
* User-defined shortcuts are stored in a profile field using Ange Tuteur's method:
* http://fmdesign.forumotion.com/t559-solved-using-ajax-to-modify-user-profile#8706
*/
 
$(function() {
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  // Define your version.
  // 0: phpBB2, 1: phpBB3, 2: punBB, 3: Invision, 4: modernBB
  var version = 1,
 
  // Default shortcuts (if any). Set it to [] if you don't want default shortcuts.
  default_shortcuts = [
    ["Hello World", "[b]This is an example[/b]"]
  ],
 
  // Shortcuts only for admins. Set it to [] if you don't want admin shortcuts.
  admin_shortcuts = [
    ["Spam", "[color=#ff3300][b]Please don't make spam[/b][/color]"],
    ["Flood", "[color=#ff3300][b]Please don't make flood[/b][/color]"]
  ],
 
  // ID of the profile field used to store the user shortcuts
  sp_id = 2,
 
  // Set here the texts to be displayed in your language
  lang = {
    insert:    "Insert",
    tooltip:  "Shortcuts",
    shortcuts: "Shortcuts:",
    add:      "Add shortcut",
    remove:    "Remove shortcut",
    name:      "Name:",
    content:  "Content:",
    create:    "Create"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  // Hide shortcuts field in profile
  var shortcut_field = document.querySelector('#field_id' + sp_id);
  var separator = document.querySelector('#field_id' + sp_id + ' + .separator');
  if (separator) separator.remove();
  if (shortcut_field) shortcut_field.remove();
  var shortcut_profile = document.querySelector('#profile_field_13_' + sp_id);
  if (shortcut_profile) shortcut_profile.parentElement.parentElement.remove();
 
  // Get shortcuts from profile field
  if (!$.sceditor) return;
  var user_shortcuts;
  $.get('/u' + _userdata.user_id, function(d) {
    var s = $('#field_id' + sp_id + ' dd input', d); if (!s) return;
    s = s[0].value; if (!s) s = "[]";
    user_shortcuts = JSON.parse(s);
  });
 
  // Set shortcuts back to the profile field (function)
  $.getScript('http://illiweb.com/rs3/25/frm/jquery/json/jquery.json-1.3.min.js', function() {
    window.$updateField = function(o, callback) {
      var c = new Array(),
          admin = $('a[href^="/admin/index.forum"]')[0],
          logout = document.getElementById('logout');
 
      c.push(new Array(o.name, o.value));
 
      $.post('/ajax_profile.forum?jsoncallback=?', {
            id : o.id.substring(8, o.id.length),
          user : o.user_id,
        active : '1',
        content : $.toJSON(c),
            tid : admin ? admin.href.replace(/.*?tid=(.*)/,'$1') : logout ? logout.href.replace(/.*?tid=(.*?)&.*/,'$1') : ''
      }, function(d) {
        callback && callback(d);
      }, 'json');
    };
    'par ange tuteur';
  });
 
  // Set new BBCode icon
  $('head').append($('<style>', {
    text: '.sceditor-button-shortcuts div{background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/shortc10.png) !important}'
  }));
 
  $.sceditor.command.set('shortcuts', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var a = document.createElement('DIV'), b = document.createElement('SELECT'), i;
      a.innerHTML = '<label unselectable="on">' + lang.shortcuts + '</label>';
      $(b).addClass("shortcut-select");
      ShortcutRefreshSelector(b);
      b.style.width = "100%";
      a.appendChild(b);
      editor.createDropDown(caller, 'shortcuts', a);
   
      // Create (+) button
      var plus = document.createElement('DIV');
      plus.innerHTML = '<img src="https://i62.servimg.com/u/f62/14/49/87/10/splus10.png" title="' + lang.add + '" alt="add"/>';
      plus.style.display = "inline-block";
      plus.style.margin = "2px";
      plus.style.cursor = "pointer";
      plus.onclick = function(){
        if (!document.querySelector('.shortcut-new')){
          ShortcutCreateNew(this);
        } else {
          document.querySelector('.shortcut-new').remove();
        }
      };
      a.appendChild(plus);
   
      // Create (-) button
      var minus = document.createElement('DIV');
      minus.innerHTML = '<img src="https://i62.servimg.com/u/f62/14/49/87/10/sminus10.png" title="' + lang.remove + '" alt="remove"/>';
      minus.style.display = "inline-block";
      minus.style.margin = "2px";
      minus.style.cursor = "pointer";
      minus.onclick = function(){ if (GetShortcutType(b.value) == 'user') { RemoveShortcut(b.value) }};
      a.appendChild(minus);
      ShortcutRefreshMinus();
   
      // Create insert button
      var c = document.createElement('DIV');
      c.innerHTML = '<input type="button" class="button" value="' + lang.insert + '">';
      c.onclick = function() {
        var index, text;
        index = parseInt(b.value.match(/\d+/)[0]);
        if (GetShortcutType(b.value) == 'default') {
          text = default_shortcuts[index][1];
        } else if (GetShortcutType(b.value) == 'admin') {
          text = admin_shortcuts[index][1];
        } else if (GetShortcutType(b.value) == 'user') {
          text = user_shortcuts[index][1];
        }
        callback(text);
        editor.closeDropDown(true);
        return false;
      };
      a.appendChild(c);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('shortcuts').dropDown(editor, caller, function(text) {
        editor.insert(text, '', true, true, true);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('shortcuts').dropDown(editor, caller, function(text) {
        editor.insert(text, '', true, true, true);
      });
    },
    tooltip : lang.tooltip
  });
  toolbar = toolbar.replace(/removeformat/,'removeformat,shortcuts'); // add the button to the toolbar
 
  function GetShortcutType(val) {
    if (val.includes('d')) {
      return 'default';
    } else if (val.includes('a')) {
      return 'admin';
    } else if (val.includes('u')) {
      return 'user';
    }
  }
 
  function ShortcutCreateNew(caller) {
    var new_div = document.createElement('DIV');
    $(new_div).addClass("sceditor-dropdown shortcut-new");
    new_div.style.padding = "10px";
    var a = document.createElement('DIV');
    a.innerHTML = '<label unselectable="on">' + lang.name +
      '</label><input type="text" class="inputbox" name="shortcut-name" value=""><label unselectable="on">' + lang.content +
      '</label><textarea class="inputbox" name="shortcut-content" rows="4"></textarea>';
    var c = document.createElement('DIV');
    c.innerHTML = '<input type="button" class="button" value="' + lang.create + '">';
    c.onclick = function() {
      var name = document.querySelector('input[name="shortcut-name"]').value;
      var content = document.querySelector('textarea[name="shortcut-content"]').value;
      AddShortcut(name, content);
      new_div.remove();
    };
    a.appendChild(c);
    new_div.appendChild(a);
    $(caller).after(new_div);
  }
 
  function ShortcutRefreshMinus() {
    var dropdown = document.querySelector('.sceditor-shortcuts'); if (!dropdown) return;
    var b = dropdown.querySelector('SELECT'), minus = dropdown.querySelector('img[alt="remove"]');
    if (GetShortcutType(b.value) == 'user') {
      minus.style.filter = 'opacity(1.0)';
    } else {
      minus.style.filter = 'opacity(0.3)';
    }
    setTimeout(function (){ ShortcutRefreshMinus() }, 200);
  }
 
  function ShortcutRefreshField() {
    $updateField({
      id: 'field_id' + sp_id,
      name: 'profile_field_13_' + sp_id,
      user_id: _userdata.user_id,
      value : JSON.stringify(user_shortcuts)
    });
  }
 
  function ShortcutRefreshSelector(selector) {
    selector.innerHTML = "";
    // Insert default shortcuts
    for (i = 0; i < default_shortcuts.length; i++) {
      var o = document.createElement('OPTION');
      o.value = 'd' + i;
      o.innerHTML = default_shortcuts[i][0];
      selector.appendChild(o);
    }
    // Insert admin shortcuts
    if (_userdata.user_level == 1) {
      for (i = 0; i < admin_shortcuts.length; i++) {
        var o = document.createElement('OPTION');
        o.value = 'a' + i;
        o.innerHTML = admin_shortcuts[i][0];
        selector.appendChild(o);
      }
    }
    // Insert user shortcuts
    for (i = 0; i < user_shortcuts.length; i++) {
      var o = document.createElement('OPTION');
      o.value = 'u' + i;
      o.innerHTML = user_shortcuts[i][0];
      selector.appendChild(o);
    }
  }
 
  function AddShortcut(name, content) {
    if (!name || !content) return;
    content = content.replace(new RegExp(/\n/, 'gm'), "<br>");
    content = content.replace(new RegExp(/\"/, 'gm'), "&" + "quot;");
    user_shortcuts.push([name, content]);
    var selector = document.querySelector('.shortcut-select');
    ShortcutRefreshField();
    ShortcutRefreshSelector(selector);
  }
 
  function RemoveShortcut(option) {
    var index = parseInt(option.match(/\d+/)[0]);
    user_shortcuts.splice(index, 1);
    var selector = document.querySelector('.shortcut-select');
    ShortcutRefreshField();
    ShortcutRefreshSelector(selector);
  }
});

The configuration part is in the beginning of the script, just follow the instructions inside the code.
There you have to set:
- The forum version
- Default shortcuts
- Default shortcuts (for admins only)
- ID of the profile field (same as before)
- Texts (language)

That's all, if there's any problem please tell me

Nice! *10*

thanks i can confirm this is working on punbb version

So, in summary this is a "draft".. right ?
Good job dude

This was great, man!

Keep up the good work

New version 1.1 now available!
There was a bug in Internet Explorer causing the Dropbox to not always show up. It's fixed now.