How to add text-highlight in asmoday74ckeditor5EditorClassic in Yii Framework?

Expert [addtoany]

Sep '24

To add text highlighting functionality to the Asmoday74 CKEditor 5 Classic in a Yii Framework application, you’ll need to follow several steps. CKEditor 5 doesn’t include text highlighting by default, so you’ll need to extend it with a plugin that provides this feature.

Here’s a complete guide on how to integrate text highlighting into your CKEditor setup in Yii Framework:

1. Install CKEditor 5 and the Text Highlighting Plugin

First, ensure you have CKEditor 5 installed in your project. If you haven’t already installed it, you can do so via npm or by adding it directly to your project.

a. Install CKEditor 5

Run the following command in your project directory:

Example


npm install --save @ckeditor/ckeditor5-build-classic

b. Install the Text Highlighting Plugin

You’ll need the @ckeditor/ckeditor5-highlight plugin. Install it using npm:

Example


npm install --save @ckeditor/ckeditor5-highlight

2. Configure CKEditor 5 in Your Yii Framework Application

You need to configure CKEditor 5 to use the text highlighting plugin. Here’s how to do it:

a. Create a Custom CKEditor Build

If you’re not using a custom CKEditor build already, you’ll need to create one that includes the highlighting plugin. Create a new file, say ckeditor-build.js, in your project:

Example


import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

ClassicEditor.builtinPlugins.push(Highlight);

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading', '|',
            'bold', 'italic', 'link', '|',
            'highlight', '|',
            'undo', 'redo'
        ]
    },
    highlight: {
        // Configuration for highlighting
        options: [
            {
                model: 'yellowMarker',
                class: 'marker-yellow',
                title: 'Yellow marker',
                color: 'yellow',
                type: 'marker'
            },
            {
                model: 'greenMarker',
                class: 'marker-green',
                title: 'Green marker',
                color: 'green',
                type: 'marker'
            }
        ]
    },
    language: 'en'
};

export default ClassicEditor;

This code includes the Highlight plugin and configures it with two highlight colors (yellow and green).

b. Add CKEditor to Your Yii Application

In your Yii view file where you want to add the editor, include the CKEditor build:

Example


use yii\web\View;

$this->registerJsFile('@web/js/ckeditor-build.js', ['depends' => [\yii\web\YiiAsset::class]]);

Then, initialize the editor in your JavaScript:

Example


<?php
$this->registerJs("
    ClassicEditor
        .create(document.querySelector('#editor'), {
            // You can also use the configuration here
        })
        .catch(error => {
            console.error('There was a problem initializing the editor:', error);
        });
", View::POS_READY);
?>

Ensure you have a textarea with the ID editor in your view where the editor will be instantiated:

Example


<textarea id="editor" name="content"></textarea>

3. Apply Custom Styles (Optional)

To ensure that the highlighted text displays correctly, you might want to add some CSS styles for the highlight classes:

Example


.marker-yellow {
    background-color: yellow;
}

.marker-green {
    background-color: lightgreen;
}

Add this CSS to your project’s stylesheet.

4. Handle Form Submission

When the form containing the CKEditor is submitted, the highlighted text will be included in the content field of your form. Make sure your server-side code is set up to handle and save this content properly.

5. Testing

Finally, test the editor to make sure the highlighting functionality works as expected. You should be able to select text and apply the highlight using the toolbar options.

Conclusion

By following these steps, you’ll have a fully functional CKEditor 5 instance in your Yii Framework application with text highlighting capabilities. This setup involves installing necessary packages, creating a custom CKEditor build, and configuring it in your Yii views.

FAQs

Can I use CKEditor 5 with other Yii versions? Yes, CKEditor 5 can be integrated with any Yii version as long as you follow the proper setup and configuration steps.
What if I want more highlight colors? You can add more highlight colors by extending the highlight options in your CKEditor configuration.
Is it possible to customize the toolbar further? Yes, you can customize the toolbar by modifying the toolbar configuration in your ckeditor-build.js.
Can I use CKEditor 5 without npm? Yes, you can include CKEditor 5 directly via CDN if you prefer not to use npm.
How do I handle server-side processing of highlighted text? Ensure your server-side code properly handles and processes the content field from your form, which includes the highlighted text.
Do I need to modify CKEditor’s source code? No, you don’t need to modify CKEditor’s source code; just configure it with the necessary plugins and options.
Can I use other plugins with CKEditor 5? Yes, CKEditor 5 supports various plugins that can be integrated similarly to how you added the highlighting plugin.
Is the highlighting feature compatible with all browsers? The highlighting feature should be compatible with modern browsers. Test across different browsers to ensure compatibility.
Can I add custom styles for highlighting? Yes, you can add custom styles by modifying your CSS to target the highlight classes.
What if I encounter issues with CKEditor initialization? Double-check your configurations and ensure that all required scripts and styles are correctly included in your project.

This detailed guide should help you successfully integrate text highlighting into your CKEditor 5 Classic setup in Yii Framework.

How to add text-highlight in asmoday74ckeditor5EditorClassic in Yii Framework?