utilizzando il testo editor WYSIWYG con angular2

Sto cercando di utilizzare wysiwyg nel mio progetto angular2 quando aggiungo il mio codice a pagina index.html (nella pagina principale, funziona)utilizzando il testo editor WYSIWYG con angular2

ma quando provo ad usare in una visione infantile html non ottiene il CSS o (e) codice javascript per ottenere il mio wysiwyg correttamente

<!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 questo caso funziona (ho messo il mio wysiwyg nel mio index.html)

ma quando lo metto su un altro componente di vista non funziona

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

fonte

2016-05-30 YK mar

https://www.tinymce.com/

Se angolare 2 Usare 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>

rimanente può leggere da Tinymce

fonte

2016-05-30 13:28:13 mayur

posso scaricare tinymce allora dovrei aggiungere i file all'interno del mio progetto! Come ottenere tinymce? –

Nel file angolare package.json aggiunte dipendenze // "dipendenze": {"tinymce": "4.3.12"}}, e quindi nel terminale aggiungi npm installa tinymce – mayur

tinymce 4.3.12 è l'aggiornamento corrente – mayur

Sono d'accordo con @mayur per usare angular2 e tinyMCE. Se avete bisogno di maggiori indicazioni sulla COME in base alla risposta di @ mayur:

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

speranza che questo aiuta

fonte

2016-07-10 16:17:50

Questo non funziona sulle pagine del router. cosa dobbiamo fare per le pagine del router? –

Non è necessario che il modulo dell'app abbia importato la direttiva? – Jon

Non ho aggiornato questo dal rilascio ufficiale di Angular 2; cercherò di tornare ad esso ad un certo punto! Il cambiamento più grande sarebbe come ha detto @Jon, il modulo dell'app che ha bisogno di importare la direttiva anziché nel componente. –

ho seguito le risposte, ma non ho potuto ottenere questo lavoro, forse perché sto usando il routing e l'elemento dom dove applicare la direttiva non è già disponibile. Ho appena spostato il codice tinymce.init dal costruttore alla funzione ngOnInit e ora funziona come previsto:

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

fonte

2017-01-25 15:38:23

Ecco la spiegazione completa con gradini.

Installare:
```
npm install --save tinymce 
```

Nel file di dare il percorso per lo script TinyMCE file

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

Eseguire il comando seguente sarà copiare gli stili all'interno della cartella assests.
```
xcopy /I /E node_modules\tinymce\skins src\assets\skins 
```

Creare la direttiva per tinymce in modo che venga utilizzata in qualsiasi punto dell'applicazione.

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

salvarlo come semplici-tinymce.directive.ts

Ora all'interno dei file di app.module.ts

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.

È possibile utilizzare come qui di seguito all'interno del template componente

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

È possibile recuperare all'interno del componente.ts come sotto

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

fonte

2017-09-02 04:22:46

utilizzando il testo editor WYSIWYG con angular2

risposta

Problemi correlati