Angular

前言

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

1.安装

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

其一是普通的项目使用的方式，如下代码所示：
</code><br> <code>This is my textarea to be replaced with CKEditor.</code><br> <code>
在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文件中写下如下代码：
简单方便，保存之后到浏览器中即可查看。debounce是延迟0.5秒加载，config是你自己的配置项，需要在ts文件中配置好。
还可以自定义按钮，定制化功能，如下，在标签中插入一个标签即可，多个的话用一个标签把多个包裹起来即可。这样，你的编辑器中就可以显示你自己定义的按钮了。

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