added themes docs
This commit is contained in:
Spocke
@@ -53,6 +53,7 @@
|
||||
- url: "#fixed_toolbar_container"
|
||||
- url: "#height"
|
||||
- url: "#inline"
|
||||
- url: "#insert_toolbar"
|
||||
- url: "#max_height"
|
||||
- url: "#max_width"
|
||||
- url: "#menu"
|
||||
@@ -62,6 +63,7 @@
|
||||
- url: "#preview_styles"
|
||||
- url: "#removed_menuitems"
|
||||
- url: "#resize"
|
||||
- url: "#selection_toolbar"
|
||||
- url: "#skin_url"
|
||||
- url: "#skin"
|
||||
- url: "#statusbar"
|
||||
@@ -358,6 +360,11 @@
|
||||
- url: "#wordcount_cleanregex"
|
||||
- url: "#wordcount_countregex"
|
||||
|
||||
- url: "themes"
|
||||
pages:
|
||||
- url: "inlight"
|
||||
- url: "modern"
|
||||
|
||||
- url: "enterprise"
|
||||
pages:
|
||||
- url: "manage-files-and-images"
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
## insert_toolbar
|
||||
|
||||
The enables you to specify toolbar items to include in the inlight themes insert toolbar. We recommend that you only have insert related controls in this toolbar but nothing is restricting you to use any of the available [toolbar controls]({{ site.baseurl }}/advanced/editor-control-identifiers/#toolbarcontrols).
|
||||
|
||||
**Type:** `String`
|
||||
|
||||
**Defaults:** `quickimage quicktable`
|
||||
|
||||
##### Example
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: 'div.tinymce',
|
||||
theme: 'inlight',
|
||||
inline: true,
|
||||
insert_toolbar: 'quickimage quicktable'
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,18 @@
|
||||
## selection_toolbar
|
||||
|
||||
The enables you to specify toolbar items to include in the inlight themes text selection toolbar. We recommend that you only have formatting related controls in this toolbar but nothing is restricting you to use any of the available [toolbar controls]({{ site.baseurl }}/advanced/editor-control-identifiers/#toolbarcontrols).
|
||||
|
||||
**Type:** `String`
|
||||
|
||||
**Defaults:** `bold italic | quicklink h2 h3 blockquote`
|
||||
|
||||
##### Example
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: 'div.tinymce',
|
||||
theme: 'inlight',
|
||||
inline: true,
|
||||
selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
|
||||
});
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
## theme
|
||||
|
||||
This option allows you to specify the theme that TinyMCE should use. The default theme included with TinyMCE is named "modern".
|
||||
This option allows you to specify the theme that TinyMCE should use. The default theme included with TinyMCE is named "[modern]({{ site.baseurl }}/themes/modern/)".
|
||||
|
||||
The name of the theme should match the name of the folder within the themes directory of TinyMCE. If the specified theme is not found, TinyMCE will not load.
|
||||
|
||||
|
||||
@@ -67,8 +67,12 @@ Here is a list of the toolbar/menu controls that the core and plugins provides.
|
||||
| template | [template]({{ site.baseurl }}/plugins/template/) | Inserts templates into the editor. |
|
||||
| forecolor | [textcolor]({{ site.baseurl }}/plugins/textcolor/) | Applies foreground/text color to selection. |
|
||||
| backcolor | [textcolor]({{ site.baseurl }}/plugins/textcolor/) | Applies background color to selection. |
|
||||
| restoredraft | [restoredraft]({{ site.baseurl }}/plugins/autosave/) | Restores to the latest auto saved draft. |
|
||||
| insertfile | [moxiemanager]({{ site.baseurl }}/plugins/moxiemanager/) | Opens the MoxieManager dialog. |
|
||||
| a11ycheck | [a11ychecker]({{ site.baseurl }}/plugins/a11ychecker/) | Opens the accessibility checker dialog. |
|
||||
| quickimage | [quickimage]({{ site.baseurl }}/themes/inlight/) | Inserts an image from the local machine. |
|
||||
| quicktable | [quicktable]({{ site.baseurl }}/themes/inlight/) | Inserts an table 2x2. |
|
||||
| quicklink | [quicklink]({{ site.baseurl }}/themes/inlight/) | Inserts an link in a quicker way. |
|
||||
|
||||
## Menu controls
|
||||
|
||||
@@ -114,3 +118,4 @@ Here is a list of the toolbar/menu controls that the core and plugins provides.
|
||||
| cell | [table]({{ site.baseurl }}/plugins/table/) | Cell menu item with related controls. |
|
||||
| row | [table]({{ site.baseurl }}/plugins/table/) | Row menu item with related controls. |
|
||||
| column | [table]({{ site.baseurl }}/plugins/table/) | Column menu item with related controls. |
|
||||
| restoredraft | [autosave]({{ site.baseurl }}/plugins/autosave/) | Restores to the latest auto saved draft. |
|
||||
|
||||
+1
-1
@@ -4,5 +4,5 @@ title: Explore Advanced Topics
|
||||
description: Information and guides for developers wanting to build advanced capabilities into TinyMCE.
|
||||
type: folder
|
||||
---
|
||||
{% assign links = site.data.nav[5].pages %}
|
||||
{% assign links = site.data.nav[6].pages %}
|
||||
{% include index.html links=links %}
|
||||
|
||||
@@ -17,6 +17,8 @@ description: Configure the editor's appearance, including menu and toolbar contr
|
||||
|
||||
{% include configuration/inline.md %}
|
||||
|
||||
{% include configuration/insert-toolbar.md %}
|
||||
|
||||
{% include configuration/max-height.md %}
|
||||
|
||||
{% include configuration/max-width.md %}
|
||||
@@ -35,6 +37,8 @@ description: Configure the editor's appearance, including menu and toolbar contr
|
||||
|
||||
{% include configuration/resize.md %}
|
||||
|
||||
{% include configuration/selection-toolbar.md %}
|
||||
|
||||
{% include configuration/skin-url.md %}
|
||||
|
||||
{% include configuration/skin.md %}
|
||||
|
||||
+1
-1
@@ -5,5 +5,5 @@ description: Premium features from the makers of TinyMCE.
|
||||
type: folder
|
||||
---
|
||||
|
||||
{% assign links = site.data.nav[4].pages %}
|
||||
{% assign links = site.data.nav[5].pages %}
|
||||
{% include index.html links=links %}
|
||||
|
||||
@@ -4,5 +4,5 @@ title: Integrate With Other Projects
|
||||
description: Faster development with integrations of TinyMCE into your favorite framework or CMS.
|
||||
type: folder
|
||||
---
|
||||
{% assign links = site.data.nav[6].pages %}
|
||||
{% assign links = site.data.nav[7].pages %}
|
||||
{% include index.html links=links %}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: default
|
||||
title: Add Themes to TinyMCE
|
||||
title_nav: Add Themes to TinyMCE
|
||||
description_short: This section will help you configure themes.
|
||||
description: TinyMCE is an incredibly powerful, flexible and customizable rich text editor. This section will help you configure themes.
|
||||
type: folder
|
||||
---
|
||||
|
||||
{% assign links = site.data.nav[4].pages %}
|
||||
{% include index.html links=links %}
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
layout: default
|
||||
title: Inlight theme
|
||||
title_nav: Inlight
|
||||
description: Theme that renders a light weight UI for inline editing.
|
||||
keywords: theme inlight
|
||||
---
|
||||
|
||||
The `inlight` theme is responsible for rendering the editor lightweight inline mode. The current default theme is called [modern]({{ site.baseurl }}/themes/modern/) this is an optional more light weight distraction free UI for the editor.
|
||||
|
||||
##### Example:
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "div.tinymce",
|
||||
themes: "inlight",
|
||||
inline: true
|
||||
});
|
||||
```
|
||||
|
||||
### Theme specific controls
|
||||
|
||||
#### quicklink
|
||||
Lets you quickly insert/edit links inline.
|
||||
|
||||
##### Example:
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "div.tinymce",
|
||||
themes: "inlight",
|
||||
inline: true,
|
||||
selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
|
||||
});
|
||||
```
|
||||
|
||||
#### quickimage
|
||||
|
||||
Lets you quickly insert images from the local machine into the editor. These can then be automatically uploaded if you configure [image uploading]({{ site.baseurl }}/advanced/handle-async-image-uploads/).
|
||||
|
||||
##### Example:
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "div.tinymce",
|
||||
themes: "inlight",
|
||||
inline: true,
|
||||
insert_toolbar: 'quickimage quicktable'
|
||||
});
|
||||
```
|
||||
|
||||
#### quicktable
|
||||
|
||||
Lets you quickly insert a table 2x2 with 100% width.
|
||||
|
||||
##### Example:
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "div.tinymce",
|
||||
themes: "inlight",
|
||||
inline: true,
|
||||
insert_toolbar: 'quickimage quicktable'
|
||||
});
|
||||
```
|
||||
|
||||
### Related configuration options
|
||||
|
||||
* [insert_toolbar]({{ site.baseurl }}/configure/editor-appearance/#insert_toolbar)
|
||||
* [selection_toolbar]({{ site.baseurl }}/configure/editor-appearance/#selection_toolbar)
|
||||
* [inline]({{ site.baseurl }}/configure/editor-appearance/#inline)
|
||||
* [skin]({{ site.baseurl }}/configure/editor-appearance/#skin)
|
||||
* [theme]({{ site.baseurl }}/configure/editor-appearance/#theme)
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
layout: default
|
||||
title: Modern theme
|
||||
title_nav: Modern
|
||||
description: Theme that renders iframe or inline modes using the tinymce core UI framework.
|
||||
keywords: theme modern
|
||||
---
|
||||
|
||||
The `modern` theme is responsible for rendering the editor in iframe or inline mode. This is currently the default theme there is also a light weight theme called [inlight]({{ site.baseurl }}/themes/inlight/)
|
||||
|
||||
##### Example:
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "textarea.tinymce",
|
||||
themes: "modern"
|
||||
});
|
||||
```
|
||||
|
||||
### Related configuration options
|
||||
|
||||
* [elementpath]({{ site.baseurl }}/configure/editor-appearance/#elementpath)
|
||||
* [fixed-toolbar-container]({{ site.baseurl }}/configure/editor-appearance/#fixed-toolbar-container)
|
||||
* [inline]({{ site.baseurl }}/configure/editor-appearance/#inline)
|
||||
* [menu]({{ site.baseurl }}/configure/editor-appearance/#menu)
|
||||
* [menubar]({{ site.baseurl }}/configure/editor-appearance/#menubar)
|
||||
* [resize]({{ site.baseurl }}/configure/editor-appearance/#resize)
|
||||
* [skin]({{ site.baseurl }}/configure/editor-appearance/#skin)
|
||||
* [statusbar]({{ site.baseurl }}/configure/editor-appearance/#statusbar)
|
||||
* [theme]({{ site.baseurl }}/configure/editor-appearance/#theme)
|
||||
* [toolbar]({{ site.baseurl }}/configure/editor-appearance/#toolbar)
|
||||
* [toolbar-n]({{ site.baseurl }}/configure/editor-appearance/#toolbar-n)
|
||||
* [height]({{ site.baseurl }}/configure/editor-appearance/#height)
|
||||
Reference in New Issue
Block a user