ionic3 移动端使用富文本编辑器

1.npm install ng2-ckeditor --save
2. 添加到index.html中
这里建议去官网下载完整的包

https://ckeditor.com/ckeditor-4/download/

3.import{ CKEditorModule }from'ng2-ckeditor'; 添加到app.module.ts中

image.png

4.具体使用页面的module.ts中也要添加CKEditorModule

image.png

5.模版

6.编辑器配置

  editContent: string = ''
  protected  config: any= {
    uiColor: '#F8F8F8',   // 编辑框背景色
    language: 'zh-cn',  // 显示语言
    toolbarCanCollapse: true,  // 是否可收缩功能栏
    toolbar: [ 
      ['Maximize'],
      ['Undo','Redo','-','Cut',' Copy','Paste', 'PasteText', 'PasteFromWord','-','Link','Unlink','Anchor','-','Image','Table','HorizontalRule','Smiley','SpecialChar','-','Source'],
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
      ['Styles','Format','Font','FontSize'] 
    ]  // 工具部分
    };

7.效果

image.png

8.ios键盘无法关闭异常

//放在组件销毁钩子中关闭键盘会有延时，所以放在page的钩子
//点击空白处关闭就在中加点击事件
import { Keyboard } from 'ionic-angular';
import { Platform } from 'ionic-angular/platform/platform';

 ionViewWillLeave(){
    this.blur();
  }
    //ios关闭键盘
    blur(){
      if(this.pla.is("ios")){
        try {
          if(this.keyboard.isOpen()==false){
            let input=document.getElementById("click");
            input.focus();
            input.blur();
          }
        } catch (error) {
          console.log(error)
        }
      }    
    }

9.参考
https://www.jianshu.com/p/1426a371a7dd
https://blog.csdn.net/gavid0124/article/details/52092308