web-dev-qa-db-ja.com

CKEditorをWebpackなどで構築されたNPMモジュールとして使用する方法

WebpackでnpmからCKEditorを使用するにはどうすればよいですか？

理想的には、グローバルな名前空間を汚染せずに_npm install ckeditor --save_、次にvar CK = require('ckeditor');が必要です。

ckeditor
19
Chris

問題

私が知る限り、特に追加のプラグインのロードを開始するときに、いくつかのエラーを発生させることなく、CKEDITORを直接チャンクとしてwebpackにロードすることは現在不可能です。これの理由の1つは、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を採用しているようです。このバージョンではCKEditorがWebpackをサポートするのではないかと思われますが、リリースされるまでの開発期間を知っているのはだれですか。

これを行うより良い方法がある場合は、お知らせください。

11
Dieter Gribnitz

WebpackでCKEditorを使用することは可能です。プラグインや言語ファイルなどのCKEditorファイルがブラウザからロードされるWebpackにバンドルする必要があります。

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'

これは非常に基本的な実装です。より広範なチュートリアルを作成しました。これにより、コンパイル時間が短縮され、カスタマイズオプションが増えます。 WebEditorでCKEditor 4を使用する方法

7
Federico JM

インストール

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を定義します

4
Joepie

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
0
Paul Odeon