using wysiwyg Editor text with angular2

javascript html css angular wysiwyg
17,387

Solution 1

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

Solution 2

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

Solution 3

Here is the full explanation with steps.

  1. Install:

    npm install --save tinymce

  2. 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"
 ],

  3. Run the following command it will copy the styles inside the assests folder.

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

  4. 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

  5. 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.

  6. 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>

  7. You can fetch inside the component.ts like below

    onHtmlEditorKeyUp(content:any):void{
    console.log(content);
}
Share:
17,387
YK mar
Author by

YK mar

Updated on June 18, 2022

Comments

  • YK mar
    YK mar almost 2 years

    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>
  • YK mar
    YK mar almost 8 years
    I download tinymce then i should add files within my project ! How to get tinymce ?
  • mayur
    mayur almost 8 years
    In package.json angular file add in dependencies // "dependencies": {"tinymce": "4.3.12"} }, and then in terminal add npm install tinymce
  • Sanjay Gohil
    Sanjay Gohil over 7 years
    This is not working on router pages. what we need to do for router pages ?
  • Jon
    Jon over 7 years
    Wouldn't the app module need to have the directive imported?
  • chris.currin
    chris.currin over 7 years
    I haven't updated this since Angular 2 official release; will try get back to it at some point! The biggest change would be as @Jon said, the app module needing to import the directive instead of in the component.
  • Saiyaff Farouk
    Saiyaff Farouk over 7 years
    How to use this after angular 2 official release? @mayur
  • Abhishek Tripathi
    Abhishek Tripathi over 7 years
    EditorDirective should be present in declarations in app.module.ts @chris.currin
  • Alexander Gharibashvili
    Alexander Gharibashvili over 6 years
    Is this module compatible with AOT compilation ? There are no d.ts files for typescript. Have you built with AOT ?

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

Angular 8: max-height attribute for a material dialog is not working
Angular - How to disable/grey out screen on load and save
How to change profile picture in angular?
Three state toggle switch in angular
Avoid using document.write() occurs when trying to load a dashboard page in Chrome
Hide checkbox from angular mat-select in case of multiple select?
Angular : sanitizing HTML stripped some content on css style
How to fit p-dropdown inside of a table cell?
Crop the image using JavaScript
Styling mat-form-field input in Angular/Material