Ckeditor5: Underline not working!

[Serzhs]

Hey, I'm using

"@ckeditor/ckeditor5-basic-styles": "^11.0.0",
"@ckeditor/ckeditor5-build-classic": "^11.2.0",
"@ckeditor/ckeditor5-ckfinder": "^10.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",

And when I try to implement underline, it's just not adding up and I see warning:

toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable
 {name: "underline"}

Code:

import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'

plugins: [Underline, Bold],

editorConfig: {
        toolbar: [ 'bold', 'underline' ]
      },

I see bold, but I don't see underline

p.s. icons are missing aswell

[Serzhs]

When I use main CKEditor without vuejs I see Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\jserzants\Desktop\projekti\project\node_modules\@ckeditor\ckeditor5-basic-styles\node_modules\@ckeditor\ckeditor5-core\src\plugin.js'

[Mgsy]

Hello @Espumisan, I've just created the CKEditor 5 and Vue.js project and successfully run it with the underline plugin. Did you follow our Vue.js integration guide?

[Serzhs]

Can you please share your vue code?

[Mgsy]

Here you go:

App.vue

<template>
  <div id="app">
     <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

  import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
  import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
  import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
  import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
  import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
  import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';

  export default {
      name: 'app',
      data() {
          return {
              editor: ClassicEditor,
              editorData: '<p>Content of the editor.</p>',
              editorConfig: {
                  plugins: [
                      EssentialsPlugin,
                      Underline,
                      EasyImage,
                      Alignment,
                      BoldPlugin,
                      ItalicPlugin,
                      LinkPlugin,
                      ParagraphPlugin
                  ],

                  toolbar: {
                      items: [
                          'bold',
                          'italic',
                          'underline',
                          'link',
                          'undo',
                          'redo',
                          'imageUpload'
                      ]
                  }
              }
          };
      }
  };
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.config.productionTip = false

Vue.use( CKEditor );

new Vue({
  render: h => h(App),
}).$mount('#app')

vue.config.js

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // The source of CKEditor is encapsulated in ES6 modules. By default, the code
    // from the node_modules directory is not transpiled, so you must explicitly tell
    // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
    transpileDependencies: [
        /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
    ],

    configureWebpack: {
        plugins: [
            // CKEditor needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin( {
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: 'en'
            } )
        ]
    },

    css: {
        loaderOptions: {
            // Various modules in the CKEditor source code import .css files.
            // These files must be transpiled using PostCSS in order to load properly.
            postcss: styles.getPostCssConfig( {
                themeImporter: {
                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                },
                minify: true
            } )
        }
    },

    chainWebpack: config => {
        // Vue CLI would normally use its own loader to load .svg files. The icons used by
        // CKEditor should be loaded using raw-loader instead.

        // Get the default rule for *.svg files.
        const svgRule = config.module.rule( 'svg' );

        // Then you can either:
        //
        // * clear all loaders for existing 'svg' rule:
        //
        //      svgRule.uses.clear();
        //
        // * or exclude ckeditor directory from node_modules:
        svgRule.uses.clear();

        // Add an entry for *.svg files belonging to CKEditor. You can either:
        //
        // * modify the existing 'svg' rule:
        //
        //      svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
        //
        // * or add a new one:
        config.module
            .rule( 'cke-svg' )
            .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
            .use( 'raw-loader' )
            .loader( 'raw-loader' );
    }
};

[Mgsy]

I'm closing it due to a lack of activity.

[Naresh4847]

For angular also its not working

[limcheepei]

Using Angular, the underline is not working also. Here is the code.

<ckeditor [editor]="editorComment" [(ngModel)]="editorData" [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic', 'underline', '|', 'NumberedList', 'BulletedList', 'Undo', 'Redo' ] }" (change)="onChange($event)" ></ckeditor>

Here is the error message.
toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable
{name: "underline"}

[gauravasrivastava]

I noticed the same issue with the React component of ckeditor5. "underline" option is not working. here is my snippet,
<CKEditor onInit={ editor => console.log( Array.from( editor.ui.componentFactory.names() ) ) } onChange={ ( event, editor ) => console.log( { event, editor } ) } config={ { removePlugins: [ 'Heading' ], toolbar: [ 'link', 'bold', 'italic', 'underline', 'bulletedList', 'numberedList' ] } } editor={ ClassicEditor } data={response.get('text')} />

[Mgsy]

@gauravasrivastava, did you add Underline plugin to your build? Keep in mind that it's not available by default, so it has to be installed manually. Also, can you see any errors in the console?

[Sawan1994]

@Mgsy New plugins are not getting added in react build provided by ckeditor 5. Can you share a working code via codepen etc for adding new plugins like font family, underline etc to react build of ckeditor5?

[Mgsy]

@Mgsy New plugins are not getting added in react build provided by ckeditor 5. Can you share a working code via codepen etc for adding new plugins like font family, underline etc to react build of ckeditor5?

If you don't build the editor from source, you have to prepare a custom build, then integrate it with React.

[farrvince]

@Mgsy New plugins are not getting added in react build provided by ckeditor 5. Can you share a working code via codepen etc for adding new plugins like font family, underline etc to react build of ckeditor5?

If you don't build the editor from source, you have to prepare a custom build, then integrate it with React.

Same error here: toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable - {name: "underline"

And I have the same error with multiple items:

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "imageResize"}

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "imageResize:50"}

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "imageResize:75"}

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "imageResize:original"}

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "linkImage"}

[Warning] widget-toolbar-no-items: Trying to register a toolbar without items. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-widget-toolbar-no-items (ckeditor.js, line 5)
– {toolbarId: "mediaEmbed"}

[Warning] toolbarview-item-unavailable: The requested toolbar item is unavailable. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-toolbarview-item-unavailable (ckeditor.js, line 5)
– {name: "AutoLink"}