Как использовать CKEditor в качестве модуля NPM, созданного с помощью webpack или аналогичного

Ответ 1

CKEditor был опубликован на NPM.

Теперь вы можете использовать именно те команды, которые вы хотите.

Установка

npm install ckeditor --save-dev

Inject

var CK = require('ckeditor');

Ответ 2

Проблема

Насколько я могу судить, в настоящее время невозможно загрузить CKEDITOR непосредственно в webpack в качестве chunck, не получая некоторых ошибок, особенно при загрузке дополнительных плагинов. Одной из причин этого является то, что 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 и запустите его build script, чтобы получить рабочую настраиваемую версию.

Похоже, что CKEditor использует ES6 в версии 5, и я подозреваю, что у них будет поддержка webpack в этой версии, но кто знает, как долго она будет развиваться до ее выпуска.

Если есть лучший способ сделать это, пожалуйста, дайте мне знать.

Ответ 3

Можно использовать CKEditor с Webpack, для этого необходимо, чтобы вы связали с Webpack файлы CKEditor, которые будут загружаться из браузера, как плагины и языковые файлы.

Это делается с помощью API require.context().

Создайте свой собственный модуль 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

Ответ 4

устанавливать

npm install ckeditor --save-dev

нагрузка

require('ckeditor');

После загрузки chkeditor становится доступным как глобальная переменная CKEDITOR

замещать

CKEDITOR.replace('elementId');

вопросы

CKeditor не имеет надлежащей поддержки для веб-пакета. Поскольку редактор загружает собственные файлы css/js, вы, скорее всего, столкнетесь с этой проблемой. Вы можете попробовать обратиться к версии CDN для этих ресурсов. Или вы можете попробовать скопировать каталог CKeditor с веб-пакетом в общедоступную папку. Определите путь к файлам с помощью CKEDITOR_BASEPATH.

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

Определите window.CKEDITOR_BASEPATH выше вашего оператора импорта

Ответ 5

CK Editor 5 можно легко использовать с веб-пакетом: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html.

Хотя следует отметить, что по состоянию на февраль 2018 года он все еще находится в 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 в соответствии с кратким руководством. Для этого я использовал ссылку на веб-упаковщик 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