CKEditor5 image resize not working correctly

Viewed 769

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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; welcome to &nbsp; {{first_name}}</p>

My template comes like this:

enter image description here

I styled in CKEditor like the below image, but the image resize not coming in my template:

enter image description here

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>
1 Answers

look at this, I guess you need to change the figure tag display to block.

    <html>
<head>
<style>
figure {
  display: block;

}
</style>
</head>
<body>

<p>A figure element is displayed like this:</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="2%" >
</figure>

<p>Change the default CSS settings to see the effect.</p>

</body>
</html>
Related