From 13b53d310a2ae5fff0ecb73a9a2faad3af27ff0e Mon Sep 17 00:00:00 2001 From: Andrew Roberts Date: Tue, 3 Nov 2015 21:11:05 -0800 Subject: [PATCH] Tonnes of small changes Added in headings and other changes to nav. --- _data/nav.yml | 6 +- _includes/configuration/general/auto-focus.md | 4 +- .../general/automatic-uploads.md | 2 +- _includes/plugins/nonbreaking.md | 8 ++- css/shared.css | 8 ++- ...-quick-start.md => basic-configuration.md} | 15 ++-- .../configuration-reference/callbacks.md | 2 + .../configuration-reference/cleanup-output.md | 2 + .../configuration-reference/content-style.md | 2 + .../configuration-reference/general.md | 4 +- .../configuration-reference/image-upload.md | 2 + .../configuration-reference/index.md | 22 +++--- .../configuration-reference/security.md | 2 + .../configuration-reference/undo-redo.md | 2 + .../configuration-reference/url.md | 2 + .../configuration-reference/user-interface.md | 2 + .../configuration-reference/visual-aids.md | 2 + developer-guide/index.md | 10 +-- .../{install.md => installing-tinymce.md} | 32 +++++---- index.md | 14 ++-- quick-start-tutorial.md | 68 ++++++++++++++++++ quick-start.md | 71 ------------------- .../handling_asynchronous_image_uploads.md | 2 +- resources/tutorials/index.md | 12 ++-- ...og.md => tinymce_in_a_bootstrap_dialog.md} | 6 +- 25 files changed, 169 insertions(+), 133 deletions(-) rename developer-guide/{configuration-quick-start.md => basic-configuration.md} (98%) rename developer-guide/{install.md => installing-tinymce.md} (94%) create mode 100644 quick-start-tutorial.md delete mode 100644 quick-start.md rename resources/tutorials/{tinymce_in_a_boostrap_dialog.md => tinymce_in_a_bootstrap_dialog.md} (72%) diff --git a/_data/nav.yml b/_data/nav.yml index 9b4db2c..bf1af97 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -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 diff --git a/_includes/configuration/general/auto-focus.md b/_includes/configuration/general/auto-focus.md index d48928d..c977a29 100644 --- a/_includes/configuration/general/auto-focus.md +++ b/_includes/configuration/general/auto-focus.md @@ -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", ... }); ``` diff --git a/_includes/configuration/general/automatic-uploads.md b/_includes/configuration/general/automatic-uploads.md index 14b1146..32834e4 100644 --- a/_includes/configuration/general/automatic-uploads.md +++ b/_includes/configuration/general/automatic-uploads.md @@ -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` diff --git a/_includes/plugins/nonbreaking.md b/_includes/plugins/nonbreaking.md index 50a6e7e..9bb3194 100644 --- a/_includes/plugins/nonbreaking.md +++ b/_includes/plugins/nonbreaking.md @@ -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, + ... }); ``` diff --git a/css/shared.css b/css/shared.css index 1f2a2cc..819cb93 100644 --- a/css/shared.css +++ b/css/shared.css @@ -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; } diff --git a/developer-guide/configuration-quick-start.md b/developer-guide/basic-configuration.md similarity index 98% rename from developer-guide/configuration-quick-start.md rename to developer-guide/basic-configuration.md index a47ddfd..3270a5e 100644 --- a/developer-guide/configuration-quick-start.md +++ b/developer-guide/basic-configuration.md @@ -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. diff --git a/developer-guide/configuration-reference/callbacks.md b/developer-guide/configuration-reference/callbacks.md index 5ed05f4..ebc8c4f 100644 --- a/developer-guide/configuration-reference/callbacks.md +++ b/developer-guide/configuration-reference/callbacks.md @@ -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 %} diff --git a/developer-guide/configuration-reference/cleanup-output.md b/developer-guide/configuration-reference/cleanup-output.md index 2acb2bd..341b5c7 100644 --- a/developer-guide/configuration-reference/cleanup-output.md +++ b/developer-guide/configuration-reference/cleanup-output.md @@ -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 %} diff --git a/developer-guide/configuration-reference/content-style.md b/developer-guide/configuration-reference/content-style.md index 837f9d8..370aaaa 100644 --- a/developer-guide/configuration-reference/content-style.md +++ b/developer-guide/configuration-reference/content-style.md @@ -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 %} diff --git a/developer-guide/configuration-reference/general.md b/developer-guide/configuration-reference/general.md index 2e58123..5c753fc 100644 --- a/developer-guide/configuration-reference/general.md +++ b/developer-guide/configuration-reference/general.md @@ -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 %} diff --git a/developer-guide/configuration-reference/image-upload.md b/developer-guide/configuration-reference/image-upload.md index d4aaa08..2e65859 100644 --- a/developer-guide/configuration-reference/image-upload.md +++ b/developer-guide/configuration-reference/image-upload.md @@ -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 %} diff --git a/developer-guide/configuration-reference/index.md b/developer-guide/configuration-reference/index.md index 39835aa..dbc5791 100644 --- a/developer-guide/configuration-reference/index.md +++ b/developer-guide/configuration-reference/index.md @@ -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. diff --git a/developer-guide/configuration-reference/security.md b/developer-guide/configuration-reference/security.md index a8cf205..60855af 100644 --- a/developer-guide/configuration-reference/security.md +++ b/developer-guide/configuration-reference/security.md @@ -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 %} diff --git a/developer-guide/configuration-reference/undo-redo.md b/developer-guide/configuration-reference/undo-redo.md index 9186c97..8b632fd 100644 --- a/developer-guide/configuration-reference/undo-redo.md +++ b/developer-guide/configuration-reference/undo-redo.md @@ -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 %} diff --git a/developer-guide/configuration-reference/url.md b/developer-guide/configuration-reference/url.md index d6f4df8..6b37b06 100644 --- a/developer-guide/configuration-reference/url.md +++ b/developer-guide/configuration-reference/url.md @@ -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 %} diff --git a/developer-guide/configuration-reference/user-interface.md b/developer-guide/configuration-reference/user-interface.md index 97bfb4d..4397844 100644 --- a/developer-guide/configuration-reference/user-interface.md +++ b/developer-guide/configuration-reference/user-interface.md @@ -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 %} diff --git a/developer-guide/configuration-reference/visual-aids.md b/developer-guide/configuration-reference/visual-aids.md index 7e09c27..a27b064 100644 --- a/developer-guide/configuration-reference/visual-aids.md +++ b/developer-guide/configuration-reference/visual-aids.md @@ -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 %} diff --git a/developer-guide/index.md b/developer-guide/index.md index 91f3957..17ee5f5 100644 --- a/developer-guide/index.md +++ b/developer-guide/index.md @@ -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/) diff --git a/developer-guide/install.md b/developer-guide/installing-tinymce.md similarity index 94% rename from developer-guide/install.md rename to developer-guide/installing-tinymce.md index ebdec6f..01fe3a2 100644 --- a/developer-guide/install.md +++ b/developer-guide/installing-tinymce.md @@ -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 `` of your page: @@ -23,7 +25,7 @@ Include this line of code in the `` of your page: ``` -## 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 ` + + + +``` + +And that's all there is to it! Read on as we have two more tips for you. + + +## Step 3: Saving Content with a `
` POST + +When the `` is submitted the TinyMCE editor mimics the behavior of a normal 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 `
` `post` - -When the `form` is submitted the TinyMCE editor mimics the behavior of a normal HTML `