You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
521 lines
13 KiB
521 lines
13 KiB
*Covered in this section:*
|
|
|
|
* xref:supported-angular-versions[Supported Angular versions]
|
|
* xref:installing-the-tinymce-angular-integration-using-npm[Installing the TinyMCE Angular integration using NPM]
|
|
* xref:using-the-tinymce-angular-integration[Using the TinyMCE Angular integration]
|
|
* xref:configuring-the-editor[Configuring the editor]
|
|
** xref:apikey[`+apiKey+`]
|
|
** xref:licensekey[`+licenseKey+`]
|
|
** xref:cloudchannel[`+cloudChannel+`]
|
|
** xref:disabled[`+disabled+`]
|
|
** xref:id[`+id+`]
|
|
** xref:init[`+init+`]
|
|
** xref:initialvalue[`+initialValue+`]
|
|
** xref:inline[`+inline+`]
|
|
** xref:outputformat[`+outputFormat+`]
|
|
** xref:plugins[`+plugins+`]
|
|
** xref:tagname[`+tagName+`]
|
|
** xref:toolbar[`+toolbar+`]
|
|
* xref:using-the-ngmodel-directive[Using the `+ngModel+` directive]
|
|
** xref:modelevents[`+modelEvents+`]
|
|
* xref:using-with-reactive-forms[Using with reactive forms]
|
|
* xref:event-binding[Event binding]
|
|
** xref:supported-browser-events[Supported browser events]
|
|
** xref:supported-tinymce-events[Supported TinyMCE events]
|
|
** xref:allowedevents[`+allowedEvents+`]
|
|
** xref:ignoreevents[`+ignoreEvents+`]
|
|
|
|
[[supported-angular-versions]]
|
|
== Supported Angular versions
|
|
|
|
The following table shows the supported versions of Angular and the required version of the `+tinymce-angular+` integration package.
|
|
|
|
[cols="^,^",options="header"]
|
|
|===
|
|
|Angular Version |`+tinymce-angular+` version
|
|
|16+ |8.x
|
|
|14 or 15 |7.x
|
|
|13 |6.x
|
|
|9 to 12 |4.x
|
|
|5 to 8 |3.x
|
|
|4 or older |Not Supported
|
|
|===
|
|
|
|
[[installing-the-tinymce-angular-integration-using-npm]]
|
|
== Installing the TinyMCE Angular integration using NPM
|
|
|
|
To install the `+tinymce-angular+` package and save it to your `+package.json+`.
|
|
|
|
[source,sh]
|
|
----
|
|
npm install @tinymce/tinymce-angular
|
|
----
|
|
|
|
[[using-the-tinymce-angular-integration]]
|
|
== Using the TinyMCE Angular integration
|
|
|
|
. Import the `+EditorModule+` from the npm package using:
|
|
+
|
|
[source,ts]
|
|
----
|
|
import { EditorModule } from '@tinymce/tinymce-angular';
|
|
----
|
|
+
|
|
Add the `+EditorModule+` to `+@NgModule({imports})+`:
|
|
+
|
|
[source,ts]
|
|
----
|
|
// This might look different depending on how you have set up your app
|
|
// but the important part is the imports array
|
|
@NgModule({
|
|
declarations: [
|
|
AppComponent
|
|
],
|
|
imports: [
|
|
BrowserModule,
|
|
EditorModule // <- Important part
|
|
],
|
|
providers: [],
|
|
bootstrap: [AppComponent]
|
|
})
|
|
----
|
|
. Add the editor to the Angular application template, such as:
|
|
+
|
|
[source,html]
|
|
----
|
|
<editor apiKey="no-api-key" [init]="{plugins: 'link'}" />
|
|
----
|
|
|
|
[[configuring-the-editor]]
|
|
== Configuring the editor
|
|
|
|
The editor accepts the following properties:
|
|
|
|
[source,html,subs="attributes+"]
|
|
----
|
|
<editor
|
|
apiKey="no-api-key"
|
|
cloudChannel="{productmajorversion}"
|
|
[disabled]="false"
|
|
id=""
|
|
[init]="{ }"
|
|
initialValue=""
|
|
[inline]="false"
|
|
plugins=""
|
|
tagName="div"
|
|
toolbar=""
|
|
/>
|
|
----
|
|
|
|
None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.
|
|
|
|
[[apikey]]
|
|
=== `+apiKey+`
|
|
|
|
{cloudname} API key. Required for deployments using the {cloudname} to provide the {productname} editor.
|
|
|
|
include::partial$misc/get-an-api-key.adoc[]
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+'no-api-key'+`
|
|
|
|
==== Example: using `+apiKey+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor apiKey="no-api-key" />
|
|
----
|
|
|
|
[[licensekey]]
|
|
=== `+licenseKey+`
|
|
|
|
{cloudname} License key.
|
|
|
|
Use this when self-hosting {productname} instead of loading from {cloudname}. For more information, see: xref:license-key.adoc[License Key].
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+undefined+`
|
|
|
|
*Possible values:* `undefined`, `'gpl'` or a valid {productname} license key
|
|
|
|
==== Example: using `+licenseKey+`
|
|
|
|
[source,jsx]
|
|
----
|
|
<editor licenseKey='your-license-key' />
|
|
----
|
|
|
|
[[cloudchannel]]
|
|
=== `+cloudChannel+`
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `'{productmajorversion}'`
|
|
|
|
*Possible values:* `'{productmajorversion}'`, `'{productmajorversion}-testing'`, `'{productmajorversion}-dev'`, `'{productminorversion}'`
|
|
|
|
Changes the {productname} build used for the editor to one of the following {cloudname} channels:
|
|
|
|
* `{productmajorversion}` (*Default*): The current enterprise release of {productname}.
|
|
* `{productmajorversion}-testing`: The current release candidate for the next enterprise release of {productname}.
|
|
* `{productmajorversion}-dev`: The nightly-build version of {productname}.
|
|
* A version number such as `{productminorversion}`: The specific enterprise release version of {productname}.
|
|
|
|
Such as:
|
|
|
|
[source,html,subs="attributes+"]
|
|
----
|
|
<editor
|
|
apiKey="no-api-key"
|
|
cloudChannel="{productmajorversion}-dev"
|
|
/>
|
|
----
|
|
|
|
For information {productname} development channels, see: xref:editor-plugin-version.adoc#{productmajorversion}-{productmajorversion}-testing-and-{productmajorversion}-dev-release-channels[Specifying the {productname} editor version deployed from Cloud - dev, testing, and stable releases].
|
|
|
|
[[disabled]]
|
|
=== `+disabled+`
|
|
|
|
The `+disabled+` property can dynamically switch the editor between a "disabled" (read-only) mode (`+true+`) and the standard editable mode (`+false+`).
|
|
|
|
*Type:* `+Boolean+`
|
|
|
|
*Default value:* `+false+`
|
|
|
|
*Possible values:* `+true+`, `+false+`
|
|
|
|
==== Example: using `+disabled+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor [disabled]="true" />
|
|
----
|
|
|
|
[[id]]
|
|
=== `+id+`
|
|
|
|
An id for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* Automatically generated https://tools.ietf.org/html/rfc4122[UUID]
|
|
|
|
==== Example: using `+id+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor id="uuid" />
|
|
----
|
|
|
|
[[init]]
|
|
=== `+init+`
|
|
|
|
Object sent to the `+tinymce.init+` method used to initialize the editor.
|
|
|
|
For information on the {productname} selector (`+tinymce.init+`), see: xref:basic-setup.adoc[Basic setup].
|
|
|
|
*Type:* `+Object+`
|
|
|
|
*Default value:* `+{ }+`
|
|
|
|
==== Example: using `+init+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor
|
|
[init]="{
|
|
plugins: 'lists link image paste help wordcount',
|
|
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
|
|
}"
|
|
/>
|
|
----
|
|
|
|
[[initialvalue]]
|
|
=== `+initialValue+`
|
|
|
|
Initial content of the editor when the editor is initialized.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+' '+`
|
|
|
|
==== Example: using `+initialValue+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor initialValue="Once upon a time..." />
|
|
----
|
|
|
|
[[inline]]
|
|
=== `+inline+`
|
|
|
|
Used to set the editor to inline mode. Using `+<editor [inline]="true" />+` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`).
|
|
|
|
For information on inline mode, see: xref:inline-editor-options.adoc#inline[User interface options - `+inline+`] and xref:use-tinymce-inline.adoc[Setup inline editing mode].
|
|
|
|
*Type:* `+Boolean+`
|
|
|
|
*Default value:* `+false+`
|
|
|
|
*Possible values:* `+true+`, `+false+`
|
|
|
|
==== Example: using `+inline+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor [inline]="true" />
|
|
----
|
|
|
|
[[plugins]]
|
|
=== `+plugins+`
|
|
|
|
Used to include plugins for the editor. Using `+<editor plugins="lists code" />+` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`).
|
|
|
|
For information on adding plugins to {productname}, see: xref:work-with-plugins.adoc[Add plugins to {productname}].
|
|
|
|
*Type:* `+String+`
|
|
|
|
==== Example: using `+plugins+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor plugins="lists code" />
|
|
----
|
|
|
|
[[outputformat]]
|
|
=== `+outputFormat+`
|
|
|
|
Used to specify the format of the content emitted by the `+tinymce-angular+` component when used in conjunction with forms or plain data bindings.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+'html'+`
|
|
|
|
*Possible values:* `+'html'+`, `+'text'+`
|
|
|
|
==== Example: using `+outputFormat+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor outputFormat="text" />
|
|
----
|
|
|
|
[[tagname]]
|
|
=== `+tagName+`
|
|
|
|
Only valid when xref:inline[`+<editor [inline]="true" />+`]. Used to define the HTML element for the editor in inline mode.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+'div'+`
|
|
|
|
==== Example: using `+tagName+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor
|
|
[inline]="true"
|
|
tagName="my-custom-tag"
|
|
/>
|
|
----
|
|
|
|
[[toolbar]]
|
|
=== `+toolbar+`
|
|
|
|
Used to set the toolbar for the editor. Using `+<editor toolbar="bold italic" />+` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`).
|
|
|
|
For information setting the toolbar for {productname}, see: xref:toolbar-configuration-options.adoc#toolbar[User interface options - toolbar].
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Possible values:* See xref:available-toolbar-buttons.adoc[Toolbar Buttons Available for {productname}].
|
|
|
|
==== Example: using `+toolbar+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor
|
|
plugins="code"
|
|
toolbar="bold italic underline code"
|
|
/>
|
|
----
|
|
|
|
[[using-the-ngmodel-directive]]
|
|
== Using the `+ngModel+` directive
|
|
|
|
The `+ngModel+` directive can be added to use the editor in a form:
|
|
|
|
[source,html]
|
|
----
|
|
<editor [(ngModel)]="dataModel" />
|
|
----
|
|
|
|
For information on using `+NgModel+`, see: link:https://angular.dev/api/forms/NgModel[Angular documentation - NgModel].
|
|
|
|
[[modelevents]]
|
|
=== `+modelEvents+`
|
|
|
|
NOTE: This property requires `+tinymce-angular+` 4.0.0 or newer
|
|
|
|
Used to specify the events that trigger the `+NgModelChange+` to emit.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Default value:* `+'change input undo redo'+`.
|
|
|
|
*Possible values:* A space separated list of TinyMCE editor events.
|
|
|
|
==== Example: using `+modelEvents+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor modelEvents="change input nodechange undo redo" />
|
|
----
|
|
|
|
[[using-with-reactive-forms]]
|
|
== Using with reactive forms
|
|
|
|
To use {productname} Angular component with reactive forms:
|
|
|
|
. Include the `+<editor>+` configuration within the `+formGroup+`.
|
|
. Add the `+formControlName+` directive to the editor configuration. For example:
|
|
+
|
|
[source,html]
|
|
----
|
|
<editor [formControlName]="schema.key" [init]="{plugins: 'link'}" />
|
|
----
|
|
|
|
For information on using reactive forms, see: https://angular.dev/guide/forms/reactive-forms[Angular documentation - Reactive Forms].
|
|
|
|
[[event-binding]]
|
|
== Event binding
|
|
|
|
Functions can be bound to editor events, such as:
|
|
|
|
[source,html]
|
|
----
|
|
<editor (onSelectionChange)="handleEvent($event)" />
|
|
----
|
|
|
|
When the handler is called (`+handleEvent+` in this example), it is called with an event containing two properties:
|
|
|
|
* `+event+` - The TinyMCE event object.
|
|
* `+editor+` - A reference to the editor.
|
|
|
|
The following events are available:
|
|
|
|
[[supported-browser-events]]
|
|
=== Supported browser events
|
|
|
|
* `+onBeforePaste+`
|
|
* `+onBlur+`
|
|
* `+onClick+`
|
|
* `+onContextMenu+`
|
|
* `+onCompositionEnd+`
|
|
* `+onCompositionStart+`
|
|
* `+onCompositionUpdate+`
|
|
* `+onCopy+`
|
|
* `+onCut+`
|
|
* `+onDblclick+`
|
|
* `+onDrag+`
|
|
* `+onDragDrop+`
|
|
* `+onDragEnd+`
|
|
* `+onDragGesture+`
|
|
* `+onDragOver+`
|
|
* `+onDrop+`
|
|
* `+onFocus+`
|
|
* `+onFocusIn+`
|
|
* `+onFocusOut+`
|
|
* `+onInput+`
|
|
* `+onKeyDown+`
|
|
* `+onKeyPress+`
|
|
* `+onKeyUp+`
|
|
* `+onMouseDown+`
|
|
* `+onMouseEnter+`
|
|
* `+onMouseLeave+`
|
|
* `+onMouseMove+`
|
|
* `+onMouseOut+`
|
|
* `+onMouseOver+`
|
|
* `+onMouseUp+`
|
|
* `+onPaste+`
|
|
* `+onSelectionChange+`
|
|
|
|
[[supported-tinymce-events]]
|
|
=== Supported TinyMCE events
|
|
|
|
* `+onActivate+`
|
|
* `+onAddUndo+`
|
|
* `+onBeforeAddUndo+`
|
|
* `+onBeforeExecCommand+`
|
|
* `+onBeforeGetContent+`
|
|
* `+onBeforeRenderUI+`
|
|
* `+onBeforeSetContent+`
|
|
* `+onChange+`
|
|
* `+onClearUndos+`
|
|
* `+onDeactivate+`
|
|
* `+onDirty+`
|
|
* `+onExecCommand+`
|
|
* `+onGetContent+`
|
|
* `+onHide+`
|
|
* `+onInit+`
|
|
* `+onInitNgModel+`
|
|
* `+onLoadContent+`
|
|
* `+onNodeChange+`
|
|
* `+onPostProcess+`
|
|
* `+onPostRender+`
|
|
* `+onPreInit+`
|
|
* `+onPreProcess+`
|
|
* `+onProgressState+`
|
|
* `+onRedo+`
|
|
* `+onRemove+`
|
|
* `+onReset+`
|
|
* `+onSaveContent+`
|
|
* `+onSetAttrib+`
|
|
* `+onObjectResizeStart+`
|
|
* `+onObjectResized+`
|
|
* `+onObjectSelected+`
|
|
* `+onSetContent+`
|
|
* `+onShow+`
|
|
* `+onSubmit+`
|
|
* `+onUndo+`
|
|
* `+onVisualAid+`
|
|
|
|
By default, all the available events will trigger from the editor to the `+tinymce-angular+` component. To limit the events triggering in the component, use the `+allowedEvents+` and `+ignoreEvents+` properties.
|
|
|
|
[[allowedevents]]
|
|
=== `+allowedEvents+`
|
|
|
|
NOTE: This property requires `+tinymce-angular+` 4.2.0 or newer
|
|
|
|
Used to provide an allow-list of valid events to trigger from the editor to the `+tinymce-angular+` component. By default, the component will emit all the events listed in the xref:event-binding[Event binding section].
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Possible values:* A comma separated list of events to allow.
|
|
|
|
==== Example: using `+allowedEvents+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor allowedEvents="onMouseDown,onKeyDown" />
|
|
----
|
|
|
|
[[ignoreevents]]
|
|
=== `+ignoreEvents+`
|
|
|
|
NOTE: This property requires `+tinymce-angular+` 4.2.0 or newer
|
|
|
|
Used to block a list of events from the `+tinymce-angular+` component.
|
|
|
|
*Type:* `+String+`
|
|
|
|
*Possible values:* A comma separated list of events to ignore.
|
|
|
|
==== Example: using `+ignoreEvents+`
|
|
|
|
[source,html]
|
|
----
|
|
<editor ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove" />
|
|
----
|