如何使用npm中的CKEditor和webpack？
理想情况下，我希望npm install ckeditor --save然后var CK = require('ckeditor');没有任何全局命名空间污染。
答案 0 :(得分：11)
问题
据我所知，目前无法将CKEDITOR作为chunck直接加载到webpack中而不会出现一些错误，尤其是在开始加载其他插件时。其中一个原因似乎是ckeditor在运行时自己做了异步请求，导致我尝试过的几乎所有实现都会破坏各种各样的事情。
解决方案
使用scriptjs将其作为外部库加载。
npm install scriptjs --save
现在在您的代码中，您可以这样调用它：
var $s = require('scriptjs');
$s('./vendor/ckeditor/ckeditor.js', function(){
CKEDITOR.replace('editor1');
});
请注意。
这不适用于未压缩的源，因为ckeditor函数不直接在ckeditor.js文件中。由于未完成的网络请求，这将导致其余逻辑在完全构造CKEDITOR对象之前运行。
如果您希望修改CKEDITOR clone https://github.com/ckeditor/ckeditor-dev的源代码并运行它的构建脚本以获得可用的自定义版本。
看起来CKEditor在版本5中包含了ES6，我怀疑他们在这个版本中会有webpack支持，但是谁知道它在发布之前会有多长时间。
如果有更好的方法，请告诉我。
答案 1 :(得分：6)
将CKEditor与Webpack一起使用是可行的，它要求您使用Webpack捆绑CKEditor文件将从浏览器加载，如插件和语言文件。
使用require.context() api完成。
创建您自己的Webpack模块，并使用以下文件将其命名为 ckeditor_loader ：
/* index.js */
import './loader.js'
import 'ckeditor/ckeditor'
// You can replace this with you own init script, e.g.:
// - jQuery(document).ready()
window.onload = function () {
window.CKEDITOR.replaceAll()
}
/* loader.js */
window.CKEDITOR_BASEPATH = `/node_modules/ckeditor/` # This should beging with your `output.publicPath` Webpack option.
// Load your custom config.js file for CKEditor.
require(`!file-loader?context=${__dirname}&outputPath=node_modules/ckeditor/&name=[path][name].[ext]!./config.js`)
// Load files from ckeditor.
require.context(
'!file-loader?name=[path][name].[ext]!ckeditor/',
true,
/.*/
)
/* config.js */
window.CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
}
现在确保您的模块已加载：
// Include in one of the javascript files that webpack
// is already processing. Probably index.js or app.js:
import 'ckeditor_loader'
这是一个非常基本的实现。我写了一个更广泛的教程，它允许更快的编译时间和更多的自定义选项： How to use CKEditor 4 with Webpack
答案 2 :(得分：3)
npm install ckeditor --save-dev
require('ckeditor');
加载后，chkeditor可用作全局变量CKEDITOR
CKEDITOR.replace('elementId');
CKeditor没有对webpack的适当支持。由于编辑器加载了自己的css / js文件，因此您很可能会遇到这个问题。您可以尝试为这些资源引用CDN版本。或者，您可以尝试将带有webpack的CKeditor目录复制到公共可访问文件夹。使用CKEDITOR_BASEPATH定义文件的路径。
window.CKEDITOR_BASEPATH = '//cdn.ckeditor.com/4.6.2/full-all/';
在导入语句上方定义window.CKEDITOR_BASEPATH
答案 3 :(得分：1)
CK编辑器5可以轻松地与webpack一起使用：https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html
虽然应该注意到截至2018年2月它仍处于alpha2：https://github.com/ckeditor/ckeditor5#packages
我可以使用以下内容开始使用Rails和webpacker：
yarn add \
css-loader \
node-sass \
raw-loader \
sass-loader \
style-loader
yarn add \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-basic-styles
在我直接从快速入门指南中复制的代码中：
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
const element = document.getElementById('editor')
ClassicEditor.create(element, {
plugins: [Essentials, Paragraph, Bold, Italic],
toolbar: ['bold', 'italic']
})
.then(editor => {
console.log('Editor was initialized', editor)
})
.catch(error => {
console.error(error.stack)
})
最后，我必须按照快速入门指南为ckeditor svg图标添加一个加载程序。我在这里使用了webpacker引用https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader
// config/webpacker/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.insert('svg', {
test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: 'raw-loader'
}, { after: 'file' })
const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.(svg)$/i
module.exports = environment
答案 4 :(得分：-2)