Как определить CKEditor5 двусторонний преобразователь с представлением, определенным как RegExp или функция?

Question

Я хотел бы создать плагин, который допускает множество значений, которые рассматриваются как диапазон, а не как список.Поэтому я подумал, что мог бы использовать attributeToElement, но, похоже, он принимает только конкретные значения, которые хранятся в объекте, что невозможно для моего случая.Интересно, как определить элементы вида со всем диапазоном возможных значений (в моем случае цвета).Я думал о сопоставлении их с каким-то RegExp или функцией.Как мне этого добиться?

Answer 1

На самом деле кажется невозможным использовать конвертер attributeToElement, поставляемый с CKEditor5.Этот конвертер должен иметь ограниченное количество предопределенных опций для конвертации, которые будут использоваться как для upcast, так и для downcast.

С точки зрения плагина, который я хочу написать (цветной шрифт), этого недостаточно,Я не хочу ограничивать модель, чтобы она принимала только несколько цветов и не позволяла использовать разные.

Чтобы иметь больше контроля над upcast и downcast, необходимо написать собственные функции, которые будут покрывать такие случаи.И который сможет принять любой цвет, вставленный в редактор.Для этого необходимо использовать метод for.Ниже вы можете найти простое решение, которое будет принимать цвета, определенные в шестнадцатеричном формате, и преобразовывать его в модель.И еще одна функция, которая будет понижать его для просмотра.

Upcast:

editor.conversion.for( 'upcast' ).elementToAttribute( {
    view: {
        name: 'span',
        styles: {
            'color': /#\d+/
        }
    },
    model: {
        key: 'color',
        value: viewElement => {
            const color = viewElement.getStyle( 'color' );
            return color.replace( '#', '' );
        }
    }
} );

Downcast:

editor.conversion.for( 'downcast' ).attributeToElement( {
    model: 'color',
    view: ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
        style: 'color:#' + modelAttributeValue
    } );
} );