using wysiwyg Editor text with angular2

Question

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

but when I try to use it in a child view html it doesn't get the css or (and) javascript code to get my 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 on another view component 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>

chris.currin · Accepted Answer

I agree with @mayur to use angular2 and tinyMCE. If you need more guidance on the HOW 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

mayur · Answer

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>

Remaining can read from Tinymce

Er. Bahuguna Goyal · Answer

Here is the full explanation with steps.

Install:
```
npm install --save tinymce
```

In file give 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 it will copy the styles inside the assests folder.
```
xcopy /I /E node_modules	inymce\skins src\assets\skins
```

Create directive for tinymce so it will be 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 inside 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 like below inside 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 fetch inside the component.ts like below

onHtmlEditorKeyUp(content:any):void{
    console.log(content);
}

using wysiwyg Editor text with angular2

Tags:

javascript

html

css

angular

wysiwyg

YK mar

3 Answers

chris.currin

mayur

Er. Bahuguna Goyal

Recent Activity

Donate For Us

using wysiwyg Editor text with angular2

Tags:

javascript

html

css

angular

wysiwyg

YK mar

3 Answers

chris.currin

mayur

Er. Bahuguna Goyal

Related questions

Recent Activity

Donate For Us