在網上找了很多富文字編輯器,都沒使用成功,很多教程只教一般,關鍵的程式碼也不說明,讓你去猜,我很無奈,只好自己去找自己去親測,而且有些樣式和功能也不是很滿意,千挑萬選才選中這款編輯器,並且將他用起來了!賊多的坑!不過還是克服了!

樣式如下:

使用方法如下:首先cli配置並且安裝ng2-ckeditor:

"ng2-ckeditor": "^1.1.6"

然後再app.module中引入

import {CKEditorModule} from 'ng2-ckeditor';

imports: [CKEditorModule]

在index.html中引入js

<script 
 
src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>

最後就是用到富文字編輯器的標籤:

<ckeditor [(ngModel)]="ckeditorContent" debounce="500"  [config]="config">
</ckeditor>
輸入的內容：<br> {{ ckeditorContent }}

ts:

  ckeditorContent = '';

config = {
    filebrowserBrowseUrl: '&&&&&',
    filebrowserUploadUrl: '&&&'
  };
 

歡迎加入我的Angular4交流QQ群:560334140,大家互相學習互相進步!