pomocą tekstu WYSIWYG z angular2

Próbuję użyć WYSIWYG w moim projekcie angular2 gdy dodaję mój kod w stronę index.html (na stronie głównego, to działa)pomocą tekstu WYSIWYG z angular2

ale gdy próbuję użyć to w widoku html dziecko nie uzyskać CSS lub (i) kod JavaScript, aby moje WYSIWYG poprawnie

<!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>

w tym przypadku to działa (kładę WYSIWYG w moim index.html)

ale kiedy umieściłem to na innym komponencie widoku, to nie działa

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

Źródło

2016-05-30 YK mar

https://www.tinymce.com/

Jeśli kątowa 2 Użyj 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>

Pozostała można odczytać z Tinymce

Źródło

2016-05-30 13:28:13 mayur

pobrać TinyMCE Potem należy dodać pliki w moim projekcie! Jak zdobyć tinymce? –

W pliku package.json kątowe dodawanie zależności // "zależności": {"tinymce": "4.3.12"}}, a następnie w terminalu dodać npm zainstalować tinymce – mayur

tinymce 4.3.12 to aktualna aktualizacja – mayur

Zgadzam się z @mayur, aby użyć angular2 i tinyMCE. Jeśli potrzebujesz więcej wskazówek dotyczących HOW podstawie @ MAYUR za odpowiedź:

Dyrektywy/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>

nadzieję, że to pomaga

Źródło

2016-07-10 16:17:50

To nie działa na stronach routera. co musimy zrobić dla stron routera? –

Czy moduł aplikacji nie wymaga importowania dyrektywy? – Jon

Nie aktualizowałem tego od oficjalnej wersji Angular 2; wrócę do tego w pewnym momencie! Największa zmiana byłaby taka, jak powiedział @Jon, moduł aplikacji musiał zaimportować dyrektywę zamiast w komponencie. –

I po odpowiedzi, ale ja nie mogę dostać tej pracy, może dlatego używam trasy i elementu DOM gdzie zastosowanie dyrektywa nie jest już dostępny. Ja po prostu przeniósł kod tinymce.init z konstruktora do funkcji ngOnInit i teraz działa zgodnie z oczekiwaniami:

Dyrektywy/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', 
    }); 
}

Źródło

2017-01-25 15:38:23

Oto pełne wyjaśnienie ze schodami.

Instalacja:
```
npm install --save tinymce 
```

W pliku podać ścieżkę do skryptu TinyMCE plików

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

uruchom następujące polecenie skopiuje style wewnątrz folderu assests.
```
xcopy /I /E node_modules\tinymce\skins src\assets\skins 
```

Stwórz dyrektywę dla tinymce, aby była używana w dowolnym miejscu aplikacji.

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

zapisać go jako prosty tinymce.directive.ts

Teraz wewnątrz app.module.ts złożyć

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.

można używać jak poniżej wewnątrz szablonu komponentu

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

Możesz pobrać wewnątrz component.ts takich jak poniżej

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

Źródło

2017-09-02 04:22:46

pomocą tekstu WYSIWYG z angular2

Odpowiedz

Powiązane problemy