Browse Source

Merge branch 'develop' of https://github.com/tinymce/tinymce-docs into develop

pull/1035/head
shikha 6 years ago
parent
commit
1839c8eb36
  1. 2
      .api-version
  2. 11
      ui-components/customsidebar.md

2
.api-version

@ -1 +1 @@
5.0.3
5.0.4

11
ui-components/customsidebar.md

@ -2,7 +2,7 @@
layout: default
title: Custom sidebar
title_nav: Custom sidebar
description_short: Introducing sidebar panel creation.
description_short: Introducing sidebar panel creation.
description: A short introduction to creating sidebars.
keywords: sidebar
---
@ -15,6 +15,8 @@ The sidebar API allows developers to add sidebars on editor instances in a simil
This is the syntax for the addSidebar function: `editor.ui.registry.addSidebar(name:String, spec:Object)`
When a new sidebar is registered, a corresponding toolbar button for toggling the sidebar open and close is also created using the same name. This button can then be included in the toolbar by adding the sidebar name to the [`toolbar`]({{site.baseurl}}/configure/editor-appearance/#toolbar/) option.
### Specification object
#### `tooltip`
@ -25,7 +27,7 @@ The `tooltip` specifies a tooltip to be displayed when hovering over the sidebar
#### `icon`
The `icon` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the TinyMCE skin.
The `icon` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the TinyMCE skin or a [custom icon]({{site.baseurl}}/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon/).
**Type**: `String`
@ -60,10 +62,11 @@ The `element():HTMLElement` function returns the root element of the sidebar pan
```js
tinymce.init({
...
toolbar: "mysidebar",
setup: function (editor) {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'settings',
icon: 'comment',
onSetup: function (api) {
console.log('Render panel', api.element());
},
@ -85,7 +88,7 @@ tinymce.init({
tinymce.PluginManager.add('myplugin', function (editor) {
editor.ui.registry.addSidebar('mysidebar', {
tooltip: 'My sidebar',
icon: 'settings',
icon: 'comment',
onSetup: function (api) {
console.log('Render panel', api.element());
},

Loading…
Cancel
Save