shikha
6 years ago
14 changed files with 2 additions and 768 deletions
-
4_data/nav.yml
-
12advanced/cdn-details.md
-
171advanced/creating-a-custom-button.md
-
132advanced/creating-a-plugin.md
-
105advanced/creating-a-sidebar.md
-
52advanced/creating-custom-dialogs.md
-
135advanced/migration-guide-from-3.x.md
-
0configure/contributing-docs.md
-
0configure/contributing-to-open-source.md
-
14demo/moxie-manager.md
-
85enterprise/check-spelling/modifying.md
-
20plugins/example.md
-
20plugins/exampledependency.md
-
20plugins/layer.md
@ -1,12 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Content delivery network (CDN) details |
|||
title_nav: CDN details |
|||
description_short: Details on CDN usage and versioning. |
|||
description: Details on CDN usage and versioning. |
|||
keywords: CDN versioning |
|||
--- |
|||
|
|||
The CDN has been superseded by the enhanced functionality of TinyMCE Cloud. |
|||
|
|||
Learn more about TinyMCE Cloud in the [Cloud Deployment Guide]({{site.baseurl}}/cloud-deployment-guide) guide. |
|||
@ -1,171 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Create a custom toolbar button |
|||
title_nav: Custom toolbar button |
|||
description_short: Add a custom button to the toolbar. |
|||
description: This example shows you how to add a custom button to the toolbar. |
|||
keywords: example demo custom toolbar button |
|||
--- |
|||
|
|||
* [Basic button](#basicbutton) |
|||
* [Button options](#buttonoptions) |
|||
* [Conditionally disable button](#conditionallydisablebutton) |
|||
* [Toggle button](#togglebutton) |
|||
|
|||
|
|||
## Basic button |
|||
|
|||
To create a button in TinyMCE use the method `addButton()`. Call `addButton()` with button identifier and configuration object. Here is an example: |
|||
|
|||
```js |
|||
editor.addButton('mybutton', { |
|||
text: "My Button", |
|||
onclick: function () { |
|||
alert("My Button clicked!"); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
The `identifier` is the only required argument. To find your button on the toolbar provide either an `icon` option or a `text` option (or both). The identifier allows the reference to this button later in the code. Another important option is `onclick`. |
|||
|
|||
For example, to insert the current date into the editor: |
|||
|
|||
> Note: TinyMCE already ships with **nice** [Insert date/time plugin](https://www.tinymce.com/docs/plugins/insertdatetime/) (it is hard to find a text editing feature that is not implemented in TinyMCE), but it does many complimentary things - adds some commands and shortcuts, inserts **"Insert date/time"** menu, adds support for additional date formats, internationalization, and more. This tutorial does not explore those complex topics. However, `insertdatetime` plugin is a good starting point to learn more. Its source code can be found on [Github](https://github.com/tinymce/tinymce/tree/master/src/plugins/insertdatetime). |
|||
|
|||
For this example, use [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) tag. `<time>` tag should have an attribute `datetime` - valid date with an optional time string. And as [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) states: |
|||
|
|||
> This attribute indicates the time and date of the element. If the value cannot be parsed as a date with an optional time string, the element does not have an associated time stamp. |
|||
|
|||
Here is a simple function that converts a `Date` object into such tag with the populated timestamp in the `datetime` attribute and readable date string inside. |
|||
|
|||
```js |
|||
function toTimeHtml(date) { |
|||
return '<time datetime="' + date.toString() + '">' + date.toDateString() + '</time>'; |
|||
} |
|||
``` |
|||
|
|||
It outputs this: |
|||
|
|||
```html |
|||
<time datetime="Mon Sep 26 2016 08:42:22 GMT+0400 (GET)">Mon Sep 26 2016</time> |
|||
``` |
|||
|
|||
Call this function when the custom button is clicked and insert the return string into the editor. |
|||
|
|||
```js |
|||
function toTimeHtml(date) { |
|||
return '<time datetime="' + date.toString() + '">' + date.toDateString() + '</time>'; |
|||
} |
|||
|
|||
editor.addButton('currentdate', { |
|||
icon: 'insertdatetime', |
|||
tooltip: "Insert Current Date", |
|||
onclick: function () { |
|||
var html = toTimeHtml(new Date()); |
|||
editor.insertContent(html); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
This example borrowed an icon from the *Insert date/time* plugin. You can use any icon class that you have currently defined in your stylesheets. You can supply direct image URL via `image` option ff you do not have any icon classes. |
|||
|
|||
`image` option has priority over `icon`, if the line above is uncommented the icon is then superseded with the calendar image from [Fugue iconset](http://p.yusukekamiyamane.com/). |
|||
|
|||
We have also replaced `text` with `tooltip` option, to fit the toolbar concept much better. |
|||
|
|||
Here is the full code (experiment on it by clicking *Edit on Codepen* in the top right corner). |
|||
|
|||
{% include codepen.html id="creating-a-custom-button-1" tab="js" height="550" %} |
|||
|
|||
|
|||
The identifier is supplied to the button in the `toolbar` property, along with `undo` and `redo` (`code` plugin is also included to review the HTML code that gets generated). When the user clicks *Insert Current Date*, the date is inserted into the editor at the current cursor position. The `undo` button is enabled after insertion due to the automated handling of modification history. |
|||
|
|||
Another point is `setup` callback. It is the callback that TinyMCE will [automatically invoke]({{ site.baseurl }}/configure/integration-and-setup/#setup) for every initialised editor instance. It will receive a reference to the instance as the first argument. This `setup` callback is used to customize the editor - in this case a button was added, but keyboard shortcuts and menus could be also be added and has to be added *before* the editor is ready. |
|||
|
|||
|
|||
## Button options |
|||
|
|||
Button configuration properties: |
|||
|
|||
* **text** - *the text that will show up on the button* |
|||
* **icon** - *CSS class for the icon (from one of the loaded stylesheets)* |
|||
* **image** - *URL of the image (16x16 recommended) to use as an icon (overrides `icon` option if defined)* |
|||
* **tooltip** - *tooltip to pop up on hover* |
|||
* **onclick** - *callback to call when button is clicked* |
|||
* **onpostrender** - *callback to call when button is rendered* |
|||
* **cmd** - *editor command to invoke, when button is clicked (command [should be registered]({{ site.baseurl }}/api/tinymce/tinymce.editorcommands/#addcommands) prior to this, either by editor or by you)* |
|||
|
|||
## Conditionally disable button |
|||
|
|||
TinyMCE gives you the choice to conditionally disable a button. Users may need this ability to ensure the context is appropriate for the use case. For example, it would be awkward if users could insert `<time>` tag into another `<time>` tag. Although, technically, it *is* possible. |
|||
|
|||
TinyMCE is designed in a way to monitor the cursor position and disable buttons when it is inappropriate. Hooking into a [NodeChange event]({{ site.baseurl }}/advanced/events/#nodechange), that is initiated when the cursor jumps from one node to another. |
|||
|
|||
```js |
|||
function monitorNodeChange() { |
|||
var btn = this; |
|||
editor.on('NodeChange', function(e) { |
|||
btn.disabled(e.element.nodeName.toLowerCase() === 'time'); |
|||
}); |
|||
} |
|||
|
|||
editor.addButton('currentdate', { |
|||
icon: 'insertdatetime', |
|||
tooltip: "Insert Current Date", |
|||
onclick: insertDate, |
|||
onpostrender: monitorNodeChange |
|||
}); |
|||
``` |
|||
The `postrender` option is used here and attached the callback that will be called after the button is rendered. That is where we start our monitoring. Note how the buttons toggle their state depending on whether the node under the cursor is `time` tag or not. |
|||
|
|||
The demo has been updated using the above knowledge. Try to click inside and outside the date string: |
|||
|
|||
{% include codepen.html id="creating-a-custom-button-2" tab="run" height="300" %} |
|||
|
|||
> Note: It is more practical to simply set `contenteditable` attribute to **false** on the `time` tag. This is a demonstration on how the button can toggle different states depending on various logical conditions. |
|||
|
|||
Note how the code for the example gets bigger. It has nearly reached the boundaries of simplicity. At this point, consider whether it is better to [bundle this feature as a plugin]({{ site.baseurl }}/advanced/creating-a-plugin/) instead. |
|||
|
|||
## Toggle button |
|||
|
|||
It may be useful for a button to act as the on/off switcher. For example in the case of basic emphasizing formatting (e.g.,**bold**, *italic*). Please review [conditionally disable button](#conditionallydisablebutton) before n looking at how to conditionally make a button either active (depressed) or inactive (unpressed). |
|||
|
|||
To add a basic button first that will strike out currently selected text. |
|||
|
|||
```js |
|||
editor.addButton('strikeout', { |
|||
icon: 'strikethrough', |
|||
onclick: function() { |
|||
editor.execCommand('mceToggleFormat', false, 'strikethrough'); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
`mceToggleFormat` is an internal command, that when executed, toggles the specified format on and off. Ensure the format is registered. In the example above, `strikethrough` is an internally registered format. Note that the name of the button is `strikeout` to differentiate the button from the internal `strikethrough` button. This ensures that the functionality is defined independantly of either button. |
|||
|
|||
The code works as expected - striking out the plain text or removing the *striked* formatting if it was already stricken out. However, the button visually doesn't reflect the operation that will be applied. To address this: |
|||
|
|||
```js |
|||
editor.addButton('strikeout', { |
|||
icon: 'strikethrough', |
|||
onclick: function() { |
|||
editor.execCommand('mceToggleFormat', false, 'strikethrough'); |
|||
}, |
|||
|
|||
onpostrender: function() { |
|||
var btn = this; |
|||
editor.on('init', function() { |
|||
editor.formatter.formatChanged('strikethrough', function(state) { |
|||
btn.active(state); |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
`onpostrender` is used to invoke the code after the button is rendered. At this moment `editor.formatter` might not be initialized yet, so first hook onto `init` event. Then there is the internal TinyMCE method `editor.formatter.formatChanged()` that registers a callback to be called when the current selection is of the specified format. The callback takes in a state as the argument, and that is used to depress or unpress our button visually. |
|||
|
|||
Here is the full example: |
|||
|
|||
{% include codepen.html id="creating-a-custom-button-3" tab="js" height="550" %} |
|||
|
|||
@ -1,132 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Create a plugin for TinyMCE |
|||
title_nav: Create a plugin |
|||
description_short: Introducing plugin creation, with an example. |
|||
description: A short introduction to creating plugins for TinyMCE along with an example plugin. |
|||
keywords: plugin plugin.js plugin.min.js tinymce.js |
|||
--- |
|||
|
|||
TinyMCE is designed to make creating plugins simple and to provide choice. Users can employ the [Yeoman generator]({{ site.baseurl }}/advanced/yeoman-generator/) or you can use the following tutorial that outlines the basic concepts of creating a plugin. Consult the API documentation and review the existing plugins that are shipped with the core editor for additional details. |
|||
|
|||
## File Structure |
|||
|
|||
First create a directory in the TinyMCE plugins directory. TinyMCE loads the `plugin.js` file when developers use the `tinymce.js` file in the page. Similarly, the `tinymce.min.js` loads the `plugin.min.js` file. The recommended usage is to use the `tinymce.js` file while developing and then use a build script minifying the `plugin.js` into `plugin.min.js` in production. |
|||
|
|||
The build scripts that comes with the TinyMCE development package automatically builds all plugins including custom ones. |
|||
|
|||
## Example of the plugin file structure |
|||
|
|||
``` |
|||
/tinymce/plugins/example/plugin.js |
|||
/tinymce/plugins/example/plugin.min.js |
|||
``` |
|||
|
|||
This new example plugin can be loaded using the `tinymce.init` plugins option. |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
selector: 'textarea', |
|||
plugins: 'example' |
|||
}); |
|||
``` |
|||
|
|||
Developers can designate the location of the plugins by loading the `plugin.js` or `plugin.min.js` files directly after the `tinymce.js` or `tinymce.min.js`. |
|||
|
|||
## Example of loading the plugin from another URL |
|||
|
|||
```html |
|||
<script src="/tinymce/js/tinymce.min.js"></script> |
|||
<script src="/scripts/my.tinymce.plugin.js"></script> |
|||
``` |
|||
|
|||
## Example plugin |
|||
|
|||
This example plugin demonstrates how to add a simple toolbar button and menu item. This button opens a dialog that allows a title to be entered into the editor. The menu item will open the TinyMCE site in a dialog. |
|||
|
|||
```js |
|||
tinymce.PluginManager.add('example', function(editor, url) { |
|||
// Add a button that opens a window |
|||
editor.addButton('example', { |
|||
text: 'My button', |
|||
icon: false, |
|||
onclick: function() { |
|||
// Open window |
|||
editor.windowManager.open({ |
|||
title: 'Example plugin', |
|||
body: [ |
|||
{type: 'textbox', name: 'title', label: 'Title'} |
|||
], |
|||
onsubmit: function(e) { |
|||
// Insert content when the window form is submitted |
|||
editor.insertContent('Title: ' + e.data.title); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// Adds a menu item to the tools menu |
|||
editor.addMenuItem('example', { |
|||
text: 'Example plugin', |
|||
context: 'tools', |
|||
onclick: function() { |
|||
// Open window with a specific url |
|||
editor.windowManager.open({ |
|||
title: 'TinyMCE site', |
|||
url: 'https://www.tinymce.com', |
|||
width: 800, |
|||
height: 600, |
|||
buttons: [{ |
|||
text: 'Close', |
|||
onclick: 'close' |
|||
}] |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
return { |
|||
getMetadata: function () { |
|||
return { |
|||
name: "Example plugin", |
|||
url: "http://exampleplugindocsurl.com" |
|||
}; |
|||
} |
|||
}; |
|||
}); |
|||
``` |
|||
|
|||
## Example init |
|||
|
|||
The following is an example of how to use the new toolbar button. |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
selector: 'textarea', |
|||
plugins: 'example', |
|||
toolbar: 'example' |
|||
}); |
|||
``` |
|||
|
|||
## Exposing metadata |
|||
|
|||
Metadata can be exposed from a custom plugin by returning an object with the property `getMetadata` with a function that returns an object with a `name` and `url` property. This metadata is used by the [Help Plugin]({{ site.baseurl }}/plugins/help/) to show the correct name and link for the plugin in the Plugins installed tab. See the `test` plugin above for example. |
|||
|
|||
## Language localization |
|||
|
|||
Create a "langs" directory in the plugin directory for custom translations. TinyMCE loads language files based on the specified language code. For example, if the language is "es_ES" it will try to load ```'<your plugin>/langs/es_ES.js'```. |
|||
|
|||
The structure is similar to `.po` files in that the English string left and its corresponding translation on the right. |
|||
|
|||
## Example of a Spanish translation for the dialog title |
|||
|
|||
```js |
|||
tinymce.addI18n('es_ES', { |
|||
'Example plugin': 'Example plugin' |
|||
}); |
|||
``` |
|||
|
|||
> Warning: A 404 error will load if translations are missing in the plugin that the full TinyMCE package contains. Add the following line to the top of the plugin file to avoid this. |
|||
|
|||
```js |
|||
tinymce.PluginManager.requireLangPack('example', 'es_ES,de_AT'); |
|||
``` |
|||
@ -1,105 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Create a sidebar panel |
|||
title_nav: Create a sidebar panel |
|||
description_short: Introducing sidebar 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.addSidebar(id:String, options:Object)` |
|||
|
|||
### Options 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` |
|||
|
|||
#### `image` |
|||
|
|||
The `image` specifies a custom image URL to use as an icon. |
|||
|
|||
**Type**: `String` |
|||
|
|||
#### `onrender` |
|||
|
|||
The `onrender` specifies a function to be called when the panel is first created. It passes in an API object. |
|||
|
|||
**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():DOMElement` |
|||
|
|||
The `element():DOMElement` function returns the root element of the sidebar panel. |
|||
|
|||
## Example inside the tinymce.init |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
... |
|||
setup: function (editor) { |
|||
editor.addSidebar('mysidebar', { |
|||
tooltip: 'My sidebar', |
|||
icon: 'settings', |
|||
onrender: 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.addSidebar('mysidebar', { |
|||
tooltip: 'My sidebar', |
|||
icon: 'settings', |
|||
onrender: 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()); |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
@ -1,52 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Create custom dialogs |
|||
title_nav: Create custom dialogs |
|||
description_short: Learn how to make custom dialogs. |
|||
description: Learn how to make custom dialogs with WindowManager. |
|||
keywords: custom dialog dialogs cdn windowmanager |
|||
--- |
|||
|
|||
## Dialogs as HTML pages |
|||
|
|||
HTML based pages can be loaded into TinyMCE dialogs by using the WindowManager.This makes it easier to create plugins and fully support CDNs. |
|||
|
|||
```js |
|||
// Opens a HTML page inside a TinyMCE dialog |
|||
editor.windowManager.open({ |
|||
title: 'My html dialog', |
|||
url: 'mydialog.html', |
|||
width: 700, |
|||
height: 600 |
|||
}); |
|||
``` |
|||
|
|||
Parameters can be passed to the dialog by using the second parameter of the `WindowManager.open` |
|||
|
|||
```js |
|||
// Opens an HTML page inside a TinyMCE dialog and pass in two parameters |
|||
editor.windowManager.open({ |
|||
title: 'My html dialog', |
|||
url: 'mydialog.html', |
|||
width: 700, |
|||
height: 600 |
|||
}, { |
|||
arg1: 42, |
|||
arg2: 'Hello world' |
|||
}); |
|||
``` |
|||
|
|||
Access these parameters from the `mydialog.html` page by using this code: |
|||
|
|||
```js |
|||
// Get the parameters passed into the window from the top frame |
|||
var args = top.tinymce.activeEditor.windowManager.getParams(); |
|||
console.log(args.arg1, args.arg2); |
|||
``` |
|||
|
|||
Close the current window by calling: |
|||
|
|||
```js |
|||
// Close the front most window (mydialog.html) |
|||
top.tinymce.activeEditor.windowManager.close(); |
|||
``` |
|||
@ -1,135 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Migrate from version 3 of TinyMCE |
|||
title_nav: Migrate from V3 |
|||
description_short: Everything you need to start migrating from 3.x to 4 and beyond. |
|||
description: Everything you need to start migrating from 3.x to 4 and beyond. |
|||
keywords: migrate migration 3x themes event handling new removed |
|||
--- |
|||
|
|||
|
|||
* [File structure](#filestructure) |
|||
* [Removed plugins](#removedplugins) |
|||
* [New plugins](#newplugins) |
|||
* [Removed themes](#removedthemes) |
|||
* [New themes](#newthemes) |
|||
* [Event handling](#eventhandling) |
|||
* [User interface](#userinterface) |
|||
* [Control states](#controlstates) |
|||
* [Dialogs/Windows](#dialogswindows) |
|||
* [HTML5 output](#html5output) |
|||
* [Using the compat3x plugin](#usingthecompat3xplugin) |
|||
|
|||
|
|||
## File structure |
|||
|
|||
The file structure was changed in the 4.0 release to more closely match other JavaScript projects. All minified files are suffixed with `.min.js` and `editor_plugin` and `editor_theme` was replaced with `plugin` and `theme`. |
|||
|
|||
``` |
|||
/tiny_mce/tiny_mce.js -> /tinymce/tinymce.min.js |
|||
/tiny_mce/tiny_mce_src.js -> /tinymce/tinymce.js |
|||
/tiny_mce/plugins/<plugin>/editor_plugin.js -> /tinymce/plugins/<plugin>/plugin.min.js |
|||
/tiny_mce/plugins/<plugin>/editor_plugin_src.js -> /tinymce/plugins/<plugin>/plugin.js |
|||
/tiny_mce/theme/<plugin>/editor_template.js -> /tinymce/plugins/<plugin>/theme.min.js |
|||
/tiny_mce/theme/<plugin>/editor_template_src.js -> /tinymce/plugins/<plugin>/theme.js |
|||
``` |
|||
|
|||
## Removed plugins |
|||
|
|||
These plugins where removed in 4.0: [advhr](http://archive.tinymce.com/wiki.php/Plugin3x:advhr), [advimage](http://archive.tinymce.com/wiki.php/Plugin3x:advimage), [advlink](http://archive.tinymce.com/wiki.php/Plugin3x:advlink), [iespell](http://archive.tinymce.com/wiki.php/Plugin3x:iespell), [inlinepopups](http://archive.tinymce.com/wiki.php/Plugin3x:inlinepopups), [style](http://archive.tinymce.com/wiki.php/Plugin3x:style), [emotions](http://archive.tinymce.com/wiki.php/Plugin3x:emotions) and [xhtmlxtras](http://archive.tinymce.com/wiki.php/Plugin3x:xhtmlxtras). |
|||
|
|||
## New plugins |
|||
|
|||
These are the new plugins in 4.0: [anchor]({{ site.baseurl }}/plugins/anchor), [charmap]({{ site.baseurl }}/plugins/charmap), [compat3x]({{ site.baseurl }}/plugins/compat3x), [hr]({{ site.baseurl }}/plugins/hr), [image]({{ site.baseurl }}/plugins/image), [link]({{ site.baseurl }}/plugins/link), [emoticons]({{ site.baseurl }}/plugins/emoticons), [code]({{ site.baseurl }}/plugins/code) and [textcolor]({{ site.baseurl }}/plugins/textcolor). |
|||
|
|||
## Removed themes |
|||
|
|||
The "simple" and "advanced" themes were removed in 4.0. |
|||
|
|||
## New themes |
|||
|
|||
The new "modern" theme was introduced in 4.0. More themes will be added in the future. |
|||
|
|||
## Event handling |
|||
|
|||
TinyMCE 4.0 has a new way of binding events. Instead of the old dispatcher method, it uses the more common "on" and "off" like for example jQuery. It also allows you to bind multiple events and cancel events using the more common preventDefault and stopPropagation. Check the [API documentation]({{ site.baseurl }}/api/tinymce/tinymce.editor/) for a full list of events. |
|||
|
|||
```js |
|||
// Old event |
|||
editor.onInit(editor, args) { |
|||
// Custom logic |
|||
}); |
|||
|
|||
// New event |
|||
editor.on('init', function(args) { |
|||
// Custom logic |
|||
}); |
|||
``` |
|||
|
|||
## User interface |
|||
|
|||
The user interface logic has been changed entirely in 4.0. Though the more straightforward methods of adding buttons and windows are the same, more complex controls or dialogs needs to be written in the new API style. |
|||
|
|||
## Control states |
|||
|
|||
Each control in TinyMCE 4 is supposed to be a self-contained unit. This enables controls to be created at multiple locations in the UI. So the old controlManager with fixed names has been removed. |
|||
|
|||
```js |
|||
// This is how control states used to function in the 3.x UI API |
|||
editor.onNodeChange.add(function(editor, controlManager, node) { |
|||
controlManager.setActive('SomeButton', node.nodeName == 'A'); |
|||
}); |
|||
``` |
|||
```js |
|||
// In TinyMCE 4 you can use the simpler stateSelector setting |
|||
editor.addButton('SomeButton', { |
|||
text: 'My button', |
|||
stateSelector: 'a' |
|||
}); |
|||
|
|||
// Or you can use custom logic using the "nodechange" event |
|||
editor.addButton('SomeButton', { |
|||
text: 'My button', |
|||
onPostRender: function() { |
|||
var ctrl = this; |
|||
|
|||
ed.on('NodeChange', function(e) { |
|||
ctrl.active(e.element.nodeName == 'A'); |
|||
}); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
## Dialogs/Windows |
|||
|
|||
In TinyMCE 3.x all dialogs where HTML files loaded in iframes or separate windows. In 4.x all windows are DIV elements placed onto the same page as the editor. You can however still load pages into iframe based windows. |
|||
|
|||
```js |
|||
// Open URL based window |
|||
editor.windowManager.open({ |
|||
title: 'My dialog', |
|||
width: 500, |
|||
height: 400, |
|||
url: 'somepage.html' |
|||
}, { |
|||
someArg: 'someValue' |
|||
}); |
|||
``` |
|||
|
|||
Here are some examples on how to extract parameters passed to windows and closing windows inside your "somepage.html" code. |
|||
|
|||
```js |
|||
// Get someArg value inside iframe dialog |
|||
var someArg = top.tinymce.activeEditor.windowManager.getParams().someArg; |
|||
|
|||
// Close the top most window |
|||
top.tinymce.activeEditor.windowManager.close(); |
|||
``` |
|||
|
|||
## HTML5 output |
|||
|
|||
TinyMCE produces HTML5 loose output as of 4.0. This means it can handle all new HTML5 elements and also allow the deprecated HTML4 attributes and elements. If you want to use html4 or html5-strict output check the [schema]({{ site.baseurl }}/configure/content-filtering/#schema) option for details. |
|||
|
|||
## Using the compat3x plugin |
|||
|
|||
As a last resort one can use the [compat3x plugin]({{ site.baseurl }}/plugins/compat3x) it mimics parts of the 3.x API contains a few files removed from 4.x. We only recommend this as a last resort, and it won't work for all plugins. But most plugins should work right out of the box we tested it with some of our old 3.x plugins. |
|||
@ -1,14 +0,0 @@ |
|||
--- |
|||
layout: draft |
|||
title: MoxieManager |
|||
title_nav: MoxieManager |
|||
description_short: MoxieManager |
|||
description: MoxieManager. A premium plugin to manage files & images. |
|||
keywords: moxiemanager .net php relative_urls |
|||
--- |
|||
|
|||
## Live example |
|||
|
|||
This example shows you how to use Moxie Manager for your file and image management. Full documentation on MoxieManager, including how to [integrate with TinyMCE](http://www.moxiemanager.com/documentation/index.php/TinyMCE_Integration), can be found on the [MoxieManager website](http://www.moxiemanager.com/documentation/). |
|||
|
|||
Codepen coming soon! |
|||
@ -1,85 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Modifying spell check dictionaries |
|||
description: Spell Checker Pro dictionaries can be modified to include custom words. |
|||
keywords: enterprise tinymcespellchecker spell check checker pro pricing |
|||
--- |
|||
|
|||
**Note:** Updating the dictionaries packaged with the spellchecker is, in effect, forking the dictionary. Any future enhancements to our dictionaries (e.g. additional words added or errors fixed) could cause you to want to re-apply your updates to these future release dictionaries. |
|||
|
|||
**Note:** Updating the spellchecking feature (i.e. by installing updated versions of `ephox-spelling.war`) may overwrite your modified dictionaries. Please ensure you backup your modified dictionaries before upgrading `ephox-spelling.war`. |
|||
|
|||
### Creating new updates to a dictionary |
|||
|
|||
1) You'll need to identify which language/s you want to apply updates to. The spellchecking feature provides support for <link>13 languages</link>. |
|||
You can locate each individual dictionary .jar file for each supported language in *your_web_server/ephox-spelling/WEB-INF/classes/dictionaries*. |
|||
For the purposes of this document and the examples contained herein, it will be assumed that you're looking to update the English (US) dictionary en_us_4_0.jar. |
|||
Once you have found this .jar file, use a file unzipping utility to extract the contents of the .jar. |
|||
|
|||
2) If the file has been extracted correctly the contents should contain 2 directories: com and META-INF. |
|||
If a custom dictionary has already been created for this spell checker, there will also be a file named userdic.tlx present. If this is the case and you wish to extend the existing custom dictionary then do not delete this file. Please see the <link>Modifying an Updated Dictionary</link> section of this document for more information. |
|||
If, however, you wish to remove the current custom dictionary, then delete this file. For more information on this then please see <link>Removing the Modifications from a Dictionary</link> section of this document. |
|||
|
|||
3) With a plain text editor, create a file called userdic.tlx in the same directory where the contents of the .jar file were extracted. This file will be where the listings for the custom dictionary are placed. |
|||
|
|||
4) At the top of the userdic.tlx file, place the following line: |
|||
|
|||
```` |
|||
#LID 24941 |
|||
```` |
|||
5) For each word that you wish to place into the custom dictionary, list the word in the userdic.tlx file on its own line. Then, one tab spacing from the word, place an i character. Thus, lines in the file should appear in the following format: |
|||
|
|||
```` |
|||
customword i |
|||
```` |
|||
6) Repeat step 5 for all the words you wish to add to the custom dictionary. When finished, save the userdic.tlx file. |
|||
|
|||
7) After saving the userdic.tlx file the .jar file must be recompiled. This requires using the Java .jar command at the command line in the directory where the contents of the original .jar file were extracted. |
|||
|
|||
**Example** |
|||
|
|||
If the contents of the dictionary .jar file were extracted to c:\customdictionary and the location of the jar command is c:\java\bin\jar, then the following command would create a .jar file called en_us_4_0.jar. |
|||
|
|||
```` |
|||
c:\customdictionary>c:\java\bin\jar cvf en_us_4_0.jar . |
|||
```` |
|||
8) Move the newly compiled .jar file back to it's original location, replacing the original file. For the context of this example, you would be replacing your_web_server/ephox-spelling/WEB-INF/classes/dictionaries/en_us_4_0.jar with your updated copy of en_us_4_0.jar. |
|||
|
|||
#### Modifying an updated dictionary |
|||
1) Perform steps 1 and 2 as above in the <link>Creating New Updates to a Dictionary</link> section of this document. |
|||
|
|||
2) Open the userdic.tlx file in a plain text editor. |
|||
|
|||
3) For each word that you wish to add to the custom dictionary, list the word in the userdic.tlx file on its own line. Then, one tab spacing from the word, place an i. Thus, lines in the file should appear in the following format: |
|||
|
|||
```` |
|||
customword i |
|||
```` |
|||
4) Repeat step 3 for all the words you wish to add to the custom dictionary. When finished save the userdic.tlx file. |
|||
|
|||
5) After saving the userdic.tlx file the .jar file must be recompiled. This requires using the Java jar command at the command line in the directory where the contents of the original .jar file were extracted. The name of the new spell checker .jar file is specified in this step. |
|||
|
|||
**Example** |
|||
|
|||
If the contents of the dictionary .jar file were extracted to c:\customdictionary and the location of the jar command is c:\java\bin\jar, then the following command would create a jar file called en_us_4_0.jar. |
|||
|
|||
```` |
|||
c:\customdictionary>c:\java\bin\jar cvf en_us_4_0.jar . |
|||
```` |
|||
6) Move the newly compiled .jar file back to it's original location, replacing the original file. For the context of this example, you would be replacing your_web_server/ephox-spelling/WEB-INF/classes/dictionaries/en_us_4_0.jar with your updated copy of en_us_4_0.jar. |
|||
|
|||
#### removing the modifications from a dictionary |
|||
1) Perform steps 1 and 2 as above in the <link>Creating New Updates to a Dictionary</link> section of this document. |
|||
|
|||
2) Delete the userdic.tlx file from the directory where the contents of the original .jar file were extracted. |
|||
|
|||
3) After deleting the userdic.tlx file the .jar file must be recompiled. This requires using the Java jar command at the command line in the directory where the contents of the original .jar file were extracted. The name of the new spell checker .jar file is specified in this step. |
|||
|
|||
**Example** |
|||
|
|||
If the contents of the dictionary .jar file were extracted to c:\customdictionary, and the location of the jar command is c:\java\bin\jar, then the following command would create a .jar file called en_us_4_0.jar. |
|||
|
|||
```` |
|||
c:\customdictionary>c:\java\bin\jar cvf en_us_4_0.jar . |
|||
```` |
|||
4) Move the newly compiled .jar file back to it's original location, replacing the original file. For the context of this example, you would be replacing your_web_server/ephox-spelling/WEB-INF/classes/dictionaries/en_us_4_0.jar with your updated copy of en_us_4_0.jar. |
|||
@ -1,20 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Example plugin |
|||
title_nav: Example |
|||
description: A template for your own custom plugins. |
|||
keywords: example template custom |
|||
--- |
|||
|
|||
The Example plugin is some code that you can use as a template for your custom plugins. |
|||
|
|||
**Type:** `String` |
|||
|
|||
## Example: |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
selector: "textarea", // change this value according to your HTML |
|||
plugins: "example" |
|||
}); |
|||
``` |
|||
@ -1,20 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Example_dependency plugin |
|||
title_nav: Example_dependency |
|||
description: How to build a plugin that depends on another plugin. |
|||
keywords: example template custom example_dependency |
|||
--- |
|||
|
|||
The Example_dependency plugin is an example plugin with a dependency on another plugin. |
|||
|
|||
**Type:** `String` |
|||
|
|||
##### Example |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
selector: "textarea", // change this value according to your HTML |
|||
plugins: "example_dependency" |
|||
}); |
|||
``` |
|||
@ -1,20 +0,0 @@ |
|||
--- |
|||
layout: default |
|||
title: Layer plugin |
|||
title_nav: Layer |
|||
description: Adds some layer controls (only works on some browsers). |
|||
keywords: browser |
|||
--- |
|||
|
|||
This plugin adds some layer controls. It only works on some browsers and will probably be removed in the future. |
|||
|
|||
**Type:** `String` |
|||
|
|||
##### Example |
|||
|
|||
```js |
|||
tinymce.init({ |
|||
selector: "textarea", // change this value according to your HTML |
|||
plugins: "layer" |
|||
}); |
|||
``` |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue