iOS集成CKEditor5富文本编辑器

1. download git clone https://github.com/ckeditor/ckeditor5-build-classic.git
2. cd ckeditor5-build-classic/
3. npm install
4. npm run build (如果报错ERROR in bundle.js from UglifyJs，在package.json文件中devDependencies添加"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",)
5. 打开sample/index.html文件预览效果
6. 抽离配置，将ckeditor.js中的defaultConfig-toolbar全部删掉，新建一个文件ckeditor.config.js
7. 在index.html文件中引入ckeditor.config.js, 并在创建视图时候添加配置

ClassicEditor.create( document.querySelector( '#editor'), ckeditorConfig)
.then( editor => {
   window.editor = editor;
 } ).catch( err => {
     console.error( err.stack );
} );

9. 读取点击提交按钮之后CKEditor5的内容

addEventListener();
//监听事件
function addEventListener() {
    // body...
 
    //监听提交
    document.querySelector( '#submit' ).addEventListener( 'click', () => {
        //getData()方法是读取CKEditor的文本内容
        const editorData = editor.getData();
        console.log("xxx" + editorData);
    })

11.上传图片
使用CKFinder，初始化CKEditor时，需要定义 ckfinder的uploadUrl参数，参数为上传到自己服务器的地址；要求服务器返回的JSON格式为{"uploaded":1,"url":"/"}

ckfinder: {
  uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}

或者也可以自定义UploadAdapter

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        return new Promise((resolve, reject) => {
                           const formdata = new FormData();
                           console.log("this.loader.file" + this.loader.file);
                           formdata.append('data', this.loader.file);
                           formdata.append('fileName', this.loader.file.name);
                           formdata.append('contentType', "application/octet-stream");
                           formdata.append('key', "file");
                           console.log("data" + JSON.stringify(formdata));
                           $.ajax({
                                  url: 'xxxxx',
                                  type: 'POST',
                                  method: 'POST',
                                  data: formdata,
                                  dataType: 'json',
                                  // 告诉jQuery不要去处理发送的数据
                                  processData: false,
                                  // 告诉jQuery不要去设置Content-Type请求头
                                  contentType: "multipart/form-data",
                                  crossDomain: true,
                                  beforeSend: function(xhr) {
                                  xhr.withCredentials = true;
                                  console.log("正在上传，请稍后");
                                  },
                                  success: function (responseData) {
                                  var a=JSON.stringify(data);
                                  alert(a);
                                  if (responseData.res) {
                                  resolve({
                                          default: responseData.data
                                          });
                                  } else {
                                  reject(responseData.msg);
                                  }
                                   
                                  },
                                  error: function(errorStr) {
                                  resolve({
                                          default: "https://xxx.png"
                                          });
                                  var a=JSON.stringify(errorStr);
                                  alert(a);
                                    console.log("errorStr" + errorStr);
                                  }
                                  });
                            
                           });
    }
    abort() {
    }
}
 editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
          return new UploadAdapter(loader);

App端拦截上传，由Native端做图片上传，上传完成之后回调给前端页面（前两种方式都是前端页面用Ajax发起的POST请求来上传图片，但前端页面如果不部署到服务器，只是单独打进App包中，会触发浏览器的同源策略，无法避开。）

CKEditor4可以直接配置filebrowserImageUploadUrl作为图片上传路径。

CKEditor4配置：

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */
 
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config
    config.uiColor = '#f1e4db';
    config.skin = 'kama';
    config.language = 'zh-cn';
    config.maximizable = false;
    config.theme = 'default';
    config.forcePasteAsPlainText =false;
//    config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
     
    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        //{ name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' }
        //,{ name: 'about' }
    ];
 
    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';
 
    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';
  
    // 图片上传相关
    config.filebrowserImageUploadUrl = './uploadEvernoteImage'; // 图片上传路径
    config.image_previewText = ' '; // 图片信息面板预览区内容的文字内容，默认显示CKEditor自带的内容
    config.removeDialogTabs = 'image:advanced;image:Link'; // 移除图片上传页面的'高级','链接'页签
};