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

Question

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

理想情况下，我希望 npm install ckeditor --save 然后 var CK = require('ckeditor'); 没有任何全局命名空间污染。

Answer 1

CKEditor 发布于 NPM。

现在您可以完全使用您想要的命令了。

安装

npm install ckeditor --save-dev

注入

var CK = require('ckeditor');

Answer 2

问题

据我所知，目前不可能将 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 克隆 https://github.com/ckeditor/ckeditor-dev 和运行的源代码，它是构建脚本以获得工作的自定义版本。

看起来 CKEditor 在版本 5 中支持 ES6，我怀疑他们会在这个版本中支持 webpack，但谁知道在发布之前它会开发多长时间。

如果有更好的方法，请告诉我。

Answer 3

可以将 CKEditor 与 Webpack 一起使用，它要求您将 CKEditor 文件与 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

Answer 4

安装

npm install ckeditor --save

加载

require('ckeditor');

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

替换

CKEDITOR.replace('elementId');

问题

编辑器加载它自己所需的 CSS/JS 资产，可能无法找到这些资产。您可以参考这些资源的 CDN 版本，也可以将 CKeditor 目录复制到 public 可访问的文件夹。用 CKEDITOR_BASEPATH.

定义 public 个可达资源的 URL

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

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

Answer 5

CK Editor 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

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

How to use CKEditor as an NPM module built with webpack or similar

ckeditor

安装

注入

安装

加载

替换

问题