1. 技术文章
  2. using wysiwyg Editor text with angular2

using wysiwyg Editor text with angular2

由 风格不统一 提交于 2019-11-28 08:44:17

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

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

Er. Bahuguna Goyal

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);
}

I followed the answers but i couldn't get this working, maybe because i'm using routing and the dom element where to apply the directive is not already 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',
    });
}
标签
javascript
html
css
angular
wysiwyg
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!