CKEditor5, как проверить доказательство концепции простого плагина? - PullRequest
Новая
       68

CKEditor5, как проверить доказательство концепции простого плагина?

0 голосов
/ 06 марта 2019

У меня есть идея для плагина для CKEditor5, но настройка всего кажется непосильной и сложной. Так что почти не знаю, как начать. Есть ли способ, как я мог бы проверить, стоит ли моя идея для плагина углубиться в этот проект? Некоторое пошаговое руководство будет полезно.

1 Ответ

1 голос
/ 06 марта 2019

Есть как минимум 2 способа, которые я нашел. Вы можете написать простое доказательство концептуальных плагинов в ручном тесте для CKEditor5 или расширить одну из сборок CKEditor5.

Создание нового плагина внутри ручного теста:

Код CKEditor5 компилируется и обслуживается предварительно сконфигурированным веб-пакетом, поэтому вы можете беспокоиться только о написании правильного кода плагина. Более того, вы можете использовать режим просмотра, который в реальном времени будет отражать изменения в вашем простом плагине. Webpack также перестраивает страницу с тестом, который содержит ваш простой плагин.

Пошаговое руководство:

  1. Следуйте инструкциям по настройке среды здесь
  2. Открыть файл с тестом: ckeditor5/packages/ckeditor5-core/tests/manual/article.js. Вы можете написать плагин в этом файле
  3. Запустите тестирование в режиме просмотра, чтобы встроенный редактор был доступен в ваших браузерах: yarn run manual -sw --files=core/manual/article.js
  4. Открыть браузер на странице: http://localhost:8125

  5. Напишите простые плагины в тесте "article". Вы можете добавить эти записи, чтобы увидеть, работает ли он:

    • Добавьте эту часть перед созданием редактора. 

      import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
    init() {
        console.log( 'Hello world' );
    }
}

    • И изменить список включенных плагинов в конфигурации от: plugins: [ ArticlePluginSet ], до: plugins: [ ArticlePluginSet, SimplePlugin ],

  6. Обновите страницу с тестом, и вы должны увидеть в консоли текст: Hello world. Теперь вы можете внести новые изменения в ваш Simple Plugin и увидеть результат на странице.

Создание нового плагина внутри сборки CKEditor5:

Альтернативное решение - использовать одну из сборок CKEditor5 и дополнить ее собственным простым плагином.

Пошаговое руководство:

  1. Построение клона, например: git clone https://github.com/ckeditor/ckeditor5-build-classic.git
  2. Установить зависимости: npm install

  3. Вы можете добавить плагин в src/ckeditor.js аналогично тому, как это делалось в предыдущем руководстве.

    • Добавьте эту часть перед созданием редактора. 

      import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
class SimplePlugin extends Plugin {
    init() {
        console.log( 'Hello world' );
    }
}

    • И изменить список включенных плагинов в конфигурации. К массиву плагинов добавьте SimplePlugin,

  4. Теперь создайте свой новый пакет с npm run build

  5. Запустите http-сервер в каталоге вашего проекта и запустите samples/index.html. Вы должны увидеть Hello world в консоли браузера.
...