[Tutorial] Text Shortcuts
5 posters
Page 1 of 1
[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.
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.
Users & Groups Users Profiles Profile fields Add
Most important label is the 'Display', which must be picked in Profile and not picked in Messages.
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.
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.
Title: Text Shortcuts
Placement: In all the pages
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
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 StylesheetThis 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 managementTitle: 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
Last edited by Wecoc on May 17th 2018, 9:54 pm; edited 2 times in total
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: [Tutorial] Text Shortcuts
Nice! *10*
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: [Tutorial] Text Shortcuts
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.
There was a bug in Internet Explorer causing the Dropbox to not always show up. It's fixed now.
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Similar topics
» [Tutorial] Cite Specific Text
» [Tutorial] Save text editor content
» Create shortcuts widget
» Shortcuts Widget Code
» Voice commands shortcuts [All versions]
» [Tutorial] Save text editor content
» Create shortcuts widget
» Shortcuts Widget Code
» Voice commands shortcuts [All versions]
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum