如何设置summernote设置图像始终采用全宽

Posted 2023-03-22

【中文标题】如何设置summernote设置图像始终采用全宽

【英文标题】：How to set summernote set image to take full width always

【发布时间】：2019-09-24 17:07:00

【问题描述】：

我正在处理一个使用 Summernote 所见即所得插件的项目。对于我们使用编辑器上传的图像，我需要将图像宽度默认设置为全宽（100%）。这样就不会有文本换行或文本排列问题。如果有人能帮我解决这个问题，那就太好了。

这是我使用 summernote 的表单元素和脚本。

<div class="form-group">
<label>Post body</label>
<textarea name="body" id="postBody" cols="30" rows="10" placeholder="body" class="form-control"></textarea>
</div>

$(document).ready(function () 
            $('#postBody').summernote(height: 300,);
);

【问题讨论】：

如果图片是缩略图大小怎么办？

@AdityaThakur：没听懂你。你能详细说明一下吗

我的意思是如果图像非常小，它会被拉伸以适应summernote的宽度吗？还是会有文字环绕它？

要求将任何图像设置为全宽。无论大小。我不知道为什么客户需要它。但这是要求。

@AdityaThakur：找到了解决方案。我会将其发布为答案。它在上传图片时对我有用，但在添加图片作为链接时不起作用。

【参考方案1】：

我添加了如下回调。上传图片时它对我有用。但在添加图片作为链接时不会。

callbacks: 
   onImageUpload: function (files) 

                        if (!files.length) return;
                        var file = files[0];
                        // create FileReader
                        var reader = new FileReader();
                        reader.onloadend = function () 
                            // when loaded file, img's src set datauri
                            console.log("img", $("<img>"));
                            var img = $("<img>").attr(src: reader.result, width: "100%"); // << Add here img attributes !
                            console.log("var img", img);
                            $('#postBody').summernote("insertNode", img[0]);
                        

                        if (file) 
                            // convert fileObject to datauri
                            reader.readAsDataURL(file);
                        

                    
                

【参考方案2】：

我不知道这是否仍然是一个问题，但我通过调整summernote.js解决了它

在“Editor.prototype.insertImage”函数中我改了一行。见下文。

Original:
Editor.prototype.insertImage = function (src, param) 
    var _this = this;
    return createImage(src, param).then(function ($image) 
        _this.beforeCommand();
        if (typeof param === 'function') 
            param($image);
        
        else 
            if (typeof param === 'string') 
                $image.attr('data-filename', param);
            
            $image.css('width', Math.min(_this.$editable.width(), $image.width()));
        
        $image.show();
        range.create(_this.editable).insertNode($image[0]);
        range.createFromNodeAfter($image[0]).select();
        _this.afterCommand();
    ).fail(function (e) 
        _this.context.triggerEvent('image.upload.error', e);
    );
;

进行以下更改

$image.css('width', Math.min(_this.$editable.width(), $image.width()));

将summernote.js中的上述行更改为

$image.css('width', '100%');

新插入的图片默认宽度为 100%