How to Add a Switch Button Between HTML and Plain Editors

To activate a switch button between HTML editor and plain editor, you can add a button and a switch logic to toggle between the two modes. Here's an example:

HTML:

<div>
    <button id='switchButton'>Switch Editor</button>
    <div id='editorContainer'></div>
    <textarea id='plainEditor'></textarea>
</div>

JavaScript:

var isHtmlEditor = true; // Initial mode is HTML editor

// Create HTML editor
ClassicEditor
    .create( document.querySelector( '#editorContainer' ) )
    .then( editor => {
        pdescription = editor;

        pdescription.setData('<?php echo get_post_field('post_content', $pid); ?>');

        pdescription.model.document.on('change:data', () => {
            document.querySelector('#plainEditor').value = pdescription.getData();
        });
    } )
    .catch( err => {
        console.error( err.stack );
    } );

// Handle switch button click event
document.querySelector('#switchButton').addEventListener('click', function() {
    if (isHtmlEditor) {
        // Switch to plain editor
        document.querySelector('#editorContainer').style.display = 'none';
        document.querySelector('#plainEditor').style.display = 'block';
        document.querySelector('#plainEditor').value = pdescription.getData();

        isHtmlEditor = false;
    } else {
        // Switch to HTML editor
        document.querySelector('#editorContainer').style.display = 'block';
        document.querySelector('#plainEditor').style.display = 'none';
        pdescription.setData(document.querySelector('#plainEditor').value);

        isHtmlEditor = true;
    }
});

CSS:

#editorContainer {
    display: block;
}

#plainEditor {
    display: none;
}

In this example, the initial mode is set to HTML editor. When the switch button is clicked, it will toggle between displaying the HTML editor and the plain editor textarea based on the current mode. The content entered in one editor will be synchronized to the other editor.