Создайте собственный плагин на ckeditor для приложения angular

Мне нужно создать собственный плагин для ckeditor, чтобы пользователи могли создавать cutom html элемент.

Мне удалось создать этот плагин в небольшом проекте, включая мой код в элементе скрипта, как в примерах ckeditor (после этого: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html) . Все отлично.

Но моя проблема в том, чтобы включить плагин в мое приложение Angular. Я не понимаю, как это импортировать.

Я пробовал много разных способов импортировать встроенный файл ckeditor.js, созданный с помощью webpack, но никогда не работал ...

Итак, моя основная проблема в том, что я не понимаю, как из простого проекта создать сборку с моим плагином внутри, чтобы импортировать ее в мое приложение Angular.

Спасибо, если у кого-то есть идея решить эту проблему ??


plugins angular ckeditor5
person matt2mi    schedule 12.04.2019    source источник
comment
У меня точно такая же проблема. Вы в этом разобрались?   -  person Sam    schedule 20.05.2019
comment
Я не понял, но попробую ваше решение в следующий понедельник, сейчас я не на работе. Благодарность !   -  person matt2mi    schedule 29.05.2019

Ответы (2)


arrow_upward
9
arrow_downward

Я узнал, как это сделать.

  1. клонировать ckeditor5-build-classic

    git clone -b stable https://github.com/ckeditor/ckeditor5.git
cd ckeditor5/packages/ckeditor5-build-classic/

  2. установить зависимости и любые другие плагины, которые вы можете добавить (например, выравнивание)

    npm i npm install --save-dev @ckeditor/ckeditor5-alignment

  3. обновить src/ckeditor.js, добавив плагины

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 

    // Plugins to include in the build.
    ClassicEditor.builtinPlugins = [
        ...
        Alignment                                                            
    ];

  1. запустите npm run build, чтобы упаковать новую сборку

  2. скопируйте файл build/ckeditor.js в папку с ресурсами в вашем приложении angular

  3. Вот как вы импортируете файл (путь может отличаться в зависимости от ваших настроек):

import * as CustomEditor from '@app/../assets/ckeditor.js';

Наконец, в вашем компоненте просто объявите редактор следующим образом:

public Editor = CustomEditor;

person Sam    schedule 20.05.2019
comment
Привет, для меня тоже нормально идти по твоему пути, но я хочу сделать это, добавив собственный плагин, как в этом примере: ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/ Выравнивание - это элемент ckeditor, мне нужно создать свой собственный. - person matt2mi; 03.06.2019
comment
МОЙ БОГ! Это действительно так просто! Я бился головой, читая документацию на веб-сайте ckeditor, задаваясь вопросом, действительно ли мне нужно было пройти через все эти вещи только для того, чтобы добавить «подчеркивание» и «выравнивание». Все это казалось очень запутанным и сложным для кого-то вроде меня, который никогда не пробовал это раньше. Бесконечно благодарен. Вы сэкономили мне много времени. - person Jette; 19.09.2019

arrow_upward
0
arrow_downward

Вам также необходимо будет указать параметр конфигурации.

Проверьте эту ссылку

person Mohammad Quadri    schedule 29.12.2020