Saya ingin membuat plugin yang memungkinkan banyak nilai, yang dianggap sebagai rentang bukan daftar. Jadi saya pikir, saya bisa menggunakan attributeToElement, tetapi tampaknya hanya menerima nilai-nilai tertentu, yang disimpan dalam objek, apa yang tidak mungkin untuk kasus saya. Saya bertanya-tanya bagaimana cara mendefinisikan elemen tampilan dengan seluruh rentang nilai yang mungkin (dalam warna kasus saya). Saya berpikir untuk mencocokkannya dengan semacam RegExp atau fungsi. Bagaimana saya bisa mencapai itu?

3
Mateusz Samsel 4 Maret 2019, 14:27

1 menjawab

Jawaban Terbaik

Sebenarnya sepertinya tidak mungkin menggunakan attributeToElement konverter disediakan dengan CKEditor5. Konverter ini harus memiliki jumlah opsi yang telah ditentukan sebelumnya yang disediakan untuk konversi, yang akan digunakan untuk upcast dan downcast.

Dari perspektif plugin yang ingin saya tulis (font warna) itu tidak cukup. Saya tidak ingin membatasi model untuk menerima hanya beberapa warna dan mencegah penggunaan yang berbeda.

Untuk memiliki kontrol lebih atas upcast dan downcast diperlukan untuk menulis fungsi sendiri yang akan mencakup kasus tersebut. Dan yang akan dapat menerima warna apa pun yang dimasukkan ke editor. Untuk melakukannya, Anda harus menggunakan for metode. Di bawah ini Anda dapat menemukan beberapa solusi sederhana yang akan menerima warna yang ditentukan dalam hex dan meningkatkannya ke model. Dan fungsi lain yang akan menurunkannya untuk dilihat.

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( '#', '' );
        }
    }
} );

Sedih:

editor.conversion.for( 'downcast' ).attributeToElement( {
    model: 'color',
    view: ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
        style: 'color:#' + modelAttributeValue
    } );
} );
4
Mateusz Samsel 6 Maret 2019, 09:05