Can I modify, the default icon toolbar "SpecialCharacters" with a custom TEXT ?

[Joaquim3]

Dear Developpers,

I would like to change the default icon toolbar "SpecialCharacters" with a custom TEXT as shown in the images below.

This is my situation :

ClassicEditor
    .create( document.querySelector( '#myeditor' ), { toolbar: { items: [ 'specialCharacters' ] } })
    .then( myeditor => {
        ThisEditor = myeditor;

        ThisEditor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
            { title: '1', character: '😀'},
            { title: '2', character: '😁'},
            { title: '3', character: '🧐'}
        ] );

    } );

Everything works fine.

But I would like to change the default icon toolbar "SpecialCharacters" with a custom TEXT as shown in the images below.

Kind Regards, Joaquim

✔️ Expected result

❌ Actual result

version : CKEDITOR 5 plugin : specialCharacters Browser: Mozilla OS: Linux Mint

[Joaquim3]

I don't know if it is the right way, but in ckeditor.js, I managed to change :

label:e("Special characters"),icon:jz,tooltip:true into label: e( '😀' ), tooltip: true, withText: true

But the problem is that the space after the smiley is too large. Is there a way to set the width of this space ?

[Joaquim3]

Finally, I went back to the SVG

To resume my adventure :

1. in ckeditor.js

2. var jz='<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="26.000000pt" height="25.000000pt" viewBox="0 0 26.000000 25.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,25.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M68 234 c-60 -32 -78 -129 -33 -183 67 -79 186 -52 215 48 28 100 -88 187 -182 135z m120 -17 c30 -14 52 -56 52 -98 0 -43 -56 -99 -99 -99 -99 0 -156 115 -88 178 43 41 81 46 135 19z"/><path d="M80 150 c0 -11 5 -20 10 -20 6 0 10 9 10 20 0 11 -4 20 -10 20 -5 0 -10 -9 -10 -20z"/><path d="M166 163 c-12 -12 -6 -33 9 -33 8 0 15 6 15 14 0 17 -14 28 -24 19z"/><path d="M75 100 c-10 -16 14 -49 40 -56 32 -8 75 19 75 46 0 18 -7 20 -54 20 -30 0 -58 -4 -61 -10z m105 -10 c0 -5 -22 -10 -50 -10 -27 0 -50 5 -50 10 0 6 23 10 50 10 28 0 50 -4 50 -10z"/></g></svg>';

3. label:e("😀"),icon:jz,tooltip:true

This is the result:

[Joaquim3]

Well, I'm not yet satified, because the size of the smileys is too small in the selection box.

Is there a way to inscrease their size ?

[rakeshgujjar]

export const localizedSpecialCharacterPlugin = (editor) => { editor.ui.componentFactory.add('localizedSpecialCharacter', (locale) => { const fontButton = editor.ui.componentFactory.create('specialCharacters') fontButton.buttonView.label = 'Emoji' fontButton.buttonView.tooltip= 'Emoji' fontButton.buttonView.icon = '' // First set the icon to empty fontButton.buttonView.class = 'ow-icon-editor-emoji' // You can provide font awesome class name fontButton.buttonView.icon = '' // If you dont have font awesome class name you can provide SVG icon path here. return fontButton }) }

plugins: [ localizedSpecialCharacterPlugin ] under plugin in editor configuration

Never change plugin level. Always try to override it

This works for me.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

[Dlas1212]

@Joaquim3

Found the solution:

const specialCharactersButtonView = editor.ui.view.toolbar.items._items.find(item => item.label === 'Special characters')
if (specialCharactersButtonView) {
    specialCharactersButtonView.icon = '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="26.000000pt" height="25.000000pt" viewBox="0 0 26.000000 25.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,25.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M68 234 c-60 -32 -78 -129 -33 -183 67 -79 186 -52 215 48 28 100 -88 187 -182 135z m120 -17 c30 -14 52 -56 52 -98 0 -43 -56 -99 -99 -99 -99 0 -156 115 -88 178 43 41 81 46 135 19z"/><path d="M80 150 c0 -11 5 -20 10 -20 6 0 10 9 10 20 0 11 -4 20 -10 20 -5 0 -10 -9 -10 -20z"/><path d="M166 163 c-12 -12 -6 -33 9 -33 8 0 15 6 15 14 0 17 -14 28 -24 19z"/><path d="M75 100 c-10 -16 14 -49 40 -56 32 -8 75 19 75 46 0 18 -7 20 -54 20 -30 0 -58 -4 -61 -10z m105 -10 c0 -5 -22 -10 -50 -10 -27 0 -50 5 -50 10 0 6 23 10 50 10 28 0 50 -4 50 -10z"/></g></svg>'
}

[Joaquim3]

Thanks Dias1212, 😀

I read that they have no other way than the one you provided by searching the label : https://github.com/ckeditor/ckeditor5/issues/11749