ckeditor5 圖像調整大小無法正常工作..？

Question

我在我的項目中集成了 ckeditor5 編輯器來做電子郵件模板，下面是我的 ckeditor 代碼

<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)
                } }
        
            />

當我在我的數據庫中使用 ckeditor 存儲圖像時，ckeditor 代碼是這樣的

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

我的模板是這樣的

我在 ckeditor 中的樣式如下圖所示，但圖像調整大小沒有出現在我的模板中

一些請幫我解決這個歡迎！

Answer 1

看這個，我猜你需要把figure標簽顯示改成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>

ckeditor5 圖像調整大小無法正常工作..？

問題描述

1 個解決方案

解決方案1
0 2021-11-13 05:34:23

ckeditor5 圖像調整大小無法正常工作..？

問題描述

1 個解決方案

解決方案1 0 2021-11-13 05:34:23

解決方案1
0 2021-11-13 05:34:23