CKEditor 5 和CKEditor 4 无论是界面还是用法上完全不同，而且在插件的配置上也大不相同，CKEditor 5 采用的是npm的方式安装插件，使用更便捷。因为本次项目必须有源码编辑功能，所以舍弃了5，下面以CKEditor 4.17为例。
ckeditor4官网
ckeditor5官网
一、 开始start
NPM
○ 在webpack中使用npm install ckeditor4
首先需配置webpack.config.js，理解CopyWebpackPlugin
const CopyPlugin = require( 'copy-webpack-plugin' ); module.exports = {plugins: [new CopyPlugin( {patterns: [{from: '{config.js,contents.css,styles.js,adapters/**/*,lang/**/*,plugins/**/*,skins/**/*,vendor/**/*}',to: path.join( __dirname, dist, 'ckeditor4' ),context: path.join( __dirname, 'node_modules', 'ckeditor4' )},]})]}
新建一个ckeditor.js文件, 预设在引入框架前加载。
window.CKEDITOR_BASEPATH = /ckeditor4/
html:
<textarea name="editor1" id="editor1" rows="10" cols="80" data-sample-short></textarea>
js:
import 'ckeditor4';const {CKEDITOR } = window;const editor = CKEDITOR.replace('editor1', {//config});
○ 基于vue项目npm install ckeditor4-vue
import Vue from 'vue';import CKEditor from 'ckeditor4-vue';
v-model指令启用开箱即用双向数据绑定。
config指令可帮助您将编辑器配置传递给编辑器实例。
read-only只读。
<template><div id="app"><ckeditor v-model="editorData" :config="editorConfig" read-only="true"></ckeditor></div></template>export default {name: 'app',components: {ckeditor: ponent},data() {return {editorData: '<p>Content of the editor.</p>',editorConfig: {// config}};}}
获取编辑器内容。
component.instance.getData();
CDN
标准: <script src="///4.17.1/standard/ckeditor.js"></script> 基本: <script src="///4.17.1/basic/ckeditor.js"></script>完整: <script src="///4.17.1/full/ckeditor.js"></script>
下载
访问官方的CKEditor 4下载网站。建议在项目中使用完整版full或自定义customize。
第二步选择插件和主题。勾选常用的插件，如果没有特殊需求可不添加，具体插件作用第二大点会写。
第三步选择中文。
第四步勾选下载。
下载好的文件直接打开samples下的index.html访问
预览效果
可视化编辑工具栏，编辑完后可直接打开Advanced复制代码。
二、常用插件Plugin
默认是标准预设。如果需要更多的功能，需要进行设置额外插件来满足项目需求。比如字体颜色和背景颜色设置
consfig.extraPlugins = 'colorbutton';
forms 添加表单工具， 复选框、单选框、文本域、隐藏域等。
preview 正文预览justify 对齐方式， 在 toolbar 中展示按钮。
CKEDITOR.replace('editor1', {toolbar: [{name: 'align',items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']}]})
图像插件 “单击并拖动”调整大小、设置图片标题
config.extraPlugins = 'image2,uploadimage';
三、图片上传upload
默认上传弹窗是没有上传按钮的，需要通过config.filebrowserUploadUrl和config.filebrowserImageUploadUrl配置服务器上传url，设置正确设置后自动可用。
CKEDITOR.replace( 'editor1', {image_previewText: CKEDITOR.tools.repeat(' ', 1), // 清空预览框中的默认文字filebrowserUploadUrl: 'https://xxx',filebrowserImageUploadUrl: 'https://xxx'});
两个方式设置请求头。
第一种方式：
config.fileTools_requestHeaders = {'X-Requested-With': 'XMLHttpRequest','Custom-Header': 'header value'};
第二种方式：前提必须设置config.isFileUploadSupported = true指示当前浏览器是否支持通过XHR请求发送文件所必需的方法。
editor.on('fileUploadRequest', (evt) => {const {fileLoader } = evt.data;const {xhr } = fileLoader;const formData = new FormData();formData.append('file', fileLoader.file, fileLoader.fileName);formData.append('owner', uuid);formData.append('spaceCode', 'default');xhr.open('POST', fileLoader.uploadUrl, true);xhr.setRequestHeader('Authorization', authToken);xhr.send(formData);evt.stop();});
上传接口返回数据格式。
四、自定义文件管理器browse
// 外部文件管理器filebrowserUploadMethod: 'form',filebrowserBrowseUrl: './browse.html?type=1',filebrowserImageBrowseUrl: './browse.html?type=0',
browse.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Example: Browsing Files</title><script>// Helper function to get parameters from the query string.function getUrlParam( paramName ) {var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );var match = window.location.search.match( reParam );return ( match && match.length > 1 ) ? match[1] : null;}// Simulate user action of selecting a file to be returned to CKEditor.function returnFileUrl() {var funcNum = getUrlParam( 'CKEditorFuncNum' );var fileUrl = '/path/to/file.txt';window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );window.close();}</script></head><body><button onclick="returnFileUrl()">Select File</button></body></html>
---- end。
