Geek Answers Handbook

Using wysiwyg text editor with angular2

I am trying to use wysiwyg in my angular2 project when I add my code on the index.html page (it works on the root page)

but when I try to use it as a child of html, it does not get css code or (and) javascript to get wysiwyg correctly

<!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 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/http.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script> <!--bootsrat https--> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="src/css/app.css"> <link rel="stylesheet" href="src/css/loginCss.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/froala_editor.css"> <link rel="stylesheet" href="/css/froala_style.css"> <link rel="stylesheet" href="/css/plugins/code_view.css"> <link rel="stylesheet" href="/css/plugins/colors.css"> <link rel="stylesheet" href="/css/plugins/emoticons.css"> <link rel="stylesheet" href="/css/plugins/image_manager.css"> <link rel="stylesheet" href="/css/plugins/image.css"> <link rel="stylesheet" href="/css/plugins/line_breaker.css"> <link rel="stylesheet" href="/css/plugins/table.css"> <link rel="stylesheet" href="/css/plugins/char_counter.css"> <link rel="stylesheet" href="/css/plugins/video.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css"> <style> body { text-align: center; } div#editor { width: 81%; margin: auto; text-align: left; } </style> </head> <body> <my-app>Loading...</my-app> <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> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script> <script type="text/javascript" src="/js/froala_editor.min.js"></script> <script type="text/javascript" src="/js/plugins/align.min.js"></script> <script type="text/javascript" src="/js/plugins/code_beautifier.min.js"></script> <script type="text/javascript" src="/js/plugins/code_view.min.js"></script> <script type="text/javascript" src="/js/plugins/colors.min.js"></script> <script type="text/javascript" src="/js/plugins/draggable.min.js"></script> <script type="text/javascript" src="/js/plugins/emoticons.min.js"></script> <script type="text/javascript" src="/js/plugins/font_size.min.js"></script> <script type="text/javascript" src="/js/plugins/font_family.min.js"></script> <script type="text/javascript" src="/js/plugins/image.min.js"></script> <script type="text/javascript" src="/js/plugins/image_manager.min.js"></script> <script type="text/javascript" src="/js/plugins/line_breaker.min.js"></script> <script type="text/javascript" src="/js/plugins/link.min.js"></script> <script type="text/javascript" src="/js/plugins/lists.min.js"></script> <script type="text/javascript" src="/js/plugins/paragraph_format.min.js"></script> <script type="text/javascript" src="/js/plugins/paragraph_style.min.js"></script> <script type="text/javascript" src="/js/plugins/table.min.js"></script> <script type="text/javascript" src="/js/plugins/video.min.js"></script> <script type="text/javascript" src="/js/plugins/url.min.js"></script> <script type="text/javascript" src="/js/plugins/entities.min.js"></script> <script type="text/javascript" src="/js/plugins/char_counter.min.js"></script> <script type="text/javascript" src="/js/plugins/inline_style.min.js"></script> <script type="text/javascript" src="/js/plugins/save.min.js"></script> <script> $(function () { $('#edit').froalaEditor({ fullPage: true, toolbarBottom: false }) }); </script> </body> </html>

In this case, it works (I put my wysiwyg in my index.html )

but when i put this in another component of the view it doesn't work

 <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>
+7
javascript html css angular wysiwyg
source share
4 answers

https://www.tinymce.com/

If angular 2 Use Tinymce .. Why tinymce?

  //.ts import {EditorDirectory} from '/../directives'; @Component({ selector: 'Foo' directives: [EditorDirectory], template: '<textarea [htmlEditor]="Form.find('Text')"></textarea>' }) // Tinymce directive @Directive({ inputs: ['htmlEditor'], selector: '[htmlEditor]' }) tinymce.init({ selector: '.tinymce-editor', schema: 'html5', });

Index.html

 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script>

The rest can read from Tinymce

+7
source share

I agree with @mayur to use angular2 and tinyMCE. If you need more HOW recommendations based on @mayur's answer:

directives / tiny.directive.ts:

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

app.component.ts:

 import { Component } from '@angular/core'; import {EditorDirective} from './directives/tiny.directive'; @Component({ selector: 'my-app', directives: [EditorDirective], templateUrl: '<textarea [htmlEditor]></textarea>' //having [htmlEditor]="Form.find('Text')" caused an error for me, your mileage may vary }) export class AppComponent { }

main.ts:

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

index.html

 <html> <head> <!--include title/metadata etc. here--> <!-- 1. Load libraries --> <!-- include libraries here follow angular2 quickstart for help tinymce may require a jquery import here --> <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> <!--don't forget styles!--> </head> <body> <div> <my-app>Loading...</my-app> </div> </body>

hope this helps

+13
source share

Here is a complete explanation with steps.

  • Installation:

     npm install --save tinymce

  • In the file, specify the path for tinymce script files

     "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 following command to copy the styles inside the assests folder.

     xcopy /I /E node_modules\tinymce\skins src\assets\skins

  • Create a directive for tinymce so that it is used anywhere in the application.

      import { Directive, EventEmitter, Input, Output, ElementRef,OnInit, AfterViewInit, OnDestroy } from '@angular/core'; declare var tinymce:any @Directive({ selector: '[htmlEditor]' }) export class SimpleTinyMceDirective implements OnInit,OnDestroy{ private htmlContent:any; private editor; @Output() private htmlEditorKeyUp : EventEmitter<any> = new EventEmitter(); constructor(private el:ElementRef){ } ngOnInit(){ tinymce.init({ selector: '#' + this.el.nativeElement.id, plugins: ['link', 'paste', 'table'], skin_url: 'assets/skins/lightgray', setup: editor => { this.editor = editor; editor.on('keyup', () => { const content = editor.getContent(); this.htmlEditorKeyUp.emit(content); }); }, }); } ngOnDestroy() { tinymce.remove(this.editor); } }

    save it as simple-tinymce.directive.ts

  • Now in the app.module.ts file

     import * as tinymce from 'tinymce'; //"importing tinymce" import {SimpleTinyMceDirective} from './common/simple-tinymce/simple-tinymce.directive'; //import the directive your path of directive may be different than mine.

  • You can use, as shown below, in the component template

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

  • You can get inside component.ts as below

     onHtmlEditorKeyUp(content:any):void{ console.log(content); }
+1
source share

I followed the answers, but I could not get this to work, perhaps because I use routing, and the dom element, where to apply the directive, is not yet available. I just moved the tinymce.init code from the constructor to the ngOnInit function, and now it works as expected:

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', //change this to a specific class/id schema: 'html5', }); }
0
source share

More articles:


All Articles