javascriptjqueryckeditor5

ckeditor addListToDropdown not showing label

editor.ui.componentFactory.add("InsertDropDown", locale => {

     //const dropdown = createDropdown(locale);
     const items = new Collection();
     items.add({
         type: 'button',
         model: new Model({
             withText: true,
             label: 'First item',
             labelStyle: 'color: red'
         })
     });

     items.add({
         type: 'button',
         model: new Model({
             withText: true,
             label: 'Second item',
             labelStyle: 'color: green',
             class: 'foo'
         })
     });

     items.add({
         type: 'button',
         model: new Model({
             withText: true,
             label: 'Second item',
             labelStyle: 'color: green',
             class: 'foo'
         })
     });


     const dropdown = createDropdown(locale);
     dropdown.buttonView.set({
         withText: true,
         label: "choose variable",
         tooltip: true
     });
     addListToDropdown(dropdown, items);
     return dropdown;
 })

this is the code which i am trying ckeditor version ckeditor5/42.0.0 using cdn

enter image description here

Solution

  • From the version 41.x the Model has changed to ViewModel https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-41.html

    items.add({
     type: 'button',
     model: new ViewModel({
         withText: true,
         label: 'Second item',
         labelStyle: 'color: green',
         class: 'foo'
     })
 });