Ckeditor5: How to make the marker to be displayed in the document with color?

Created on 27 Mar 2020 · 4Comments · Source: ckeditor/ckeditor5

writer.addMarker( "search:blue", {range: range, usingOperation: false} );

Above code does not generate span in the view . Hence the markerline and marker dot is not visible.

Please let me know how to add marker and view it in the document. Any sample code will be very useful for my implementation of find functionality.

Thanks.

question

Source

Shankar26G

All 4 comments

Marker

Shankar26G on 27 Mar 2020

Hi, thanks for the report. Adding a marker to your model only, will not make it look highlighted in the view. To achieve this, you also need to add a conversion using marker-to-highlight downcast helper. You can do it like this:

// conversion between model and view
// don't forget to add a CSS class for 'my_marker_css_class' in your html file
editor.conversion.for( 'downcast' ).markerToHighlight( { model: 'my_marker', view: { classes: 'my_marker_css_class' } } );

// create a marker
editor.model.change( writer => {
    writer.addMarker( "my_marker", {range: range, usingOperation: false})
} );

You can start with this snippet and then further modify it to fit your particular needs.
Hope that helps!