Utilizing a wysiwyg text editor in conjunction with Angular 2

Question

Utilizing a wysiwyg text editor in conjunction with Angular 2

I am currently implementing a wysiwyg feature in my Angular2 project. When I include the code in the index.html page (the root page), it functions correctly.

However, when I try to use it in a child view HTML file, the CSS and JavaScript do not load properly, resulting in the wysiwyg editor not displaying as expected.

<!doctype>
<html>
<head>
    <base href="/">
    <title>Arkloud Adservio</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    ...

In the scenario where I place the wysiwyg editor in my index.html, everything works perfectly.

However, if I attempt to move this functionality into another view component, it fails to function properly.

<div id="editor">
        <form>
          <textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
            <h1>Textarea</h1>
            <p>The editor can also be initialized on a textarea.</p>
          </textarea>

            <input type="submit">
        </form>
    </div>

javascript html css angular wysiwyg

Answer 1

Answer №1

My recommendation aligns with @mayur's suggestion to utilize angular2 in combination with tinyMCE. If you require further instructions on the implementation, following the guidance provided by @mayur:

For the TinyMCE directive located at directives/tiny.directive.ts:

import {Directive} from '@angular/core';
declare var tinymce: any;
// Custom directive for TinyMCE
@Directive({
    inputs: ['htmlEditor'],
    selector: '[htmlEditor]'
    })
export class EditorDirective{
    constructor(){
        tinymce.init({
            selector: 'textarea', //modify this to target a specific class or id
            schema: 'html5',
        });
    }
}

In app.component.ts:

import { Component } from '@angular/core';
import {EditorDirective} from './directives/tiny.directive';

@Component({
    selector: 'my-app',
    directives: [EditorDirective],
    templateUrl: '<textarea [htmlEditor]></textarea>'    //Using [htmlEditor]="Form.find('Text')" resulted in an error in my case, so proceed with caution
    })
export class AppComponent {

}

Within main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent  } from './app.component';
bootstrap(AppComponent);

In index.html:

<html>
<head>
    <!--include title/metadata etc. here-->

    <!-- 1. Load libraries -->
    <!--
    include libraries here
    refer to the Angular2 quickstart guide for assistance
    importing jQuery may be necessary for Tinymce
    -->
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });

    </script>
    <!--remember to include styles!-->
</head>
<body>
    <div>
        <my-app>Loading...</my-app>
    </div>
</body>

I hope this information proves helpful.

Answer 2

My recommendation aligns with @mayur's suggestion to utilize angular2 in combination with tinyMCE. If you require further instructions on the implementation, following the guidance provided by @mayur:

For the TinyMCE directive located at directives/tiny.directive.ts:

import {Directive} from '@angular/core';
declare var tinymce: any;
// Custom directive for TinyMCE
@Directive({
    inputs: ['htmlEditor'],
    selector: '[htmlEditor]'
    })
export class EditorDirective{
    constructor(){
        tinymce.init({
            selector: 'textarea', //modify this to target a specific class or id
            schema: 'html5',
        });
    }
}

In app.component.ts:

import { Component } from '@angular/core';
import {EditorDirective} from './directives/tiny.directive';

@Component({
    selector: 'my-app',
    directives: [EditorDirective],
    templateUrl: '<textarea [htmlEditor]></textarea>'    //Using [htmlEditor]="Form.find('Text')" resulted in an error in my case, so proceed with caution
    })
export class AppComponent {

}

Within main.ts:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent  } from './app.component';
bootstrap(AppComponent);

In index.html:

<html>
<head>
    <!--include title/metadata etc. here-->

    <!-- 1. Load libraries -->
    <!--
    include libraries here
    refer to the Angular2 quickstart guide for assistance
    importing jQuery may be necessary for Tinymce
    -->
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) {
            console.error(err);
        });

    </script>
    <!--remember to include styles!-->
</head>
<body>
    <div>
        <my-app>Loading...</my-app>
    </div>
</body>

I hope this information proves helpful.

Answer 3

Answer №2

If using react with Summernote .. Why summernote?

 //.js
import {EditorComponent} from '/../components';
@Component({
    selector: 'Bar',
    components: [EditorComponent],
    template: '<div [textEditor]="Form.find('Content')"></div>'
})

// Summernote component 
@Directive({
    inputs: ['textEditor'],
    selector: '[textEditor]'
})

summernote.init({
    selector: '.summernote-editor',
    schema: 'html5',
});

Homepage.html

<script src="//cdn.summernote.js/tinymce.min.js"></script>
<script src="browserify.config.js"></script>
<script>
System.import('main').catch(function(err) {
    console.error(err);
});
</script>

For more information visit Summernote

Answer 4

If using react with Summernote .. Why summernote?

 //.js
import {EditorComponent} from '/../components';
@Component({
    selector: 'Bar',
    components: [EditorComponent],
    template: '<div [textEditor]="Form.find('Content')"></div>'
})

// Summernote component 
@Directive({
    inputs: ['textEditor'],
    selector: '[textEditor]'
})

summernote.init({
    selector: '.summernote-editor',
    schema: 'html5',
});

Homepage.html

<script src="//cdn.summernote.js/tinymce.min.js"></script>
<script src="browserify.config.js"></script>
<script>
System.import('main').catch(function(err) {
    console.error(err);
});
</script>

For more information visit Summernote

Answer 5

Answer №3

Here are detailed instructions on how to set up TinyMCE in your Angular application:

To begin, install TinyMCE using the following npm command:
```
npm install --save tinymce
```

In your file, specify the path for the TinyMCE script files as shown below:

"scripts": [
    "../node_modules/tinymce/tinymce.js",
    "../node_modules/tinymce/themes/modern/theme.js",
    "../node_modules/tinymce/plugins/link/plugin.js",
    "../node_modules/tinymce/plugins/paste/plugin.js",
    "../node_modules/tinymce/plugins/table/plugin.js"
 ],

Run the provided command to copy the styles into the assets folder:
```
xcopy /I /E node_modules\tinymce\skins src\assets\skins
```

Create a directive for TinyMCE to use it throughout your application:

 // Include necessary imports

// Define SimpleTinyMceDirective class

// Initialize and configure TinyMCE instance

// Export the directive

Save this directive as simple-tinymce.directive.ts

Now, within the app.module.ts file, include the following imports:

import * as tinymce from 'tinymce';
import {SimpleTinyMceDirective} from './common/simple-tinymce/simple-tinymce.directive';

You can now include the TinyMCE editor in your component template like so:

<textarea id="description" class="form-control" name="description" placeholder="Enter the description" required [(ngModel)]='description' #description='ngModel' 
    (htmlEditorKeyUp)="onHtmlEditorKeyUp($event)" htmlEditor></textarea>

To access the content in your component.ts file, use the following function:
```
onHtmlEditorKeyUp(content:any):void{
    console.log(content);
}
```

Answer 6

Here are detailed instructions on how to set up TinyMCE in your Angular application:

To begin, install TinyMCE using the following npm command:
```
npm install --save tinymce
```

In your file, specify the path for the TinyMCE script files as shown below:

"scripts": [
    "../node_modules/tinymce/tinymce.js",
    "../node_modules/tinymce/themes/modern/theme.js",
    "../node_modules/tinymce/plugins/link/plugin.js",
    "../node_modules/tinymce/plugins/paste/plugin.js",
    "../node_modules/tinymce/plugins/table/plugin.js"
 ],

Run the provided command to copy the styles into the assets folder:
```
xcopy /I /E node_modules\tinymce\skins src\assets\skins
```

Create a directive for TinyMCE to use it throughout your application:

 // Include necessary imports

// Define SimpleTinyMceDirective class

// Initialize and configure TinyMCE instance

// Export the directive

Save this directive as simple-tinymce.directive.ts

Now, within the app.module.ts file, include the following imports:

import * as tinymce from 'tinymce';
import {SimpleTinyMceDirective} from './common/simple-tinymce/simple-tinymce.directive';

You can now include the TinyMCE editor in your component template like so:

<textarea id="description" class="form-control" name="description" placeholder="Enter the description" required [(ngModel)]='description' #description='ngModel' 
    (htmlEditorKeyUp)="onHtmlEditorKeyUp($event)" htmlEditor></textarea>

To access the content in your component.ts file, use the following function:
```
onHtmlEditorKeyUp(content:any):void{
    console.log(content);
}
```

Answer 7

Answer №4

Despite following the provided answers, I faced difficulty getting this feature to work properly. This could be attributed to the fact that I am using routing and the DOM element where the directive should be applied is not yet available. To resolve this issue, I simply transferred the tinymce.init code from the constructor to the ngOnInit function, resulting in successful execution:

Here is the revised code for directives/tiny.directive.ts:

import {Directive, OnInit} from '@angular/core';
declare var tinymce: any;

// Tinymce directive
@Directive({
    inputs: ['htmlEditor'],
    selector: '[htmlEditor]'
})
export class EditorDirective implements OnInit {
    
    ngOnInit(){
        tinymce.init({
            selector: 'textarea', //modify this based on a specific class/id
            schema: 'html5',
        });
    }
}

Answer 8

Despite following the provided answers, I faced difficulty getting this feature to work properly. This could be attributed to the fact that I am using routing and the DOM element where the directive should be applied is not yet available. To resolve this issue, I simply transferred the tinymce.init code from the constructor to the ngOnInit function, resulting in successful execution:

Here is the revised code for directives/tiny.directive.ts:

import {Directive, OnInit} from '@angular/core';
declare var tinymce: any;

// Tinymce directive
@Directive({
    inputs: ['htmlEditor'],
    selector: '[htmlEditor]'
})
export class EditorDirective implements OnInit {
    
    ngOnInit(){
        tinymce.init({
            selector: 'textarea', //modify this based on a specific class/id
            schema: 'html5',
        });
    }
}

Utilizing a wysiwyg text editor in conjunction with Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Why is it that after running "ng build" with Angular CLI, the project does not function properly?

single-spa: revolutionizing console.log for each microfrontEnd

The intersectObjects function is failing to retrieve the object from the OBJMTLLoader

Issue with Firestore rule functionality not meeting expectations

Tips for creating an HTML table that fills the entire width of its parent element:

Retrieve data from an AJAX call and PHP script upon successful completion

Using AngularJS routing with an Express 4.0 backend API

Enhancing HTML Documents with the Header Element

Ways to increase the font size of input text using bootstrap's css framework

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

The issue of Elasticsearch results not being correctly parsed as JSON objects by JavaScript when retrieved from a Python client

Node JS excels in its ability to handle non-blocking operations

When using RS256 with JWT, the private key will not be accepted

Discover the Maximum Total that is Below or Equal to a Specified Limit

Explore button that gradually decreases max-height

Waiting for a function to complete its processing loop in Angular 7

Omit certain components from the JQuery ListNav plugin

Error TS2322: The variable is of type 'BillingSummaryDTO[]' and cannot be assigned to type 'never'

External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

Selenium and PhantomJS are having trouble interpreting JavaScript code