Как собрать и настроить свою собственную версию CKEditor?

Как изменить подключение CKeditor на веб-страницах PHP, чтобы можно было вызывать ClassicEditor из разных файлов с разными параметрами, оставив файл app.js только с библиотекой?
  • 26 октября 2023 г. 20:08
Ответы на вопрос 1
Сборка и настройка собственной версии CKEditor включает несколько шагов:

1. Скачайте исходные файлы CKEditor с официального сайта https://ckeditor.com/ckeditor-5/download/.

2. Разархивируйте скачанные файлы на вашем компьютере.

3. Откройте командную строку (терминал) и перейдите в папку с разархивированными файлами CKEditor.

4. Установите все зависимости, выполнив следующую команду:

```
npm install
```

5. Настройте собираемую версию CKEditor в файле `build-config.js`, который расположен в папке CKEditor.

6. Запустите сборку, выполните следующую команду:

```
npm run build
```

Собранные файлы CKEditor будут помещены в папку `build`.

Что касается изменения подключения CKEditor на веб-страницах PHP, чтобы быть в состоянии вызывать ClassicEditor из разных файлов с разными параметрами, то требуется делать следующее:

1. Вставьте следующий код в ваш файл `app.js`:

```javascript
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

window.ClassicEditor = ClassicEditor;
```

2. Подключите `app.js` на ваших веб-страницах PHP перед тем, как использовать ClassicEditor:

```html
<script src="path/to/app.js"></script>
```

3. Теперь вы можете использовать ClassicEditor в других файлах, указывая различные параметры. Например, в вашем файле `script1.js`:

```javascript
// Используйте ClassicEditor с параметрами, заданными в script1.js
ClassicEditor.create(document.querySelector('#editor1'))
    .then(editor => {
        console.log('Editor 1 was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });
```

А в вашем файле `script2.js`:

```javascript
// Используйте ClassicEditor с параметрами, заданными в script2.js
ClassicEditor.create(document.querySelector('#editor2'))
    .then(editor => {
        console.log('Editor 2 was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });
```

Где `#editor1` и `#editor2` - это селекторы элементов на вашей веб-странице, где вы хотите отобразить редакторы CKEditor.
Похожие вопросы