You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

136 lines
3.8 KiB

= Quick Toolbars plugin
:navtitle: Quick Toolbars
:description: User interface controls to create content faster.
:keywords: plugin, inlite, quickbar
:pluginname: Quick Toolbars
:plugincode: quickbars
The Quick Toolbar plugin adds three context toolbars:
* A *Quick Selection toolbar* - Shown when text is selected, providing formatting buttons such as: `+bold+`, `+italic+`, and `+link+`.
* A *Quick Insert toolbar* - Shown when a new line is added, providing buttons for inserting objects such as tables and images.
* A *Quick Image toolbar* - Shown when an image or figure is selected, providing image formatting buttons such as alignment options.
This plugin also adds three new toolbar buttons:
* *Quick Link* - An inline form for creating and editing links without a dialog.
* *Quick Image* - Prompts the user to select a local image to upload.
* *Quick Table* - Inserts a 2x2 table without prompting the user to select the number of rows and columns.
== Interactive example
liveDemo::quickbars[]
== Basic setup
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars'
});
----
=== Disabling specific quick toolbars
The following examples show how to disable specific quick toolbars for editors where they are not required.
==== Example: disabling the Quick Insert context toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars',
quickbars_insert_toolbar: false
});
----
==== Example: disabling the Quick Selection context toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars',
quickbars_selection_toolbar: false
});
----
==== Example: disabling the Quick Image context toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars',
quickbars_image_toolbar: false
});
----
== Plugin-specific toolbar buttons
=== Quick Link
The Quick Link (`+quicklink+`) toolbar button lets the user quickly insert/edit links inline. It is included in the Quick Selection context toolbar by default and can be used in other context toolbars.
==== Example: using quicklink in a custom context toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars link',
setup: (editor) => {
editor.ui.registry.addContextToolbar('paragraphlink', {
predicate: (node) => {
return node.nodeName.toLowerCase() === 'p';
},
items: 'quicklink',
position: 'node'
});
}
});
----
=== Quick Image
The Quick Image (`+quickimage+`) toolbar button allows users to quickly insert images from their computer into the editor. It is included in the Quick Insert context toolbar by default and can be used in other toolbars.
NOTE: To enable automatic upload of images on insertion, xref:upload-images.adoc[image upload] must be configured.
==== Example: using quickimage in the editor toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars',
toolbar: 'quickimage'
});
----
=== Quick Table
The Quick Table (`+quicktable+`) toolbar button inserts a 2x2 table with 100% width. It is included in the Quick Insert context toolbar by default and can be used in other toolbars.
==== Example: using quicktable in the editor toolbar
[source,js]
----
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'quickbars',
toolbar: 'quicktable'
});
----
== Options
include::partial$configuration/selection_toolbar.adoc[leveloffset=+1]
include::partial$configuration/insert_toolbar.adoc[leveloffset=+1]
include::partial$configuration/image_toolbar.adoc[leveloffset=+1]
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]