Difference between revisions of "User:King of Herdaz/Toolbar customization"

From The Coppermind
Jump to navigation Jump to search
(Created page with "WIP of a guide to customizing the editing toolbar")
 
m (a start)
Line 1: Line 1:
 
WIP of a guide to customizing the editing toolbar
  
WIP of a guide to customizing the editing toolbar
  +
  +
== Basic ==
  +
Add the following to your <code>/common.js</code> page:
  +
  +
<pre>
  +
//customize toolbar
  +
var customizeToolbar = function() {
  +
/* Your code goes here */
  +
</pre>
  +
  +
Followed by this:
  +
  +
<pre>
  +
};
  +
/*
  +
* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar...
  +
* Don't touch below this line!
  +
*/
  +
if (['edit', 'submit'].indexOf(mw.config.get('wgAction')) !== -1) {
  +
mw.loader.using('user.options').then(function() {
  +
// This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
  +
if (mw.user.options.get('usebetatoolbar') == 1) {
  +
$.when(
  +
mw.loader.using('ext.wikiEditor'), $.ready
  +
).then(customizeToolbar);
  +
}
  +
});
  +
}
  +
</pre>
  +
  +
You will place any modifications to the toolbar that you make between these two sections.
  +
  +
== Sample buttons ==
  +
Simply paste any of these premade buttons into your <code>/common.js</code> page between the two basic sections to add it to your toolbar.
  +
  +
=== Image template ===
  +
Clicking this button will paste the {{t|image}} template on to the page, encapsulating your cursor or whatever you have highlighted.
  +
  +
For example, if you have <code><nowiki>Shallan.jpg</nowiki></code> highlighted when you press the button it will result in this: <code><nowiki>{{image|Shallan.jpg|side=|width=|caption}}</nowiki></code>
  +
  +
<pre>
  +
// Adding image template button to the "main" section
  +
$('#wpTextbox1').wikiEditor('addToToolbar', {
  +
section: 'main',
  +
group: 'insert',
  +
tools: {
  +
"category": {
  +
label: 'Image template',
  +
type: 'button',
  +
icon: '//upload.wikimedia.org/wikipedia/commons/d/d8/Vector_toolbar_insert_image_button.png',
  +
action: {
  +
type: 'encapsulate',
  +
options: {
  +
pre: '{' + '{image|',
  +
post: '|side=|width=|caption}}'
  +
}
  +
}
  +
}
  +
}
  +
});
  +
</pre>
  +
  +
=== Category ===
  +
This button will paste <code><nowiki>[[Category:</nowiki></code> and <code><nowiki>]]</nowiki></code> around your highlighted text.
  +
  +
<pre>
  +
// Adding category button to the "main" section
  +
$('#wpTextbox1').wikiEditor('addToToolbar', {
  +
section: 'main',
  +
group: 'insert',
  +
tools: {
  +
"category": {
  +
label: 'Category',
  +
type: 'button',
  +
icon: '//upload.wikimedia.org/wikipedia/commons/2/2d/Button_clipboard_category.png',
  +
action: {
  +
type: 'encapsulate',
  +
options: {
  +
pre: "[[Category: ",
  +
post: "]]"
  +
}
  +
}
  +
}
  +
}
  +
});
  +
</pre>

Revision as of 04:40, 7 October 2021

WIP of a guide to customizing the editing toolbar

Basic

Add the following to your /common.js page: 

//customize toolbar
var customizeToolbar = function() {
  /* Your code goes here */

Followed by this: 

};
/* 
 * Check if view is in edit mode and that the required modules are available. Then, customize the toolbar...
 * Don't touch below this line!
 */
if (['edit', 'submit'].indexOf(mw.config.get('wgAction')) !== -1) {
  mw.loader.using('user.options').then(function() {
    // This can be the string "0" if the user disabled the preference ([[phab:T54542#555387]])
    if (mw.user.options.get('usebetatoolbar') == 1) {
      $.when(
        mw.loader.using('ext.wikiEditor'), $.ready
      ).then(customizeToolbar);
    }
  });
}

You will place any modifications to the toolbar that you make between these two sections.

Sample buttons

Simply paste any of these premade buttons into your /common.js page between the two basic sections to add it to your toolbar.

Image template

Clicking this button will paste the {{image}} template on to the page, encapsulating your cursor or whatever you have highlighted.

For example, if you have Shallan.jpg highlighted when you press the button it will result in this: {{image|Shallan.jpg|side=|width=|caption}} 

  // Adding image template button to the "main" section
  $('#wpTextbox1').wikiEditor('addToToolbar', {
    section: 'main',
    group: 'insert',
    tools: {
      "category": {
        label: 'Image template',
        type: 'button',
        icon: '//upload.wikimedia.org/wikipedia/commons/d/d8/Vector_toolbar_insert_image_button.png',
        action: {
          type: 'encapsulate',
          options: {
            pre:  '{' + '{image|',
            post: '|side=|width=|caption}}'
          }
        }
      }
    }
  });

Category

This button will paste [[Category: and ]] around your highlighted text. 

  // Adding category button to the "main" section
  $('#wpTextbox1').wikiEditor('addToToolbar', {
    section: 'main',
    group: 'insert',
    tools: {
      "category": {
        label: 'Category',
        type: 'button',
        icon: '//upload.wikimedia.org/wikipedia/commons/2/2d/Button_clipboard_category.png',
        action: {
          type: 'encapsulate',
          options: {
            pre:  "[[Category: ",
            post: "]]"
          }
        }
      }
    }
  });
Retrieved from "https://coppermind.net/wiki/?title=User:King_of_Herdaz/Toolbar_customization&oldid=155968"