- download git clone https://github.com/ckeditor/ckeditor5-build-classic.git
- 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'; // 移除图片上传页面的'高级','链接'页签
};