Как в CKEditor 5 (Angular) сделать выбор произвольного rgba цвета для шрифта?

Чтобы в CKEditor 5 (Angular) добавить функциональность выбора произвольного RGBA цвета для шрифта, вам потребуется немного настроить редактор и добавить пользовательский плагин.

1. Установите CKEditor 5 в свой проект Angular, если вы этого еще не сделали. Вы можете сделать это с помощью команды npm:

npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

2. Создайте компонент, в котором будет размещен редактор CKEditor 5. Например, создайте компонент с именем "ckeditor.component.html". Вам потребуется добавить элемент <ckeditor> в шаблон компонента:

<ckeditor [editor]="Editor" [(ngModel)]="editorContent" (ready)="onReady($event)"></ckeditor>

3. Затем добавьте необходимый импорт в файле компонента "ckeditor.component.ts":

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

4. Далее в том же файле компонента определите свойство "Editor" и определите его значение в методе "ngOnInit()":

public Editor = ClassicEditor;
public editorContent: string = '';
ngOnInit() {
    ClassicEditor
        .create()
        .then(editor => {
            this.Editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
}

5. Теперь создайте пользовательский плагин для выбора произвольного RGBA цвета. Создайте файл с именем "custom-color-plugin.js" и добавьте следующий код:

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import ColorUtils from '@ckeditor/ckeditor5-utils/src/colorutils';

export default class CustomColorPlugin extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add('customColor', locale => {
            const view = new ButtonView(locale);

            view.set({
                label: 'Custom Color',
                icon: '<svg style="display:inline-block;vertical-align:middle;height:24px;width:24px;" viewBox="0 0 24 24"><path fill="#000000" d="M7,10L12,15L17,10H7Z" /></svg>',
                tooltip: true
            });

            // Выполняется при нажатии на кнопку пользовательского цвета
            this.listenTo(view, 'execute', () => {
                const color = prompt("Введите произвольный RGBA цвет:");
                if (color && ColorUtils.isValidColorString(color)) {
                    editor.model.change(writer => {
                        const selection = editor.model.document.selection;
                        if (selection.hasAttribute('color')) {
                            writer.setAttribute('color', color, editor.model.document.selection.getFirstRange());
                        }
                        else {
                            writer.setSelection(writer.createRangeFromSelection(selection));
                            writer.setAttribute('color', color);
                        }
                    });
                }
            });

            return view;
        });
    }
    // Здесь вы можете добавить любые другие методы плагина,
    // которые могут понадобиться для выполнения специфических действий
}

6. Затем добавьте плагин к CKEditor 5 в файле компонента "ckeditor.component.ts". Импортируйте плагин и добавьте его к объекту конфигурации редактора:

import CustomColorPlugin from './custom-color-plugin.js';

ngOnInit() {
    ClassicEditor
        .create(document.querySelector('#editor'), {
            plugins: [CustomColorPlugin], // добавляем плагин
            toolbar: ['customColor', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
        })
        .then(editor => {
            this.Editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
}

Теперь при запуске приложения вы должны увидеть кнопку "Custom Color" на панели инструментов редактора. При нажатии на кнопку вы увидите диалоговое окно, в которое можно ввести произвольный RGBA цвет. После выбора цвета текст в редакторе будет применять данный цвет.