如何使用CKEditor作为使用webpack或类似工具构建的NPM模块

如何将npm的CKEditor与webpack一起使用

理想情况下，我希望

npm安装ckeditor——保存
var CK=require（'ckeditor'）没有任何全局命名空间污染。
CKEditor于发布

现在，您可以完全使用所需的命令

安装
注射
问题

据我所知，目前不可能将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的源代码，并运行其构建脚本以获得可工作的自定义版本

看起来CKEditor在版本5中采用了ES6，我怀疑他们在这个版本中会有webpack支持，但谁知道它在发布之前还要开发多久呢

如果有更好的方法，请让我知道。
可以将CKEditor与Webpack一起使用，它要求您与Webpack捆绑，CKEditor文件将从浏览器加载，如插件和语言文件

这是通过api完成的

创建您自己的网页包模块，并使用以下文件将其命名为ckeditor\U loader：

/*index.js*/
导入“./loader.js”
导入“ckeditor/ckeditor”
//您可以将其替换为自己的初始化脚本，例如：
//-jQuery（document）.ready（）
window.onload=函数（）{
window.CKEDITOR.replaceAll（）
}

/*loader.js*/
window.CKEDITOR_BASEPATH=`/node_modules/CKEDITOR/`#这应该从“output.publicPath”Webpack选项开始。
//为CKEditor加载自定义config.js文件。
require（`！file loader？context=${uuuuu dirname}&outputPath=node\u modules/ckeditor/&name=[path][name].[ext]！/config.js`）
//从编辑器加载文件。
require.context(
“！文件加载器？名称=[path][name].[ext]！ckeditor/”，
是的，
/.*/
)

/*config.js*/
window.CKEDITOR.editorConfig=函数（配置）{
//在此处定义对默认配置的更改。
//有关完整的参考资料，请参见：
// http://docs.ckeditor.com/#！/api/CKEDITOR.config
}

现在确保已加载模块：

//包含在Web包中的一个javascript文件中
//正在处理。可能是index.js或app.js：
导入“ckeditor\U加载程序”

这是一个非常基本的实现。我编写了一个更广泛的教程，它允许更快的编译时间和更多的自定义选项：
安装
负载
加载后，chkeditor作为全局变量可用
CKEDITOR

代替
问题
编辑器加载自己所需的CSS/JS资产，很可能找不到这些资产。您可以参考这些资源的CDN版本，也可以将CKeditor目录复制到可访问的公用文件夹中。使用
CKEDITOR\u BASEPATH
定义公共可访问资源的URL

window.CKEDITOR_BASEPATH    = '//cdn.ckeditor.com/4.6.2/full-all/';

注意：在导入语句之前定义
window.CKEDITOR\u BASEPATH
 CK Editor 5可以轻松地与webpack一起使用：

尽管需要注意的是，截至2018年2月，它仍处于alpha2状态：

我可以通过以下方式开始使用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参考

它有什么成功的地方吗？这个问题可能不是webpack特有的，而是“如何将ckeditor用作ES6模块”（或CommonJS模块）我想知道同样的事情。我得到了错误：
TypeError:CK.replace不是一个函数
你能发布一个问题，提供更多细节吗？我对如何在我的情况下实现这个解决方案有点困惑。我想我想知道你为什么要添加--save-dev。我的意思是，即使在prod中，在webpack生成了分块资产之后，我不需要scriptjs来获取ckeditor async吗？我已经使用上面的解决方案成功地将其添加到我的webpack项目中。仍然想知道为什么只保存dev，而不只是保存，似乎在prod中也需要scriptjs……这确实有效，谢谢。遗憾的是，所有这些以前伟大的软件都被困在恐龙时代，使用了古老的方法，比如强迫我们将它们塞进标签中——这完全违背了使用像Angular2这样的javascript框架和像Webpack这样的模块捆绑包的意义。希望他们能在下一个版本中解决这个问题。也许能总结一下那篇博文的内容？如果博客因任何原因而消亡，这将有助于未来的访问者，留下的答案有点空壳/缺乏细节？很棒的教程。请更新您的答案，以便我可以对其进行投票。答案将更新为更多上下文和解决方案的快速概述。请解释
是否包含在您的网页加载程序文件中：
@AlexeySh。解释；）我收到错误
意外标记您在导入语句之前定义了basepath吗？Paul，我在导入ClassicEditor时遇到问题-它说ClassicEditor未定义。我正在使用Rails 6.1的webpacker。思想？
require('ckeditor');

CKEDITOR.replace('elementId');

window.CKEDITOR_BASEPATH    = '//cdn.ckeditor.com/4.6.2/full-all/';

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)
})

// 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