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

Question

如何在网络包中使用npm的CKEditor？

理想我想npm install ckeditor --save那么var CK = require('ckeditor');没有任何全局命名空间污染.

Answer 1

问题

据我所知,目前无法将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支持,但是谁知道在它发布之前它将在开发中持续多长时间.

如果有更好的方法,请告诉我.

Answer 2

将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'

这是一个非常基本的实现.我写了一个更广泛的教程,这允许更快的编译时间和更多的自定义选项: 如何使用的CKEditor 4的WebPack

Answer 3

安装

npm install ckeditor --save

加载

require('ckeditor');

加载 chkeditor 后可用作全局变量 CKEDITOR

代替

CKEDITOR.replace('elementId');

问题

编辑器加载它自己需要的 CSS/JS 资产，这些资产可能找不到。您可以参考这些资源的 CDN 版本，也可以将 CKeditor 目录复制到公共可访问文件夹。使用 定义公共可访问资源的 URL CKEDITOR_BASEPATH。

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

注意：window.CKEDITOR_BASEPATH在导入语句之前定义！

Answer 4

CKEditor 发布在NPM上。

现在您可以准确地使用您想要的命令。

安装

npm install ckeditor --save-dev

注入

var CK = require('ckeditor');