Ckeditor5: how to hide border of the image when mouse over under readonly mode?

[qiaqiaxian]

Is this a bug report or feature request? (choose one)

Other

💻 Version of CKEditor

CKEditor5

📋 Steps to reproduce

the border arounded the image

✅ Expected result

No border

[jodator]

@qiaqiaxian AFAIK there is no direct solution but you can style the editing area by yourself.

When toogling read only mode add some class, ie off to the editing container and disable outline on <figure> in your CSS:

.ck.off figure.image,
.ck.off figure.image:hover {
    outline: none;
}

@oleq / @Reinmar: I've checked this and the editor does not set any CSS class on the editing area. Maybe we should add something in the read only mode so the developers could change CSS (i.e. gray out text)?

[dkonopka]

☝️ Good point @jodator, by default we should toggle class in the read-only mode.

Anyway, there is a custom property for selected widget, so here is better solution:

.ck-read-only {
   --ck-widget-outline-thickness: 0;
}

[Reinmar]

@oleq / @Reinmar: I've checked this and the editor does not set any CSS class on the editing area. Maybe we should add something in the read only mode so the developers could change CSS (i.e. gray out text)?

Definitely a good idea. Also, why aren't we disabling that outline in the read-only mode? :D

[qiaqiaxian]

@jodator @dkonopka thx, both nice work!
@Reinmar i agree with @jodator 's idea, maybe add some configs ?