Difference between revisions of "User:King of Herdaz/Toolbar customization"
m |
m (→Actions) |
||
| Line 1,162: | Line 1,162: | ||
* To have an action include a line break insert <code>\n</code> into the snippet at the place you want it to be. For stylistic reasons some people will put <code>' + '</code> between instances of <code>\n</code> and other text in their snippets, but this does not have any effect on the output of the action and can be omitted if you want. |
* To have an action include a line break insert <code>\n</code> into the snippet at the place you want it to be. For stylistic reasons some people will put <code>' + '</code> between instances of <code>\n</code> and other text in their snippets, but this does not have any effect on the output of the action and can be omitted if you want. |
||
| − | * To have an action include |
+ | * To have an action include an apostrophe (<code>'</code>) within the text that it inserts, place <code>\'</code> into your code at the place you want the apostrophe to go. If you do not include the backslash (<code>\</code>) and type additional apostrophes in your code it will cause the toolbar to break. |
Revision as of 16:16, 27 October 2021
The editing toolbar is a versatile and very useful tool that can be used to make working on the wiki much easier. While the basic version (which is an option in your preferences) has some use, the main benefit comes when you customize your toolbar. In this guide there is a list of premade elements that you can use as well as guides to creating and modifying your own buttons, booklets, and dropdowns.
While modifying your toolbar can seem scary, once you get the hang of it, it really isn't a big deal. Also, anything you do can be easily undone so feel free to play around and experiment with different things.
Basic
Before you can customize your toolbar you need to have the "Enable the editing toolbar" option in your preferences selected. Once you have done this you are ready to begin.
First, 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.
Removing default elements
This can be a little tricky since in order to remove an element you need to know what it is named. To find the name you will have to comb through the page source or look through the code for the default version.
Fortunately, the names of many of the elements are known. Here are premade sections (I think there's a better word for this) of code for many of the elements in the default toolbar. Paste any one of them into your Common.js page within the two #Basic sections to remove that element.
<ref> Button
//Remove the default <ref> button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'reference'
});
|
Bulleted List Button
//remove the bulleted list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'ulist'
});
|
Numbered List Button
//remove the numbered list button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'olist'
});
|
Default Break Tag Button (<br>)
//remove the default <br> button (to replace it with a <br/> button which is preferred on the Coppermind)
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'format',
'tool': 'newline'
});
|
Table Button
//remove table button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'advanced',
'group': 'insert',
'tool': 'table'
});
|
[[File:]] Button
//remove File button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'file'
});
|
Fancy Link Button
//remove original link button
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'main',
'group': 'insert',
'tool': 'link'
});
|
Others
For elements not on this list take this code and replace XXXX with the name of the section the element is in, replace YYYY with the name of the group the element is part of, and replace ZZZZ with the name of the element. You can find these names by looking through the code for the default version.
$( '#wpTextbox1' ).wikiEditor( 'removeFromToolbar', {
'section': 'XXXX',
'group': 'YYYY',
'tool': 'ZZZZ'
});
|
Buttons
Premade Buttons
Simply paste any of these premade buttons into your /common.js page between the two #Basic sections to add it to the left side of the main section of your toolbar (which is the top row that is always showing).
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: {
"image": {
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: "]]"
}
}
}
}
});
|
Wikipedia Link
This button will paste [[Wikipedia: and |]] around your highlighted text. This generates a link to that Wikipedia page and hides the prefix. For example, if you highlight Brandon Sanderson and click this button it will generate this: [[Wikipedia: Brandon Sanderson|]] which produces Brandon Sanderson on the page.
// Adding Wikipedia link button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"wikipedia": {
label: 'Wikipedia',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/c/cb/Button_wikipedia.png',
action: {
type: 'encapsulate',
options: {
pre: "[[Wikipedia: ",
post: "|]]"
}
}
}
}
});
|
Signature
Pastes ~~~~ into the page to generate your signature with a timestamp. This useful for commenting on talk pages.
// Adding signature button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'format',
tools: {
"signature": {
label: 'Signature',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/6/6d/Button_sig.png',
action: {
type: 'encapsulate',
options: {
pre: '~~' + '~~'
}
}
}
}
});
|
Break Tag
Inserts <br /> into the page. This is the preferred syntax on the Coppermind for creating line breaks.
// Adding <br/> button to the "main" section
$('#wpTextbox1').wikiEditor('addToToolbar', {
section: 'main',
group: 'insert',
tools: {
"break": {
label: 'Break tag',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/1/13/Button_enter.png',
action: {
type: 'encapsulate',
options: {
pre: '<' + 'br />',
}
}
}
}
});
|
Simple Link
Simply encases the highlighted text within [[ and ]] to generate a link.
// Adding link button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'format',
tools: {
"link": {
label: 'Link',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/9/97/Button_int_link.png',
action: {
type: 'encapsulate',
options: {
pre: "[[",
post: "]]"
}
}
}
}
});
|
Hidden Text
Encases the highlighted text between <!-- and --> to prevent it from appearing in the viewable page.
// Adding hidden text button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'format',
tools: {
"hidden": {
label: 'Hidden text',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/1/1b/Button_hide_wiki_tag.png',
action: {
type: 'encapsulate',
options: {
pre: "<!--",
post: "-->"
}
}
}
}
});
|
Columns
Encases your text, which should a bulleted (*) or numbered (#) list, inside of the {{columns}} template to columnize the list.
// Adding columns button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'format',
tools: {
"columns": {
label: 'Columns',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/2/25/Vector_toolbar_bulleted_list_button.png',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{columns|' + '\n',
post: '\n' + '}}'
}
}
}
}
});
|
<code>
Encases your highlighted text between <code> and </code>.
// Adding a <code> button to the "main" section
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'main',
group: 'format',
tools: {
"code": {
label: 'Code',
type: 'button',
icon: '//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png',
action: {
type: 'encapsulate',
options: {
pre: '<' + 'code>',
post: '</' + 'code>'
}
}
}
}
});
|
Creating Your Own Buttons
To create your own button paste the code at the end of this section into your /common.js page between the two #Basic sections and change the following things:
- If you want, you can put a description on the first line after the
//as a comment. Whatever you write after a//will not affect your code. - Replace
AAAAwith the name of the section you would like to put the button. - Replace
BBBBwith the name of the part of that section where you would like your button to go. - Replace
CCCCwith what you want to name the button internally. The text that you put here does not actually affect anything and only matters for stylistic purposes. - Replace
DDDDwith what you want to name the button. Unlike the previous item, this actually makes a difference. The text you put here will be shown when you hover your cursor over this button's icon on your toolbar. - Replace
EEEEwith a link to the file that you would like to use as the icon for your button. This needs to be a full link starting afterhttps:. For example, you can use//upload.wikimedia.org/wikipedia/commons/2/23/Button_code.png. While you can use any file as your icon it is recommended that you use one of the icons listed on Mediawiki's list of toolbar icons since they are all of a size and shape that works. - Replace
FFFFandGGGGas you would with any other action.
// Optional Description
$('#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'AAAA',
group: 'BBBB',
tools: {
"CCCC": {
label: 'DDDD',
type: 'button',
icon: 'EEEE',
action: {
type: 'encapsulate',
options: {
pre: 'FFFF',
post: 'GGGG'
}
}
}
}
});
|
Dropdowns
Dropdowns are lists of options that drop down (hence the name) from the toolbar when your cursor passes over its spot on the toolbar. Each option, when clicked, performs an action the same way buttons do.
Premade Dropdowns
Here are some premade dropdowns which you can use by pasting them into your toolbar
Simply paste any of these premade dropdowns into your /common.js page between the two #Basic sections to add it to the advanced section of your toolbar on the right hand side.
Reference Templates
Contains a list of commonly used reference templates.
//Add new references dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
references: {
label: 'refs',
type: 'select',
list: {
'book': {
label: '{' + '{book ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{book ref|',
post: '}}'
}
}
},
'wob': {
label: '{' + '{wob ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{wob ref|',
post: '}}'
}
}
},
'ref': {
label: '{' + '{ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{ref|text=',
post: '}}'
}
}
},
'epigraph': {
label: '{' + '{epigraph ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{epigraph ref|',
post: '}}'
}
}
},
'au': {
label: '{' + '{au ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{au ref|',
post: '}}'
}
}
},
'msh': {
label: '{' + '{msh ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{msh ref|',
post: '}}'
}
}
},
'tes': {
label: '{' + '{tes ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{tes ref|',
post: '}}'
}
}
},
'file': {
label: '{' + '{file ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{file ref|',
post: '}}'
}
}
},
'mapref': {
label: '{' + '{map ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{map ref|',
post: '}}'
}
}
},
'url': {
label: '{' + '{url ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{url ref|url=',
post: '|text=|date=|site=}}'
}
}
},
'17s': {
label: '{' + '{17s ref}}',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{17s ref|topic/news/post',
post: '|id#|description|date=}}'
}
}
}
}
}
}
}
}
} );
|
Build-a-Box
This dropdown contains {{character and a list of parameters commonly used in character infoboxes. Each parameter you click will go on a new line. This together with next two dropdowns on this list is very useful for creating new pages.
//Add new build-a-box dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
simplecharacterinfobox: {
label: 'build-a-box',
type: 'select',
list: {
'start': {
label: '{' + '{character',
action: {
type: 'encapsulate',
options: {
pre: '{' + '{character'
}
}
},
'residence': {
label: '|residence=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|residence='
}
}
},
'imageparam': {
label: '|image=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|image='
}
}
},
'profession': {
label: '|profession=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|profession='
}
}
},
'#profession': {
label: '|#profession=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|#profession='
}
}
},
'skills': {
label: '|skills=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|skills='
}
}
},
'species': {
label: '|species=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|species='
}
}
},
'abilities': {
label: '|abilities=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|abilities='
}
}
},
'ethnicity': {
label: '|ethnicity=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|ethnicity='
}
}
},
'born': {
label: '|born=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|born='
}
}
},
'died': {
label: '|died=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|died='
}
}
},
'nationality': {
label: '|nationality=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|nationality='
}
}
},
'bonded': {
label: '|bonded=',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|bonded='
}
}
}
}
}
}
}
}
} );
|
Infobox Endings
This dropdown contains a list of buttons that insert the last three lines of an infobox for you. There is one button for each series/world. This goes hand in hand with the previous dropdown on this list as once you are finished with that step you simply click the relevant option from this dropdown and then you are done with the infobox.
//Add new infobox endings dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
endings: {
label: 'ends',
type: 'select',
list: {
'sa': {
label: 'Stormlight',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Roshar' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[The Stormlight Archive]]' + '\n' + '}}'
}
}
},
'mbe1': {
label: 'MB Era 1',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Scadrial' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Mistborn Era 1]]' + '\n' + '}}'
}
}
},
'mbe2': {
label: 'MB Era 2',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Scadrial' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Mistborn Era 2]]' + '\n' + '}}'
}
}
},
'wb': {
label: 'Warbreaker',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Nalthis' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Warbreaker]]' + '\n' + '}}'
}
}
},
'ela': {
label: 'Elantris',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Sel' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[Elantris (book)|Elantris]]' + '\n' + '}}'
}
}
},
'alc': {
label: 'Alcatraz',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|earth=Alcatraz' + '\n' + '|books=[[Alcatraz Versus the Evil Librarians (series)|Alcatraz Versus the Evil Librarians]]' + '\n' + '}}'
}
}
},
'ws': {
label: 'White Sand',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=Taldain' + '\n' + '|universe=[[Cosmere]]' + '\n' + '|books=[[White Sand]]' + '\n' + '}}'
}
}
},
'skyward': {
label: 'Skyward',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '|world=' + '\n' + '|universe=[[Cytoverse]]' + '\n' + '|books=[[Skyward (series)]]' + '\n' + '}}'
}
}
}
}
}
}
}
}
} );
|
Page Endings
This dropdown follows the previous two on this list and makes the rest of page creation quick and easy. After selecting the relevant option from the Infobox Ends dropdown simply click the first three items in this dropdown followed by the relevant completion template and navbar template. Everything is inserted with the proper spacing and all that is left to do is to write the text of the article.
//Add new page ends dropdown to the "advanced" section
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
bottoms: {
label: 'bottoms',
type: 'select',
list: {
'pagename': {
label: '{' + '{SUBST:PAGENAME}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '\'\'\'{' + '{SUBST:PAGENAME}}\'\'\''
}
}
},
'notes': {
label: '== Notes ==',
action: {
type: 'encapsulate',
options: {
pre: '\n\n' + '== Notes =='
}
}
},
'refsection': {
label: '<' + 'references/>',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '<' + 'references />'
}
}
},
'stub': {
label: '{' + '{stub}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{stub}}'
}
}
},
'partial': {
label: '{' + '{partial}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{partial}}'
}
}
},
'complete': {
label: '{' + '{complete}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{complete}}'
}
}
},
'alcatraz': {
label: '{' + '{Alcatraz}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Alcatraz}}'
}
}
},
'elantris': {
label: '{' + '{Elantris}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Elantris}}'
}
}
},
'mbera1': {
label: '{' + '{Mistborn|Era 1}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Mistborn|Era 1}}'
}
}
},
'mbera2': {
label: '{' + '{Mistborn|Era 2}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Mistborn|Era 2}}'
}
}
},
'reckoners': {
label: '{' + '{Reckoners}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Reckoners}}'
}
}
},
'sky': {
label: '{' + '{Skyward}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Skyward}}'
}
}
},
'storm': {
label: '{' + '{Stormlight}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Stormlight}}'
}
}
},
'warbreaker': {
label: '{' + '{Warbreaker}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{Warbreaker}}'
}
}
},
'whitesand': {
label: '{' + '{White Sand}}',
action: {
type: 'encapsulate',
options: {
pre: '\n' + '{' + '{White Sand}}'
}
}
}
}
}
}
}
}
} );
|
Creating Your Own Dropdowns
To start add this code into your /common.js page between the two #Basic sections and change the following things:
- Replace
AAAAwith the internal name for the dropdown. - Replace
BBBBwith the name for the dropdown that will be displayed on the page.
Repeat the following steps for each item you add to your dropdown:
- Replace
WWWWwith the internal name for the item - Replace
XXXXwith the display name for the item. This is how it will appear on the list. - Replace
YYYYandZZZZas you would with any other action.
//Optional description
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
section: 'advanced',
groups: {
list: {
tools: {
AAAA: {
label: 'BBBB',
type: 'select',
list: {
'WWWW': {
label: 'XXXX',
action: {
type: 'encapsulate',
options: {
pre: 'YYYY',
post: 'ZZZZ'
}
}
Insert your additional items here } } } } } } } ); |
For each item you want to add to the dropdown add the following code into the space indicated above and change the WWWW, XXXX, YYYY, and ZZZZ as you did for the first action in the list.
},
'WWWW': {
label: 'XXXX',
action: {
type: 'encapsulate',
options: {
pre: 'YYYY',
post: 'ZZZZ'
}
}
|
Booklets
General Guidelines
Here are some rules and tips for writing code on for your toolbar:
- Inserting
' + 'between two pieces of text can have effects on yourcommon.jspage (as will be discussed below), but will not appear on a page when the action is called. For example, both<br />and<' + 'br />will produce the same result (<br />) on the page when they are called. - When writing out templates, whether for a label or an action, you must insert
' + 'between the first two curly brackets. For example, instead of writing{{Stormlight}}you should write{' + '{Stormlight}}. This prevents the template from applying categories to yourcommon.jspage and also prevents it from being listed on the relevant template's list of pages that use it. - For the same reason you must also do this when writing category tags. For example, instead of writing
[[Category: Stormlight]]you should write[' + '[Category: Stormlight]]. - When writing code for substitutions this is even more important, since if you do not do it then the substitution will be performed when you save your
common.jspage. For example, instead of writing{{SUBST:PAGENAME}}you should write{' + '{SUBST:PAGENAME}}. - Do not reuse internal names within your entire toolbar.
Actions
While there are other types of actions that you can do with buttons, in this guide we focus on the encapsulate action as it is the easiest to understand and use. This action pastes one snippet of text before the highlighted text (or you cursor) and a second snippet after the highlighted text. The second snippet (post:) can be deleted if you only want to insert one snippet of text.
The code for this action is as follows, and this format is the same for both dropdowns and buttons.
action: {
type: 'encapsulate',
options: {
pre: 'XXXX',
post: 'YYYY'
XXXX is replaced by the snippet that goes before the highlighted text/cursor, and YYYY is replaced by the snippet that goes after the highlighted text/cursor.
- To have an action include a line break insert
\ninto the snippet at the place you want it to be. For stylistic reasons some people will put' + 'between instances of\nand other text in their snippets, but this does not have any effect on the output of the action and can be omitted if you want. - To have an action include an apostrophe (
') within the text that it inserts, place\'into your code at the place you want the apostrophe to go. If you do not include the backslash (\) and type additional apostrophes in your code it will cause the toolbar to break.