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
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[]
|