After adding toolbar it is giving an error

[saiganeshkreeti]

Origin URL

https://ckeditor.com/docs/ckeditor5/latest/tutorials/crash-course/editor.html

Project version

41.0.0

Is the information outdated? How?

No response

Is there something missing in the guide? What is it?

No response

Is there anything else you would like to add?

After adding toolbar it is rising an issue

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getAttribute') at IconView._updateXMLContent (iconview.js:69:1) at IconView.render (iconview.js:50:1) at IconView.<anonymous> (observablemixin.js:181:1) at IconView.fire (emittermixin.js:146:1) at <computed> [as render] (observablemixin.js:184:1) at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:179:1)

User agent

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

[Witoso]

Hi! The guide you mention speaks nothing about the toolbar. Could you describe a bit more your setup, and share some code?

[saiganeshkreeti]

@Witoso Actually I'm following https://ckeditor.com/docs/ckeditor5/latest/tutorials/crash-course/editor.html at first text editor is working fine but after adding toolbar I was getting issue as mentioned above

toolbar: { items: [ 'undo', 'redo' ] }

[Witoso]

I went step by step, and unfortunately, cannot reproduce, could you send your code sample (e.g. zip), and information about your platform?

[CKEditorBot]

The issue lacks the feedback we asked for two weeks. Hence, 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.

[Ashok-Bugude-Suth]

I am facing similar issue following https://ckeditor.com/docs/ckeditor5/latest/tutorials/creating-simple-plugin-timestamp.html in reactjs

CkEditor.js:20 TypeError: Cannot read properties of null (reading 'getAttribute')
    at IconView._updateXMLContent (iconview.js:69:1)
    at IconView.render (iconview.js:50:1)
    at IconView.<anonymous> (observablemixin.js:181:1)
    at IconView.fire (emittermixin.js:146:1)
    at <computed> [as render] (observablemixin.js:184:1)
    at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:179:1)
    at ViewCollection.<anonymous> (viewcollection.js:63:1)
    at ViewCollection.fire (emittermixin.js:146:1)
    at ViewCollection.addMany (collection.js:106:1)
    at ViewCollection.add (collection.js:75:1)

CKEditor.js

import React, { useEffect } from 'react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { List } from '@ckeditor/ckeditor5-list';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';

const Editor = () => {
    useEffect(() => {
        if (document.querySelector('#editor'))
            ClassicEditor.create(document.querySelector('#editor'), {
                plugins: [Essentials, Paragraph, Heading, List, Bold, Italic],
                toolbar: ['heading', 'bold', 'italic', 'numberedList', 'bulletedList'],
            })
                .then((editor) => {
                    console.log('Editor was initialized', editor);
                })
                .catch((error) => {
                    console.error(error.stack);
                });

        return () => {
            ClassicEditor.getInstance()
                .then((editor) => {
                    editor.destroy();
                })
                .catch((error) => {
                    console.error('Error while destroying the editor:', error);
                });
        };
    }, [document.querySelector('#editor')]);

    return (
        <div id='editor'>
            <h2>Timestamp plugin</h2>
            <p>Press the timestamp button to insert the current date and time.</p>
        </div>
    );
};

export default Editor;

App.js

import React from 'react';
import Editor from './CKEditor';

const App = () => {
    return (
        <div>
            <Editor />
        </div>
    );
};

export default App;

[Frosty354]

facing the same issue with react js

link I'm following: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html#integrating-ckeditor-5-built-from-source

here is my app.tsx

// App.jsx / App.tsx

import React, { Component } from 'react';

import { CKEditor } from '@ckeditor/ckeditor5-react';

// NOTE: Use the editor from source (not a build)!
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';

import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';

const editorConfiguration = {
    plugins: [ Essentials, Bold, Italic, Paragraph ],
    toolbar: [ 'bold', 'italic' ]
};

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor&nbsp;5 from source in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    config={ editorConfiguration }
                    data="<p>Hello from CKEditor&nbsp;5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event ) => {
                        console.log( event );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[FilipTokarski]

👋 For everyone struggling with this error - it's probably a missing svg loader in webpack config. Please check this comment for more details.