Skip to content

Commit dbba9b7

Browse files
lorenzo-pomililorenzo-pomili
authored
Feature/tinymce5update 3 part 2 (#2286)
1 parent 67454f0 commit dbba9b7

40 files changed

+1519
-1112
lines changed

‎modules/ROOT/pages/cloud-deployment-guide/editor-plugin-version.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ This URL specifies the latest and quality assured release of {productname}.
2020

2121
NOTE: All {cloudname} channels are based on the {enterpriseversion} version. For information on the latest version of the {cloudname} `{productmajorversion}` release channel, see: xref:release-notes/index.adoc[{productname} Release Notes]. For a list of changes that *may* be present in the {cloudname} testing channel, see: xref:changelog.adoc[{productname} Changelog].
2222

23+
[#{productmajorversion}{productmajorversion}-testingand{productmajorversion}-devreleasechannels]
2324
=== {productmajorversion}, {productmajorversion}-testing, and {productmajorversion}-dev release channels
2425

2526
Choose from the `{productmajorversion}`, `{productmajorversion}-testing`, or `{productmajorversion}-dev` release channels to load the latest version of {productname} from {cloudname}.
@@ -59,6 +60,7 @@ This channel deploys nightly builds of {productname}. This channel includes the
5960
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-dev/tinymce.min.js" referrerpolicy="origin"></script>
6061
----
6162

63+
[[specifyingthetinymceeditorversiondeployedfromcloud]]
6264
== Specifying the version of premium plugins deployed from Tiny Cloud
6365

6466
Each {productname} version is bundled with a set of premium plugins, but it is possible to specify different versions of each premium plugin to use with {productname}. Use the URL query parameters to specify the version of each premium plugin to load. This approach works with both the xref:cloud-deployment-guide/editor-and-features.adoc[{productname} editor and premium plugins deployment via {cloudname}] or just the xref:cloud-deployment-guide/features-only.adoc[premium plugins deployment from {cloudname}].

‎modules/ROOT/pages/integrations/angularjs.adoc‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:keywords: integration integrate angular angularjs angular1
44
:title_nav: AngularJS
55

6-
Integration with AngularJS is currently done through https://github.com/angular-ui/ui-tinymce[angular-ui-tinymce] a third party module. This how-to shows you how to setup a project using https://angularjs.org/[AngularJS] and link:{baseurl}/demo/basic-example/[{productname}].
6+
Integration with AngularJS is currently done through https://github.com/angular-ui/ui-tinymce[angular-ui-tinymce] a third party module. This how-to shows you how to setup a project using https://angularjs.org/[AngularJS] and xref:demo/basic-example.adoc[{productname}].
77

88
== 1. Setting up the project directory
99

@@ -27,18 +27,30 @@ $ bower install angular-ui-tinymce --save
2727

2828
This *demo.html* file has angular properties and two calls to the controller.
2929

30-
```html
31-
<!DOCTYPE html>+++<head>++++++<script type="text/javascript" src="bower_components/tinymce/tinymce.js">++++++</script>++++++<script type="text/javascript" src="bower_components/angular/angular.js">++++++</script>++++++<script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js">++++++</script>++++++<script type="text/javascript" src="app.js">++++++</script>++++++</head>++++++<body ng-app="myApp">++++++<form method="post" ng-controller="TinyMceController">++++++<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel">++++++</textarea>+++
32-
33-
+++<button ng-click="getContent()">+++Get content+++</button>+++ +++<button ng-click="setContent()">+++Set content+++</button>++++++</form>++++++</body>+++
34-
35-
```
30+
[source, html]
31+
----
32+
<!DOCTYPE html>
33+
<head>
34+
<script type="text/javascript" src="bower_components/tinymce/tinymce.js"></script>
35+
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
36+
<script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
37+
<script type="text/javascript" src="app.js"></script>
38+
</head>
39+
<body ng-app="myApp">
40+
<form method="post" ng-controller="TinyMceController">
41+
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
42+
<button ng-click="getContent()">Get content</button>
43+
<button ng-click="setContent()">Set content</button>
44+
</form>
45+
</body>
46+
----
3647

3748
== 4. Creating the app.js file
3849

3950
The *app.js* file shows you how to work with the model that automatically updates {productname}.
4051

41-
```js
52+
[source, js]
53+
----
4254
var myAppModule = angular.module('myApp', ['ui.tinymce']);
4355
4456
myAppModule.controller('TinyMceController', function($scope) {
@@ -57,7 +69,7 @@ $scope.tinymceOptions = {
5769
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
5870
};
5971
});
60-
```
72+
----
6173

6274
== 5. Testing the application
6375

‎modules/ROOT/pages/integrations/bootstrap.adoc‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,50 +7,61 @@
77

88
Using {productname} with bootstrap does not require any special configuration.
99

10-
The {productname} jQuery integration can be used with bootstrap. For information on using the jQuery integration, see: link:{baseurl}/integrations/jquery/[jQuery integration]
10+
The {productname} jQuery integration can be used with bootstrap. For information on using the jQuery integration, see: xref:integrations/jquery.adoc[jQuery integration]
1111

12-
This procedure creates a basic Bootstrap integration containing a {productname} editor based on our link:{baseurl}/demo/basic-example/[Basic example].
12+
This procedure creates a basic Bootstrap integration containing a {productname} editor based on our xref:demo/basic-example.adoc[Basic example].
1313

1414
=== Procedure
1515

1616
. In a HTML file, add a source script for Bootstrap JS.
1717
+
1818
If the project loads Bootstrap from \https://www.bootstrapcdn.com/, use the script provided by the https://www.bootstrapcdn.com/[Bootstrap CDN], which includes the `integrity` and `crossorigin` attributes.
1919

20+
2021
. Source {productname} from the {cloudname} or from a self-hosted location.
21-
** *{cloudname}*
22+
** *{cloudname}*
2223
+
2324
To source {productname} from the {cloudname}, add the following `script` element to the `<head>` of the document:
24-
`html
25-
<script src="{cdnurl}" referrerpolicy="origin"></script>
26-
`
27-
Replace `no-api-key` in the source script (`+<script src=...+`) with a {cloudname} API key, which is created when signing up to the link:{accountsignup}[{cloudname}].
2825
+
29-
Signing up for a {cloudname} API key will also provide a trial of the link:{baseurl}/enterprise/[Premium Plugins].
26+
[source, html, subs="attributes+"]
27+
----
28+
<script src="{cdnurl}" referrerpolicy="origin"></script>
29+
----
30+
+
31+
Replace `no-api-key` in the source script (`+<script src=...+`) with a {cloudname} API key, which is created when signing up to the link:{accountsignup}[{cloudname}].
32+
+
33+
Signing up for a {cloudname} API key will also provide a trial of the xref:enterprise/index.adoc[Premium Plugins].
34+
3035

31-
** *{productname} self-hosted*
36+
** *{productname} self-hosted*
3237
+
3338
To use an independent deployment of {productname}, add the following source script to either the `<head>` or the end of the `<body>` of the HTML file, such as:
34-
`html
35-
<script src="/path/to/tinymce.min.js"></script>
36-
`
3739
+
38-
For information on self-hosting {productname}, see: link:{baseurl}/general-configuration-guide/advanced-install/[Installing {productname}].
39-
. Add an initialization point for {productname}, such as:
40+
[source, html]
41+
----
42+
<script src="/path/to/tinymce.min.js"></script>
43+
----
4044
+
41-
```html+++<div>++++++<textarea id="tiny">++++++</textarea>++++++</div>+++
45+
For information on self-hosting {productname}, see: xref:general-configuration-guide/advanced-install.adoc[Installing {productname}].
46+
47+
. Add an initialization point for {productname}, such as:
4248
+
43-
```
49+
[source, html]
50+
----
51+
<div>
52+
<textarea id="tiny"></textarea>
53+
</div>
54+
----
4455

4556
. Add the {productname} init script.
4657
+
4758
[source, html]
4859
----
49-
<script>
50-
tinymce.init({
51-
selector: 'textarea#tiny'
52-
});
53-
</script>
60+
<script>
61+
tinymce.init({
62+
selector: 'textarea#tiny'
63+
});
64+
</script>
5465
----
5566

5667
== Using TinyMCE in a Bootstrap dialog

‎modules/ROOT/pages/integrations/django.adoc‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,17 @@ If you'd rather download and install the script manually:
3131
. Unzip the package and move the `'path/to/{prodnamecode}/'` directory into the django project.
3232
. Add a URL path to the `{prodnamecode}` directory.
3333
. Add the relevant configuration setting:
34-
** If you do not need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = False`), add `TINYMCE_JS_URL` to the project's `settings.py` file pointing to `tinymce/tinymce.min.js`.
34+
** If you do not need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = False`), add `TINYMCE_JS_URL` to the project's `settings.py` file pointing to `tinymce/tinymce.min.js`.
3535
Such as:
3636
+
3737
[source, py]
3838
----
3939
TINYMCE_JS_URL = os.path.join(MEDIA_URL, "path/to/tinymce/tinymce.min.js")
4040
TINYMCE_COMPRESSOR = False
41-
`
41+
----
4242

43-
** If you do need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = TRUE`), add `TINYMCE_JS_ROOT` to the project's `settings.py` file pointing to the `tinymce/` root directory.
44-
Such as:
43+
** If you do need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = TRUE`), add `TINYMCE_JS_ROOT` to the project's `settings.py` file pointing to the `tinymce/` root directory.
44+
Such as:
4545
+
4646
[source, py]
4747
----

‎modules/ROOT/pages/integrations/jquery.adoc‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
== TinyMCE jQuery integration quick start guide
77

88
The https://github.com/tinymce/tinymce/blob/master/modules/tinymce/src/core/main/js/JqueryIntegration.js[Official {productname} jQuery component] integrates TinyMCE into jQuery projects.
9-
This procedure creates a basic jQuery integration containing a {productname} editor based on our link:{baseurl}/demo/basic-example/[Basic example].
9+
This procedure creates a basic jQuery integration containing a {productname} editor based on our xref:demo/basic-example.adoc[Basic example].
1010

1111
=== Procedure
1212

@@ -15,54 +15,55 @@ This procedure creates a basic jQuery integration containing a {productname} edi
1515
If the project loads jQuery from \https://code.jquery.com/, use the script provided by the https://code.jquery.com/[jQuery CDN], which includes the `integrity` and `crossorigin` attributes.
1616

1717
. Source {productname} and the {productname} jQuery integration from the {cloudname} or from a self-hosted location.
18-
** *{cloudname}*
18+
** *{cloudname}*
1919
+
2020
To source {productname} and the {productname} jQuery integration from the {cloudname}, add the following `script` elements:
2121
+
22-
[,html]
22+
[source, html, subs="attributes+"]
2323
----
2424
<script src="{cdnurl}" referrerpolicy="origin"></script>
2525
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
2626
----
2727
+
2828
Replace `no-api-key` in the source script (`+<script src=...+`) with a {cloudname} API key, which is created when signing up to the link:{accountsignup}[{cloudname}].
2929
+
30-
Signing up for a {cloudname} API key will also provide a trial of the link:{baseurl}/enterprise/[Premium Plugins].
30+
Signing up for a {cloudname} API key will also provide a trial of the xref:enterprise/index.adoc[Premium Plugins].
3131

32-
** *{productname} self-hosted*
32+
** *{productname} self-hosted*
3333
+
3434
To use an independent deployment of {productname}, add source scripts to either the `<head>` or the end of the `<body>` of the HTML file, such as:
3535
+
36-
[,html]
36+
[source, html]
3737
----
3838
<script src="/path/to/tinymce.min.js"></script>
3939
<script src="/path/to/jquery.tinymce.min.js"></script>
4040
----
4141
+
42-
For information on self-hosting {productname}, see: link:{baseurl}/general-configuration-guide/advanced-install/[Installing {productname}].
42+
For information on self-hosting {productname}, see: xref:general-configuration-guide/advanced-install.adoc[Installing {productname}].
43+
4344
. Add an initialization point for {productname}, such as:
4445
+
45-
[,html]
46+
[source, html]
4647
----
47-
<div>
48-
<textarea id="tiny"></textarea>
49-
</div>
48+
<div>
49+
<textarea id="tiny"></textarea>
50+
</div>
5051
----
5152

5253
. Add the {productname} jQuery init script. The {productname} selector is defined in the jQuery prefix, and any other settings are defined within the `tinymce` object.
5354
+
54-
[,html]
55+
[source, html]
5556
----
56-
<script>
57-
$('textarea#tiny').tinymce({ });
58-
</script>
57+
<script>
58+
$('textarea#tiny').tinymce({ });
59+
</script>
5960
----
6061

6162
=== Example jQuery integration
6263

63-
To load a TinyMCE editor similar to the link:{baseurl}/demo/basic-example/[Basic example], add the following code to an empty HTML file.
64+
To load a TinyMCE editor similar to the xref:demo/basic-example.adoc[Basic example], add the following code to an empty HTML file.
6465

65-
[,js]
66+
[source, html, subs="attributes+"]
6667
----
6768
<!DOCTYPE html>
6869
<html lang="en">
@@ -97,7 +98,7 @@ To load a TinyMCE editor similar to the link:{baseurl}/demo/basic-example/[Basic
9798

9899
To render {productname} instances inside jQuery UI dialogs, add the following code:
99100

100-
[,js]
101+
[source, js]
101102
----
102103
// Prevent jQuery UI dialog from blocking focusin
103104
$(document).on('focusin', function(e) {

‎modules/ROOT/pages/integrations/laravel/laravel-introduction.adoc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ https://laravel.com/[Laravel] is a scaleable web application framework built on
77

88
These guides assist with adding {productname} to pages or views in Laravel. The example Laravel projects created in these procedures are based on the Laravel project documented in the Laravel Docs, under https://laravel.com/docs/8.x/installation#installation-via-composer[Installation Via Composer]. These guides will create two blades: one for the JavaScript and another for the editor placeholder, to reflect how {productname} should be used in production environments.
99

10-
* link:{baseurl}/integrations/laravel/laravel-tiny-cloud/[Using TinyMCE from the Tiny Cloud CDN with the Laravel framework].
11-
* link:{baseurl}/integrations/laravel/laravel-composer-install/[Using the TinyMCE Composer package with the Laravel framework].
12-
* link:{baseurl}/integrations/laravel/laravel-zip-install/[Using the TinyMCE .zip package with the Laravel framework].
10+
* xref:integrations/laravel/laravel-tiny-cloud.adoc[Using TinyMCE from the Tiny Cloud CDN with the Laravel framework].
11+
* xref:integrations/laravel/laravel-composer-install.adoc[Using the TinyMCE Composer package with the Laravel framework].
12+
* xref:integrations/laravel/laravel-zip-install.adoc[Using the TinyMCE .zip package with the Laravel framework].

0 commit comments

Comments
 (0)