Using tinyMCE with Angular I need to insert text at the cursor position, preferably with a toolbar button.
As I understand, I'll need to use the onExecCommand
event with mceInsertContent
mand.
I've looked at the following:
- How to insert text in TinyMCE Editor where the cursor is?
- Inserting text in TinyMCE Editor where the cursor is
But the solutions don't help in this case.
Here's the documentation
editor-dialogponent.html
<editor [init]="tinyMceConfig"
[formControl]="data.formControl">
</editor>
editor-dialogponent.ts
/* ... */
export class EditorDialogComponent implements OnInit {
tinyMceConfig: any;
constructor(
/* ... */
) { }
ngOnInit() {
this.configureTinyMce();
}
configureTinyMce() {
this.tinyMceConfig = {
theme: 'modern',
menubar: false,
branding: false,
height: 400,
skin_url: 'assets/tinymce/skins/lightgray',
inline: false,
plugins: [
'advlist lists link image directionality',
'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
],
// tslint:disable-next-line:max-line-length
toolbar: 'copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat hr pagebreak code',
image_advtab: true,
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
paste_data_images: !0,
importcss_append: !0,
images_upload_handler: function (e, t, a) {
console.log('image');
t('data:' + e.blob().type + ';base64,' + e.base64());
},
};
}
}
Thanks
Using tinyMCE with Angular I need to insert text at the cursor position, preferably with a toolbar button.
As I understand, I'll need to use the onExecCommand
event with mceInsertContent
mand.
I've looked at the following:
- How to insert text in TinyMCE Editor where the cursor is?
- Inserting text in TinyMCE Editor where the cursor is
But the solutions don't help in this case.
Here's the documentation
editor-dialog.ponent.html
<editor [init]="tinyMceConfig"
[formControl]="data.formControl">
</editor>
editor-dialog.ponent.ts
/* ... */
export class EditorDialogComponent implements OnInit {
tinyMceConfig: any;
constructor(
/* ... */
) { }
ngOnInit() {
this.configureTinyMce();
}
configureTinyMce() {
this.tinyMceConfig = {
theme: 'modern',
menubar: false,
branding: false,
height: 400,
skin_url: 'assets/tinymce/skins/lightgray',
inline: false,
plugins: [
'advlist lists link image directionality',
'searchreplace visualblocks visualchars media table contextmenu paste textcolor colorpicker pagebreak code'
],
// tslint:disable-next-line:max-line-length
toolbar: 'copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat hr pagebreak code',
image_advtab: true,
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
paste_data_images: !0,
importcss_append: !0,
images_upload_handler: function (e, t, a) {
console.log('image');
t('data:' + e.blob().type + ';base64,' + e.base64());
},
};
}
}
Thanks
Share Improve this question edited May 28, 2019 at 13:35 Wayne asked May 3, 2019 at 9:24 WayneWayne 1563 silver badges13 bronze badges4 Answers
Reset to default 6The documentation you referenced is how to get TinyMCE integrated in an Angular application. What I believe you want to do is:
- Add a toolbar button to the toolbar
- Clicking the toolbar button inserts content at the current cursor location
Fundamentally the fact that you are using Angular is not important to either of these goals so you won't see anything Angular specific in the following details.
Adding a Toolbar Button
This is done (in TinyMCE 5) via the tinymce.editor.ui.registry.addButton()
API. This is documented here: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton
Inserting Content at the Cursor
This is done (in TinyMCE 5) via the tinymce.editor.insertContent()
API.
This is documented here: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
The simplest way to do all of this is to use your TinyMCE configuration via the setup()
function. You can add the button and determine what actions (via JavaScript) it will take when clicked all in one place.
Here is an example: http://fiddle.tinymce./fHgaab
For anyone looking at this recently ( Mar 2021 ), this is how to send mands to tiny mce in angular 11:
import {Component, OnInit, ViewChild} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {EditorComponent as tiny} from '@tinymce/tinymce-angular';
@Component({
selector: 'app-test-tiny',
templateUrl: './test-tiny.ponent.html',
styleUrls: ['./test-tiny.ponent.scss']
})
export class TestTinyComponent implements OnInit {
@ViewChild(tiny) tinyEditor: tiny;
contents = 'Hello World';
get preview(): SafeHtml {
return this.san.bypassSecurityTrustHtml(this.contents);
}
constructor(protected san: DomSanitizer) {
}
ngOnInit(): void {
}
doTest(): void {
this.tinyEditor.editor.execCommand('mceInsertContent', false, '<h1>Dude</h1>');
}
}
Seems like you are linking examples for a different library. So those wouldn't work. Is there any reason you chose to use the TinyMCE library instead of https://www.npmjs./package/angular2-tinymce ?
I've looked into the source code and couldn't find an easy way of targeting the tinyMCE instance through ViewChild, which is possible with the other library.
Michael's answer is correct, as it isn't important that I'm using Angular.
But I thought it would be worth sharing the Angular implementation for future reference.
TL;DR: Here's an example StackBlitz - Angular TinyMCE Insert Text at Cursor
The process included:
Upgrading to the (currently) latest versions of TinyMCE and TinyMCE Angular:
npm install [email protected]
npm install @tinymce/[email protected]
Importing
EditorModule
:/* ... */ import { EditorModule } from '@tinymce/tinymce-angular'; imports: [ /* ... */ EditorModule ] /* ... */
Initialise the editor in the ponent (notice the
setup()
function for this case):export class AppComponent implements OnInit { name = 'Angular & TinyMCE'; tinyMceConfig: any; ngOnInit() { this.configureTinyMce(); } configureTinyMce() { this.tinyMceConfig = { branding: false, /** * 'content_css' is needed to prevent console errors * if you're hosting your own TinyMCE, * You'll also need to add the following to angular.json: * /* ... */ * "scripts": [ * "node_modules/tinymce/tinymce.min.js", * "node_modules/tinymce/themes/silver/theme.js" * ] * /* ... */ */ // content_css: 'assets/tinymce/skins/ui/oxide/content.min.css', height: 400, image_advtab: true, imagetools_toolbar: ` rotateleft rotateright | flipv fliph | editimage imageoptions`, importcss_append: !0, inline: false, menubar: true, paste_data_images: !0, /** * 'skin_url' is needed to prevent console errors * if you're hosting your own TinyMCE */ // skin_url: 'assets/tinymce/skins/ui/oxide', toolbar: ` insertText | copy undo redo formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat`, setup: (editor) => { editor.ui.registry.addButton('insertText', { text: 'Press Me To Insert Text!', onAction: () => { editor.insertContent('<strong>Hello World!</strong>'); } }); } }; } }
The HTML is simply:
<editor [init]="tinyMceConfig"></editor>