CKEditor5 图像调整大小无法正常工作

问题描述 投票：0回答：2

我在我的项目中集成了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 中设计了如下图所示的样式，但图像大小调整未出现在我的模板中：

问题是当使用像这样的图形标签时它可以工作：

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:10%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

但是在 CKEditor 中会自动生成这样的代码：

    <figure style="width:20%;">
  <img src="https://www.w3schools.com/html/pic_trulli.jpg">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
node.js reactjs ckeditor5
2个回答
0
投票

看这个，我猜你需要将图形标签显示更改为阻止。

    <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>
0
投票

你找到解决办法了吗？我也有同样的问题

我通过ckeditor5插入图像，它变成了200像素，但是ckeditor生成了这个代码

<figure class="image image_resized" style="width:200px;">
    <img style="aspect-ratio:1280/720;" src="data:image/jpeg;base64 etc etc.." width="1280" height="720">
</figure>

浏览器尊重 img 标签的宽度

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.