php 移动端富文本编辑器,iOS集成CKEditor5富文本编辑器

cd ckeditor5-build-classic/

npm install

npm run build (如果报错ERROR in bundle.js from UglifyJs，在package.json文件中devDependencies添加"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",)

打开sample/index.html文件预览效果

抽离配置，将ckeditor.js中的defaultConfig-toolbar全部删掉，新建一个文件ckeditor.config.js

在index.html文件中引入ckeditor.config.js, 并在创建视图时候添加配置

ClassicEditor.create( document.querySelector( '#editor'), ckeditorConfig)

.then( editor => {

window.editor = editor;

} ).catch( err => {

console.error( err.stack );

} );

读取点击提交按钮之后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'; // 移除图片上传页面的'高级','链接'页签

};