Angular2 使用总结以及 引入tinymce富文本编辑器

Angular2  在使用过程中与  Angular 1.x  版本有很大区别。   

 一. 先说一下笔者感受，主要为以下几点： 

1.Angular2  将页面组件化，方面其它页面调用此页面。公共页面，弹出消息框，model 框 等都可以组件化。

2.页面 在调用这些组件很简单，在 html 中 写下相应标签代码。例如分页组件（可写为

<pagination [totalItems]="totalItems" [maxSize]="maxSize" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [firstText]="firstText"
  [lastText]="lastText" [previousText]="previousText" [nextText]="nextText" [boundaryLinks]="true" [rotate]="false" (numPages)="numPages = $event"
  (pageChanged)="pageChanged($event)" class="pagination-sm">
  </pagination>

（此处数据为双向绑定，原理类似于自定义html标签）

 (pageChanged)="pageChanged($event)"，此处在 ts 文件中为一个回掉函数，在 ts 代码中重写该函数，此处函数作用是分页组件页数发生变化时，会自动执行的函数，

  [firstText]="firstText" 是向组件传值 使用方法，组件中 需要用@Input()接收传递的值。

。

3.开发人员主要逻辑体现在在 ts文件，页面是 html 代码体现 。

4.ts 代码类似于 java 代码，同样有封装，继承，构造方法等，子类可以继承父类。

5.每个页面都有生命周期，我们可以重写相对应的函数，实现相应功能。详情请查看官方文档。

二.angular2使用tinymce富文本编辑器

  1.先看下效果

    

2. 代码实现

   1.在 package.json 加上依赖  "tinymce": "^4.5.0",使用 npm install 进行下载安装。

   2.ts 代码初始化

    // 初始化编辑器
 

 initEditor() {
    if (this.editor) return;
    tinymce.init({
      selector: '#post_editor',
      language: 'zh_CN',
      plugins: [
        'advlist autolink lists link charmap print preview hr anchor pagebreak media',
        'searchreplace wordcount visualblocks visualchars code fullscreen ',
        'insertdatetime nonbreaking save table contextmenu directionality ',
        'paste textcolor colorpicker textpattern'
      ],
      toolbar1: ' fullscreen insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
      toolbar2: 'print preview | forecolor backcolor media ',
      height:"480",
      image_advtab: true,
      menubar: true,
      setup: editor => {
        this.editor = editor;
      }
    });
  }


  ngOnDestroy() {
    // 销毁编辑器
    this.channelId=null;
    tinymce.remove(this.editor);
  }

2.html 代码

 <textarea
                id="post_editor"
                name="content"
                [(ngModel)]="doc.content"
                class="form-control" rows="30"
                >
</textarea>

您的帮助是我莫大的鼓励！喜欢的话可以扫描左侧二维码随意打赏哈~支付宝微信都可以，欢迎看看我的其他文章~

这篇文章目前收到了不少朋友的支持，在这里谢谢你们了，打赏有价，支持与鼓励无价！

本次本次 分享就到这里，使用过程中如果大家遇到问题请留言，欢迎指正和探讨，愿与你共同进步