Shikha
7 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 156 additions and 53 deletions
-
2_config.yml
-
1_data/nav.yml
-
81_includes/codepens/classic/index.js
-
2_includes/release-notes/bugfixes.md
-
8_includes/template/bodycontents.html
-
2_scripts/get-baseurl.sh
-
1advanced/keyboard-shortcuts.md
-
1migration-from-4x.md
-
2plugins/permanentpen.md
-
4plugins/table.md
-
101ui-components/customsidebar.md
-
4wercker.yml
@ -0,0 +1,101 @@ |
|||
--- |
|||
layout: default |
|||
title: Custom sidebar |
|||
title_nav: Custom sidebar |
|||
description_short: Introducing sidebar panel creation. |
|||
description: A short introduction to creating sidebars. |
|||
keywords: sidebar |
|||
--- |
|||
|
|||
TinyMCE allows developers to create sidebars and add custom UI widgets inside a constrained and easily accessible area of the editor. The sidebar is designed to allow administrators and plugin developers to provide additional tools that can be accessed by TinyMCE users. |
|||
|
|||
## Editor sidebar API |
|||
|
|||
The sidebar API allows developers to add sidebars on editor instances in a similar way as adding buttons or menu items. Developers can either add sidebars directly in the `tinymce.init` using the setup callback or inside your plugin. |
|||
|
|||
This is the syntax for the addSidebar function: `editor.ui.registry.addSidebar(name:String, spec:Object)` |
|||
|
|||
### Specification object |
|||
|
|||
#### `tooltip` |
|||
|
|||
The `tooltip` specifies a tooltip to be displayed when hovering over the sidebar toggle button. |
|||
|
|||
**Type**: `String` |
|||
|
|||
#### `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. |
|||
|
|||
**Type**: `String` |
|||
|
|||
#### `onSetup` |
|||
|
|||
The `onSetup` specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is `(api) => (api) => {}`. |
|||
|
|||
`onSetup` is a complex property. It requires a function that takes the sidebar’s API and should return a callback that takes the sidebar's API and returns nothing. This occurs because `onSetup` runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore the returned function is essentially an `onTeardown` handler, and can be used to unbind events and callbacks. |
|||
|
|||
**Type**: `function` |
|||
|
|||
#### `onShow` |
|||
|
|||
The `onShow` specifies a function to be called when the panel displayed. It passes in an API object. |
|||
|
|||
**Type**: `function` |
|||
|
|||
#### `onHide` |
|||
|
|||
The `onHide` specifies a function to be called when the panel is hidden. It passes in an API object. |
|||
|
|||
**Type**: `function` |
|||
|
|||
### API Object |
|||
|
|||
#### `element():HTMLElement` |
|||
|
|||
The `element():HTMLElement` function returns the root element of the sidebar panel. |
|||
|
|||
## Example inside the tinymce.init |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
... |
|||
setup: function (editor) { |
|||
editor.ui.registry.addSidebar('mysidebar', { |
|||
tooltip: 'My sidebar', |
|||
icon: 'settings', |
|||
onSetup: function (api) { |
|||
console.log('Render panel', api.element()); |
|||
}, |
|||
onShow: function (api) { |
|||
console.log('Show panel', api.element()); |
|||
api.element().innerHTML = 'Hello world!'; |
|||
}, |
|||
onHide: function (api) { |
|||
console.log('Hide panel', api.element()); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
## Example inside a TinyMCE plugin |
|||
|
|||
```js |
|||
tinymce.PluginManager.add('myplugin', function (editor) { |
|||
editor.ui.registry.addSidebar('mysidebar', { |
|||
tooltip: 'My sidebar', |
|||
icon: 'settings', |
|||
onSetup: function (api) { |
|||
console.log('Render panel', api.element()); |
|||
}, |
|||
onShow: function (api) { |
|||
console.log('Show panel', api.element()); |
|||
api.element().innerHTML = 'Hello world!'; |
|||
}, |
|||
onHide: function (api) { |
|||
console.log('Hide panel', api.element()); |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue