Angular

前言

• 由于项目需要在页面中嵌入一个文本编辑器，因为之前的项目里用的是Ckeditor，所以我现在的项目里也就使用了Ckeditor，然而，却发现在Angular项目中使用Ckeditor是一个错误的决定，但是，凭借老夫强大的不服输的意志力填坑补坑，最后也算是基本上满足了需求。

1.安装

• 官网在此，如果是普通的非Angular项目，使用起来会更容易一些，下载压缩文件，然后引入相关文件即可使用。但是要是没自己操作过，我是没有发言权的，只能说在Angular项目中引入并使用都是一个巨坑。
• 按照文档中的步骤是下载并在项目中引入ckeditor.js文件，然后调用一个replace方法即可，然而还是太年轻，在Angular项目中这种方法行不通。行不通怎么办呢，另想办法，然后在文档中找到了配置CND来使用该编辑器的方法，然后反复折腾之后发现有两种方式可以在Angular项目中使用，但前提是必须使用CND，需要在index.html中配置引入如下声明：
  <script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
• 然后还需要下载ng2-ckeditor的组件，在项目目录下npm install ng2-ckeditor一下即可安装，因为还需要在项目中使用到CKEDITOR这样的变量，需要安装组件来引用该变量，安装之后，该变量的声明和在Angular项目中引入jQuery的$一样，在最后一个import后面declare var CKEDITOR: any即可使用。

2.使用

• 现在，CND和CKEDITOR都已经引入了，在你的项目中可以开始使用了，因为安装了ng2-ckeditor的组件，所以有两种使用方式。

方法一

• 其一是普通的项目使用的方式，如下代码所示：
  <textarea name="editor1" id="editor1">
This is my textarea to be replaced with CKEditor.
</textarea>
• 在html文件中放以上代码，然后在ts文件中初始化函数ngOnInit()中使用CKEDITOR.replace( 'editor1' );即可生效，效果图如下：
  Ckeditor
• 当然，没有配置过的原始状态不是这样的，这是我自己根据需求重新配置后的,这里是一个Angular项目中使用CKEDITOR的Demo，没有配置的原始样子就是Demo中的一大堆密集可怕的按钮。

方法二

• 方法二是使用比较Ng风格的方式，Github上的ng2-ckeditor文档讲的很详细，不懒的朋友可以仔细阅读，避免入坑。懒的朋友请看这里，安装了ng2-ckeditor之后，还需要在根模块app.module.ts中引入并声明你要使用这个东西了，然后就可以在项目中使用了。
• 引入：import { CKEditorModule } from 'ng2-ckeditor';
• 声明：imports: [ CKEditorModule]
• 接下来就可以在项目使用了，在html文件中写下如下代码：
  <ckeditor debounce="500" [config]="config"></ckeditor>
• 简单方便，保存之后到浏览器中即可查看。debounce是延迟0.5秒加载，config是你自己的配置项，需要在ts文件中配置好。
• 还可以自定义按钮，定制化功能，如下，在<ckeditor>标签中插入一个<ckbutton>标签即可，多个的话用一个<ckgroup>标签把多个<ckbutton>包裹起来即可。这样，你的编辑器中就可以显示你自己定义的按钮了。

<ckeditor debounce="500" [config]="config">
    <ckbutton [name]="'dynamicVar'"
               [command]="'openDynamicVar'"
               (click)="openDynamicVar($event,template)"
               [icon]="'/assets/var.gif'"
               [label]="'Get Variables'"
               [toolbar]="'document,1'">
      </ckbutton>
</ckeditor>

3.入坑

• 上述两种方法看起来貌似都挺好的，用起来也简单方便，但是，要是真这么容易的话，还谈什么入坑。
• 第二种比较ng风格的就有肯多bug，首先是*ngFor不能使用，还有一个editor-destroy-iframe的错误，按照风骚作者（他头像就是一脸风骚的样子）给出的解决方案试了一下，就是加了句extraPlugins: 'divarea'在配置里面，然鹅，虽然顺利解决了这两个问题，但是又引入了一个栈溢出的内存爆掉问题，然后去GitHub上开了issue问风骚的作者，但是没有回复，所以放弃了这种方式。
• 最后用了第一种非组件化的方法，由于我要实现的是一个自定义的按钮弹出框，其中也是遇到许多坑，但是也算是一个升级打怪的学习过程，收获不少。

结语

• 前端Angular打怪升级中，业余写写学习笔记，记录并分享学习心得，欢迎骚扰讨论技术问题。