I integrate CKEditor5 editor on my project to do email template. Below is my CKEditor code:
<CKEditor
editor={ ClassicEditor }
config={ {
toolbar: [ 'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' , 'fontColor' , 'fontBackgroundColor' , 'code', 'uploadImage'],
ckfinder:{
uploadUrl:'upload url'
}} }
data={template}
onReady={ editor => {
// You can store the "editor" and use when it is needed.
//console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log(data)
setTemplate(data)
} }
/>
When I store image using CKEditor in my database the CKEditor code comes like this:
<figure class="image image_resized" style="width:2.82%;"><img src="https://www.w3schools.com/html/pic_trulli.jpg"></figure><p> welcome to {{first_name}}</p>
My template comes like this:
I styled in CKEditor like the below image, but the image resize not coming in my template:
The issue is when use figure tag like this it works:
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:10%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
but in CKEditor automatically code generating like this:
<figure style="width:20%;">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

