invisi/tinymce-docs-4x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tonnes of small changes

Browse Source 
Added in headings and other changes to nav.
This commit is contained in:
Andrew Roberts
2015-11-03 21:11:05 -08:00
parent 4a85db8c70
commit 13b53d310a
25 changed files with 169 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_data/nav.yml
+3 -3
View File
@@ -1,8 +1,8 @@
- title: Quick Start
- title: Quick Start Tutorial
- title: Developer Guide
pages:
- title: Install
- title: Configuration Quick Start
- title: Installing TinyMCE
- title: Basic Configuration
- title: Configuration Reference
pages:
- title: General
_includes/configuration/general/auto-focus.md
+2 -2
View File
@@ -1,6 +1,6 @@
## auto_focus
This option enables you to auto focus an editor instance. The value of this option should be an editor instance `id`. The editor instance id is the id for the original `textarea` or `div` element that got replaced.
Automatically set the focus to an editor instance. The value of this option should be an editor instance `id`. The editor instance id is the id for the original `textarea` or `div` element that got replaced.
**Example:**
@@ -8,7 +8,7 @@ This option enables you to auto focus an editor instance. The value of this opti
tinymce.init({
...
selector: "textarea", // change this value according to your HTML
auto_focus: "elm1",
auto_focus: "element1",
...
});
```
_includes/configuration/general/automatic-uploads.md
+1 -1
View File
@@ -1,6 +1,6 @@
## automatic_uploads
This option allows you to disable TinyMCE from automatically uploading local images.
Enable or disable TinyMCE from automatically uploading local images.
**Type:** `Boolean`
_includes/plugins/nonbreaking.md
+6 -2
View File
@@ -13,10 +13,12 @@ This plugin adds a button for inserting nonbreaking space entities ` ` at t
```js
tinymce.init({
...
selector: "textarea", // change this value according to your html
plugins: "nonbreaking",
menubar: "insert",
toolbar: "nonbreaking"
toolbar: "nonbreaking",
...
});
```
@@ -40,11 +42,13 @@ However, the `true` condition does capture the tab key and contain it within the
```js
tinymce.init({
...
selector: "textarea", // change this value according to your html
plugins: "nonbreaking",
mewnubar: "insert",
toolbar: "nonbreaking",
nonbreaking_force_tab: true
nonbreaking_force_tab: true,
...
});
```
css/shared.css
+6 -2
View File
@@ -349,8 +349,12 @@ body {
font-family: "avenir";
font-size: 14px; }
h1{
font-size:48px;
}
h2 {
font-size: 48px;
font-size: 34px;
font-family: "aileron";
font-weight: 200;
line-height: 58px; }
@@ -367,7 +371,7 @@ h2 {
color: #A3C8ED; }
h3 {
font-size: 48px;
font-size: 24px;
font-family: "aileron";
font-weight: 200;
line-height: 58px; }
developer-guide/configuration-quick-start.md → developer-guide/basic-configuration.md
+9 -6
View File
@@ -1,15 +1,18 @@
---
layout: default
title: Configuration Quick Start
title: Getting Started with TinyMCE Configuration
---
# Getting Started with TinyMCE Configuration
TinyMCE provides a wide range of configuration options that enable you to integrate it tightly with your application.
In this Configuration Quick Start we will introduce the basic configuration options typically used in traditional form-based layouts, along with examples of how to use TinyMCE as an inline editor (which is very useful when creating user experiences where the editing view of the page is merged with the reading view of the page.)
# Basic Configuration
## Basic Configuration
Once you've added the TinyMCE script to your page there are three configuration aspects you need to consider:
@@ -18,7 +21,7 @@ Once you've added the TinyMCE script to your page there are three configuration
* Toolbar Configuration
## Selector Configuration
### Selector Configuration
This is the most important configuration option for your TinyMCE integration. Selector configuration allows you to use CSS selector syntax to determine which elements on the page should be editable through TinyMCE.
@@ -62,7 +65,7 @@ tinymce.init({
For more information on the differences between regular and inline editing modes see the Inline Configuration section on this page.
## Plugins Configuration
### Plugins Configuration
The `plugins` configuration option allows you to enable functionality within the editor. By default, **no** plugins are loaded.
@@ -81,7 +84,7 @@ tinymce.init({
The full list of plugins, their options and control associations is [available here](../plugin-toolbar-menu-controls/).
## Toolbar Configuration
### Toolbar Configuration
In most TinyMCE integrations it's desirable to change the toolbar configuration to suit your needs. By default TinyMCE provides a basic set of editing tools on the toolbar and it is recommended that you adapt the toolbar configuration to match your requirements.
@@ -130,7 +133,7 @@ Alternatively, you may specify multiple toolbars through the use of the [toolbar
# Basic Configuration Example
## Basic Configuration Example
Using the configuration options above you'll be able to instantiate TinyMCE and perform the initial customizations to match your editor requirements. TinyMCE has many many other configuration options available that enable further customization and extension of the editor.
developer-guide/configuration-reference/callbacks.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Callbacks
---
# Callback Configuration
TinyMCE's callback settings allow the execution of callbacks after specific events have occurred in the editor.
{% include configuration/callbacks/color-picker-callback.md %}
developer-guide/configuration-reference/cleanup-output.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Cleanup/Output
---
# Cleanup and Output Configuration
These settings change the way the editor handles the input and output of content. They will help you to create clean, maintainable and readable content by removing extraneous HTML elements and styles.
{% include configuration/cleanup-output/allow-conditional-comments.md %}
developer-guide/configuration-reference/content-style.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Content Style
---
# Content Style Configuration
These settings allow you to modify the styles that are applied to content inside the editor. Custom CSS can be loaded into the editor through the use of the content_css setting.
{% include configuration/content-style/body-id.md %}
developer-guide/configuration-reference/general.md
+3 -1
View File
@@ -3,7 +3,9 @@ layout: default
title: General
---
All configuration options below are to be placed within the `tinyMCE.init()` JavaScript call. This call will usually be made from outside of TinyMCE.
# General Configuration
All configuration options below are to be placed within the `tinyMCE.init()` JavaScript call.
{% include configuration/general/auto-focus.md %}
developer-guide/configuration-reference/image-upload.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Image Upload
---
# Image Upload Configuration
These settings affect the image upload facility of the editor. The location, path and credentials of the image uploader can be set here.
{% include configuration/image-upload/images-uploads-url.md %}
developer-guide/configuration-reference/index.md
+12 -10
View File
@@ -3,35 +3,37 @@ layout: default
title: Configuration Reference
---
# Configuration Reference
TinyMCE is not only the most advanced rich text editor it's also the most customizable. We have placed the many customization options into logical groups.
# [General Customization Options](general)
## [General Customization Options](general)
Guide to general customization options.
# [Callbacks](callbacks)
## [Callbacks](callbacks)
These settings allow the execution of callbacks after specific events have occurred in the editor.
# [Cleanup/Output](cleanup-output)
## [Cleanup/Output](cleanup-output)
These settings change the way the editor handles the input and output of content.
# [Content Style](content-style)
## [Content Style](content-style)
These settings allow you to modify the styles that are applied to content inside the editor.
# [Image Upload](image-upload)
## [Image Upload](image-upload)
These settings affect the image upload facility of the editor.
# [Security](security)
## [Security](security)
This setting affects the security features of TinyMCE.
# [Undo/Redo](undo-redo)
## [Undo/Redo](undo-redo)
These settings change the behaviour of undo and redo.
# [URL](url)
## [URL](url)
These settings affect the way URLs are handled by the editor.
# [User Interface](user-interface)
## [User Interface](user-interface)
These settings affect the user interface.
# [Visual Aids](visual-aids)
## [Visual Aids](visual-aids)
These settings apply to the content of the editor while it is being edited.
developer-guide/configuration-reference/security.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Security
---
# Security Configuration
This setting affects the security features of TinyMCE. The content security policy for the editor's iframe may be set here.
{% include configuration/security/content-security-policy.md %}
developer-guide/configuration-reference/undo-redo.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Undo/Redo
---
# Undo and Redo Configuration
These settings change the behavior of undo and redo.
{% include configuration/undo-redo/custom-undo-redo-levels.md %}
developer-guide/configuration-reference/url.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: URL
---
# URL Handling Configuration
These settings affect the way URLs are handled by the editor.
{% include configuration/url/convert-urls.md %}
developer-guide/configuration-reference/user-interface.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: User Interface
---
# User Interface Configuration
These settings affect the user interface. Settings that control toolbars, menus, buttons and more are available here.
{% include configuration/user-interface/elementpath.md %}
developer-guide/configuration-reference/visual-aids.md
+2
View File
@@ -3,6 +3,8 @@ layout: default
title: Visual Aids
---
# Configuration of Visual Aids
These settings apply to the content of the editor while it is being edited. An example of a visual aid that is available is the light grey, dotted border that is applied to tables when the border property is set to "0". These settings can change the classes that are applied to visual aids in addition to determining whether they appear at all.
{% include configuration/visual-aids/visual.md %}
developer-guide/index.md
+6 -4
View File
@@ -3,10 +3,12 @@ layout: default
title: Developer Guide
---
# [Install](./install/)
# TinyMCE Developer Guide
# [Configuration Quick Start](./configuration-quick-start/)
## [Installing TinyMCE](./installing-tinymce/)
# [Configuration Reference](./configuration-reference/)
## [Getting Started with TinyMCE Configuration](./basic-configuration/)
# [Plugins & Toolbar/Menu Controls](./plugins-toolbar-menu-controls/)
## [Configuration Reference](./configuration-reference/)
## [Plugins & Toolbar/Menu Controls](./plugins-toolbar-menu-controls/)
developer-guide/install.md → developer-guide/installing-tinymce.md
+17 -15
View File
@@ -4,18 +4,20 @@ title: Install
css: foo.css
---
# Installing TinyMCE
If you've already installed TinyMCE you can skip these installation steps and move on to configuring the editor.
Otherwise, the [Configuration Quick Start](../configuration-quick-start/) is a great place to learn about basic editor configuration. When you're ready to deep dive into advanced configuration options you'll find the [Configuration Reference](../configuration-reference/) and [Plugin & Toolbar/Menu Control](../plugin-toolbar-menu-controls/) resources extremely helpful.
# CDN Installation
## CDN Installation
The easiest way to get started is to use our CDN.
## Step 1: Include the TinyMCE Script
### Step 1: Include the TinyMCE Script
Include this line of code in the `<head>` of your page:
@@ -23,7 +25,7 @@ Include this line of code in the `<head>` of your page:
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
```
## Step 2: Initialize TinyMCE as Part of a Web Form
### Step 2: Initialize TinyMCE as Part of a Web Form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
@@ -52,7 +54,7 @@ In this example, let's replace `<textarea id="mytextarea">` with a TinyMCE edito
</html>
```
## Step 3: Saving Content with a `<form>` `post`
### Step 3: Saving Content with a `<form>` `post`
When the `form` is submitted the TinyMCE editor mimics the behavior of a normal HTML `<textarea>` during a form `post`. No additional configuration is required.
@@ -73,18 +75,18 @@ For next steps see the [Developer Guide](../developer-guide/).
# Package Manager Installation
## Package Manager Installation
If you've already installed TinyMCE [learn how to add it to a page].
## NPM
### NPM
```
npm install tinymce
```
## Bower
### Bower
```
bower install tinymce
@@ -99,7 +101,7 @@ npm i
jake
```
## Composer
### Composer
If you're using Composer package manager, add the following to `composer.json`.
@@ -107,7 +109,7 @@ If you're using Composer package manager, add the following to `composer.json`.
php composer.phar require "tinymce/tinymce" ">= 4"
```
## NuGet
### NuGet
```
Install-Package TinyMCE
@@ -132,7 +134,7 @@ For next steps see the [Developer Guide](../developer-guide/).
# SDK / Download Installation
## SDK / Download Installation
If you'd rather download and install the script manually, get the package from [TinyMCE Downloads]. Unzip the package and move the `"tinymce/js/tinymce"` directory into a web accessible location on your web server (for example, `localhost`).
@@ -146,7 +148,7 @@ For next steps see the [Developer Guide](../developer-guide/).
# jQuery
## jQuery
We have a jQuery plugin [available here] if you'd rather install TinyMCE using this method. As with the SDK option, unzip the package and move the `"tinymce/js/tinymce"` directory into a web accessible location on your web server (for example, `localhost`).
@@ -161,7 +163,7 @@ For next steps see the [Developer Guide](../developer-guide/).
# Custom Build Download
## Custom Build Download
TinyMCE tries to be as flexible to your project's needs as possible. We have a customized package downloader [available here](http://www.tinymce.com/download/custom_package.php) where you can select the core, plugins, skins, themes and compression options you'd like to include in the download.
@@ -171,13 +173,13 @@ For next steps see the [Developer Guide](../developer-guide/).
# Adding TinyMCE to a Page
## Adding TinyMCE to a Page
Adding TinyMCE to a page is as simple as initializing the script on a `<textarea>` as part of an HTML `<form>`. When the `<form>` is submitted the contents of the editor will be submitted as part of the `<form>` `post`.
Here's how to do it using the CDN option as an example.
## Step 1: Installation
### Step 1: Installation
Include this line of code in the `<head>` of your page:
@@ -185,7 +187,7 @@ Include this line of code in the `<head>` of your page:
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
```
## Step 2: Initialize TinyMCE as Part of a Web Form
### Step 2: Initialize TinyMCE as Part of a Web Form
With the script included, initialize TinyMCE on any element (or elements) in your webpage.
index.md
+8 -6
View File
@@ -1,10 +1,12 @@
---
layout: default
title: Developer Documentation
title: TinyMCE Developer Documentation
---
# [Quick Start](./quick-start/)
# [Developer Guide](./developer-guide/)
# [Resources](./resources/)
# [API Reference](./api/)
# [Support](./support/)
# TinyMCE Developer Documentation
## [Quick Start Tutorial](./quick-start-tutorial/)
## [Developer Guide](./developer-guide/)
## [Resources](./resources/)
## [Advanced API Reference](./api/)
## [Support](./support/)
quick-start-tutorial.md
+68
View File
@@ -0,0 +1,68 @@
---
layout: default
title: Quick Start Tutorial
---
# Quick Start Tutorial
This Quick Start Tutorial will help you download and install TinyMCE using our content delivery network (the easiest and quickest way to get up and running.)
If you're familiar with this step move on to the [Developer Guide](../developer-guide) where you'll find additional [installation options](../developer-guide/installing-tinymce/), a [Configuration Quick Start](../developer-guide/configuration-quick-start/), the advanced [Configuration Reference](../developer-guide/configuration-reference/) and [Plugin & Toolbar/Menu Control](../developer-guide/plugins-toolbar-menu-controls/) options.
## Step 1: Include the TinyMCE Script
Include this line of code in the `<head>` of your HTML page:
```html
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
```
## Step 2: Initialize TinyMCE as Part of a Web Form
With the script included, initialize TinyMCE on any element (or elements) in your web page.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a **selector** to `tinymce.init()`.
In this example, let's replace `<textarea id="mytextarea">` with a TinyMCE editor instance by passing the selector `'#mytextarea'` to `tinymce.init()`.
```html
<!DOCTYPE html>
<html>
<head>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#mytextarea"
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
```
And that's all there is to it! Read on as we have two more tips for you.
## Step 3: Saving Content with a `<form>` POST
When the `<form>` is submitted the TinyMCE editor mimics the behavior of a normal HTML `<textarea>` during a form `POST`. In your form handler you can process the content submited as if it had come from a regular `<textarea>`.
## Step 4: Editor Configuration
For first time TinyMCE developers we strongly encourage you to read our [Configuration Quick Start](../developer-guide/configuration-quick-start/), where we introduce selector, toolbar and plugin configuration options. There is also an "advanced" example of a TinyMCE instance and we explain TinyMCE's inline mode.
## Next Steps for Advanced TinyMCE Developers
If you are familiar with integrating TinyMCE and don't need a [configuration refresher](../developer-guide/configuration-quick-start/), move on to the [Developer Guide](../developer-guide) where you'll find additional [installation options](../developer-guide/install/), the advanced [configuration reference](../developer-guide/configuration-reference/) and [plugin & toolbar/menu control](../developer-guide/plugins-toolbar-menu-controls/) options.
`*` If you are using our CDN see the [detailed installation page](../developer-guide/install/) for information about using external plugins, custom languages and the TinyMCE versions available via the CDN.
quick-start.md
-71
View File
@@ -1,71 +0,0 @@
---
layout: default
title: Quick Start
---
This Quick Start will help you download and install TinyMCE using the CDN (the easiest and quickest way to get up and running).
If you're familiar with this step move on to the [Developer Guide](../developer-guide) where you'll find additional [installation options](../developer-guide/install/), a [Configuration Quick Start](../developer-guide/configuration-quick-start/), the advanced [Configuration Reference](../developer-guide/configuration-reference/) and [Plugin & Toolbar/Menu Control](../developer-guide/plugins-toolbar-menu-controls/) options.
# Step 1: Include the TinyMCE Script
Include this line of code in the `<head>` of your page:
```html
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
```
# Step 2: Initialize TinyMCE as Part of a Web Form
With the script included, initialize TinyMCE on any element (or elements) in your webpage.
Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a selector to `tinymce.init()`.
In this example, let's replace `<textarea id="mytextarea">` with a TinyMCE editor instance by passing the selector `'#mytextarea'` to `tinymce.init()`.
```html
<!DOCTYPE html>
<html>
<head>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#mytextarea"
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
```
And that's all there is to it! Read on as we have two more tips for you.
# Step 3: Saving Content with a `<form>` `post`
When the `form` is submitted the TinyMCE editor mimics the behavior of a normal HTML `<textarea>` during a form `post`. No additional configuration is required.
# Step 4: Editor Configuration
For first time TinyMCE developers we strongly encourage you to read our [Configuration Quick Start](../developer-guide/configuration-quick-start/), where we introduce Selector, Plugin and Toolbar configuration options. There also an "advanced" example of a TinyMCE instance and we explain TinyMCE's inline configuration.
# Next Steps for TinyMCE Pros
If you are a TinyMCE pro and don't need a [configuration refresher](../developer-guide/configuration-quick-start/), move on to the [Developer Guide](../developer-guide) where you'll find additional [install options](../developer-guide/install/), the advanced [Configuration Reference](../developer-guide/configuration-reference/) and [Plugin & Toolbar/Menu Control](../developer-guide/plugins-toolbar-menu-controls/) options.
`*` If you are using our CDN see the [detailed install page](../developer-guide/install/) for information about using external plugins, custom languages and the TinyMCE versions available via the CDN.
resources/tutorials/handling_asynchronous_image_uploads.md
+1 -1
View File
@@ -3,7 +3,7 @@ layout: default
title: Handling Asynchronous Image Uploads
---
Please note, this image upload feature is available for TinyMCE community version 4.2 and above. Alternatively, the Ephox PowerPaste plugin is capable of this functionality in versions of TinyMCE 4.0 and above.
Please note, this image upload feature is available for TinyMCE version 4.2 and above. Alternatively, the Ephox Power Paste plugin is capable of this functionality in versions of TinyMCE 4.0 and above.
The image uploader is designed to complement the new image editing functionality of TinyMCE 4.2. Images that are edited within TinyMCE can be uploaded using this function. Local images that are added through other means - for example drag and drop when using the [paste_data_images](http://www.tinymce.com/wiki.php/Configuration:paste_data_images) configuration property or using Ephox's Power Paste Plugin - can also be uploaded using this functionality.
resources/tutorials/index.md
+6 -6
View File
@@ -25,19 +25,19 @@ Here's how to [create custom dialogs](creating_custom_dialogs)
Here's the [image upload feature](handling_asynchronous_image_uploads) available in TinyMCE community version 4.2 and above.
## Migration guide from 3.x
If you're migrating from TinyMCE 3.x [this guide will help](migration_guide_from_3x).
## TinyMCE in a boostrap dialog
## TinyMCE in a Bootstrap dialog
If you're using TinyMCE with Bootstrap you'll override the built in block on `focusin` in bootstrap dialogs. [Here's how to do it](tinymce_in_a_boostrap_dialog).
## TinyMCE in a jQuery UI dialog
You need to add some custom logic when rendering TinyMCE instances inside jQuery UI dialogs since it blocks all focus in calls of elements outside the dialog. [Check this fiddle out](tinymce_in_a_jquery_ui_dialog) for a working example.
// [Link to page, embed external fiddle into this page](tinymce_in_a_jquery_ui_dialog)
## Migration guide from 3.x
If you're migrating from TinyMCE 3.x [this guide will help](migration_guide_from_3x).
// [Link to page, embed external fiddle into this page](tinymce_in_a_jquery_ui_dialog)
## Using the gzip compressors
resources/tutorials/tinymce_in_a_boostrap_dialog.md → resources/tutorials/tinymce_in_a_bootstrap_dialog.md
+3 -3
View File
@@ -1,14 +1,14 @@
---
layout: default
title: TinyMCE in a Boostrap Dialog
title: TinyMCE in a Bootstrap Dialog
---
You need to override the built in block on `focusin` in bootstrap dialogs when using TinyMCE inside it. See this working example for details.
You need to override the built in block on `focusin` in Bootstrap dialogs when using TinyMCE inside it. See this working example for details.
Bootstrap blocks all focus events on contents within the dialog. Add this script to your page and it will allow users to click inside the editor.
```js
// Prevent bootstrap dialog from blocking focusin
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();