Search code examples
cssckeditortextareaborderckeditor5

How to remove the border of the CKEditor 5 text field?

Please help me solve a seemingly simple question. I have not found a solution to this problem. I tried using CSS and just changing the parameters - it doesn't work. I just need to remove or hide the border of the CKEditor 5 text box. How can I do this?

Thanks!

enter image description here

<textarea id="editor"><p>Text...🐺</p></textarea>

ClassicEditor
        .create( document.querySelector( '#editor'), {
        } )
        .then( editor => {
            const toolbarElement = editor.ui.view.toolbar.element;                
            toolbarElement.style.display = 'none';
            editor.enableReadOnlyMode( 'my-feature-id' );
        } )
        .catch( err => {
            console.error( err.stack );
        } );
Solution

  • I found it when console log editor.ui.view

    ClassicEditor
        .create( document.querySelector( '#editor'), {
        } )
        .then( editor => {
            const editableElement = editor.ui.view.editable.element;
            editableElement.style.border = 'none';
        } )
        .catch( err => {
            console.error( err.stack );
        } );