diff --git a/_data/nav.yml b/_data/nav.yml index 6aff29fbb..60d25a3b3 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -1,3 +1,7 @@ +- url: "quick-start" + pages: + - url: "quick-start" + - url: "get-started-cloud" pages: - url: "editor-and-features" diff --git a/advanced/index.md b/advanced/index.md index dc790bb10..dc385731a 100644 --- a/advanced/index.md +++ b/advanced/index.md @@ -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[8].pages %} +{% assign links = site.data.nav[9].pages %} {% include index.html links=links %} diff --git a/configure/index.md b/configure/index.md index 843bfb527..45b420fec 100644 --- a/configure/index.md +++ b/configure/index.md @@ -6,5 +6,5 @@ description_short: The most customizable rich text editor. description: TinyMCE is not only the most advanced rich text editor it's also the most customizable. type: folder --- -{% assign links = site.data.nav[4].pages %} +{% assign links = site.data.nav[5].pages %} {% include index.html links=links %} diff --git a/demo/index.md b/demo/index.md index 54701ae4c..042ddc144 100644 --- a/demo/index.md +++ b/demo/index.md @@ -13,5 +13,5 @@ redirect_from: - /try-tinymce/ --- -{% assign links = site.data.nav[2].pages %} +{% assign links = site.data.nav[3].pages %} {% include index.html links=links %} diff --git a/enterprise/index.md b/enterprise/index.md index 46212056a..8c27cb49c 100644 --- a/enterprise/index.md +++ b/enterprise/index.md @@ -5,5 +5,5 @@ description: Premium features from the makers of TinyMCE. type: folder --- -{% assign links = site.data.nav[7].pages %} +{% assign links = site.data.nav[8].pages %} {% include index.html links=links %} diff --git a/get-started-cloud/index.md b/get-started-cloud/index.md index 36b0a4e5d..e4d9c1bf9 100644 --- a/get-started-cloud/index.md +++ b/get-started-cloud/index.md @@ -5,5 +5,5 @@ description: If you are new to TinyMCE Cloud, this is the place to start. type: folder --- -{% assign links = site.data.nav[0].pages %} +{% assign links = site.data.nav[1].pages %} {% include index.html links=links %} diff --git a/get-started/index.md b/get-started/index.md index 35dcf52a4..cf62452f9 100644 --- a/get-started/index.md +++ b/get-started/index.md @@ -5,5 +5,5 @@ description: If you are new to self-hosting TinyMCE, this is the place to start. type: folder --- -{% assign links = site.data.nav[1].pages %} +{% assign links = site.data.nav[2].pages %} {% include index.html links=links %} diff --git a/integrations/index.md b/integrations/index.md index 56c50564b..415fd14d4 100644 --- a/integrations/index.md +++ b/integrations/index.md @@ -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[9].pages %} +{% assign links = site.data.nav[10].pages %} {% include index.html links=links %} diff --git a/plugins/index.md b/plugins/index.md index 899550554..3e62669ca 100644 --- a/plugins/index.md +++ b/plugins/index.md @@ -7,5 +7,5 @@ description: TinyMCE is an incredibly powerful, flexible and customizable rich t type: folder --- -{% assign links = site.data.nav[5].pages %} +{% assign links = site.data.nav[6].pages %} {% include index.html links=links %} diff --git a/quick-start/index.md b/quick-start/index.md new file mode 100644 index 000000000..ad9a2350d --- /dev/null +++ b/quick-start/index.md @@ -0,0 +1,10 @@ +--- +layout: default +title: Quick Start to Tiny Cloud +description: If you are new to Tiny Cloud, this is the place to start. +type: folder +--- + +{% assign links = site.data.nav[0].pages %} +{% include index.html links=links %} + diff --git a/quick-start/quick-start.md b/quick-start/quick-start.md new file mode 100644 index 000000000..cf15155ed --- /dev/null +++ b/quick-start/quick-start.md @@ -0,0 +1,64 @@ +--- +layout: default +title: Your First Steps +description_short: Setup TinyMCE in less than 5 minutes (on your desktop). +description: Get a local instance of TinyMCE up and running in less than 5 minutes. +keywords: tinymce script textarea +--- + +From getting a local editor instance up and running in less than 5 minutes (via our TinyMCE Cloud) to advanced installation options, working with plugins and learning about content filtering and spell checking, this is the place to start for developers new to TinyMCE. + +Before we get to it, if you prefer to download TinyMCE and install it locally the [Advanced Install](../advanced-install/#sdkinstall) page in the Get Started guide has instructions. + +Now, back to the TinyMCE Cloud. In the next 4 steps – and in less than 5 minutes – you'll have a basic, local editor instance up and running. + +## Step 1: Include the TinyMCE script + +Include this line of code in the `` of your HTML page: + +```html + +``` + +> Tip: we give you a complete html snippet in Step 2. + + +## 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 ` + + + +``` + +> Note: If you're testing this locally, you will need to prepend `https://` to urls in the `script` tag. For example, ``. + +## Step 3: Saving content with a form POST + +When the `
` is submitted the TinyMCE editor mimics the behavior of a normal HTML `