使用带有 angular2 的所见即所得编辑器文本答案

【问题标题】：using wysiwyg Editor text with angular2使用带有 angular2 的所见即所得编辑器文本
【发布时间】：2016-09-28 03:36:03
【问题描述】：

我正在尝试在我的项目 angular2 中使用所见即所得当我在 index.html 页面中添加我的代码时（在根页面上，它可以工作）

但是当我尝试在子视图 html 中使用它时，它没有获取 css 或（和）javascript 代码来正确获取我的所见即所得

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

在这种情况下它可以工作（我把我的所见即所得放在我的index.html）

但是当我把它放在另一个视图组件上时它不起作用

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

【问题讨论】：

标签： javascript html css angular wysiwyg

【解决方案1】：

https://www.tinymce.com/

如果 angular 2 使用 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',
  });

索引.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>

剩余的可以从Tinymce读取

【讨论】：

我下载 tinymce 然后我应该在我的项目中添加文件！如何获得tinymce？
在 package.json 角度文件中添加依赖项 // "dependencies": {"tinymce": "4.3.12"} }，然后在终端添加 npm install tinymce
angular 2 正式发布后如何使用？ @mayur

【解决方案2】：

我同意 @mayur 使用 angular2 和 tinyMCE。如果您根据@mayur 的回答需要更多关于如何操作的指导：

指令/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>

希望对你有帮助

【讨论】：

这不适用于路由器页面。我们需要为路由器页面做什么？
应用模块不需要导入指令吗？
自 Angular 2 正式发布以来我还没有更新过这个；会尝试在某个时候回到它！正如@Jon 所说，最大的变化是应用程序模块需要导入指令而不是在组件中。
EditorDirective 应该出现在 app.module.ts @chris.currin 的声明中
这个模块兼容AOT编译吗？ typescript 没有 d.ts 文件。你用 AOT 构建过吗？

【解决方案3】：

我遵循了答案，但无法使其正常工作，可能是因为我正在使用路由并且应用指令的 dom 元素尚不可用。我刚刚将 tinymce.init 代码从构造函数移至 ngOnInit 函数，现在它按预期工作：

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

【讨论】：

【解决方案4】：

这里是完整的步骤说明。

安装：
```
npm install --save tinymce
```

在文件中给出 tinymce 脚本文件的路径

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

运行以下命令，它将复制assets文件夹中的样式。
```
xcopy /I /E node_modules\tinymce\skins src\assets\skins
```

为 tinymce 创建指令，以便在应用程序的任何地方使用它。

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

另存为 simple-tinymce.directive.ts

现在在 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.

你可以像下面这样在组件模板中使用

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

您可以像下面这样在 component.ts 中获取

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

【讨论】：