How to Add a Source Mode Button in CKEditor 5

To add a switch to source mode button in the CKEditor editor, you can use the built-in toolbar feature. Here's an example of how you can achieve this:

First, make sure you have the CKEditor library included in your HTML file:

<script src='https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js'></script>

Then, modify your code to include the toolbar option:

var pdescription;

ClassicEditor
    .create( document.querySelector( '#pdescription' ), {
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'sourceEditing', // Add the sourceEditing button
                '|',
                'undo',
                'redo'
            ]
        },
        language: 'en'
    } )
    .then( editor => {
        pdescription = editor;

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

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

In the code above, I added the 'sourceEditing' button to the toolbar configuration. This will add a button to switch between the source mode and the rich text mode.

Remember to replace the 'en' value in the language option with the appropriate language code if needed.

With this configuration, you should see a "Source" button in the CKEditor toolbar that allows you to switch between the source mode and the rich text mode.