Установка CKEditor с помощью npm

Я пытаюсь установить CKEditor в свой проект. Я использую Ларавель.

Я знаю, что могу загрузить файлы, но мне нравится усложнять себе жизнь, и я решил, что хочу установить CKEditor как зависимость от npm.

Как указано в их документации здесь, я добавил пакет в package.json, вот так :

"dependencies": {
    "jquery": "^1.11.1",
    "bootstrap-sass": "^3.0.0",
    "elixir-coffeeify": "^1.0.3",
    "laravel-elixir": "^4.0.0",
    "font-awesome": "^4.5.0",
    "ckeditor": "^4.5.7"
}

Теперь я думаю, что мне нужно потребовать это в моем app.coffee, и поэтому я попробовал:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')

Это наверняка добавит скрипт ckeditor.js в мой app.js. Однако у ckeditor, похоже, есть свои собственные зависимости, такие как config.js или editor.css, и, конечно же, сервер отвечает 404 на эти запросы.

Как я могу установить CKeditor таким образом?

Благодарю вас!


node.js laravel gulp ckeditor laravel-elixir
person Hector Ordonez    schedule 17.03.2016    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Вероятно, есть проблема с путями к этим зависимостям CKEditor. Я не уверен, используете ли вы браузер или что-то другое, но, например, в браузере использование require('ckeditor') приведет к загрузке файла ckeditor.js (возможно, в комплекте с другими файлами js) из того же каталога, что и ваш файл app.coffee, в то время как зависимости CKEditor находятся в node_modules/ckeditor/ каталог.

Чтобы указать CKEditor, из какого каталога он должен загружать свою зависимость, вы можете использовать CKEDITOR_BASEPATH.:

window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')

Вы можете увидеть, есть ли проблема с загрузкой этих файлов, используя вкладку Сеть в Консоли разработчика (например, F12 в Chrome).

Обратите внимание, это не идеальное решение для производственной среды, потому что тогда вам понадобится папка node_modules на вашем сервере. Вероятно, вам следует подумать о перемещении только этих зависимостей в другую папку во время процесса сборки/выпуска (и использовать CKEDITOR_BASEPATH, как и раньше, с путем к этой производственной папке).

person f1ames    schedule 18.03.2016

arrow_upward
-1
arrow_downward

(CKEDITOR5) В архиве resources/js/app.js

Añadir la siguiente linea (выполните npm run dev para mix):

window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

HTML JS:

<html lang="es">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="[path]/public/app.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>
person Carlos Pola Díaz    schedule 29.06.2021