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

Question

我正在处理一个使用 Summernote WYSIWYG 插件的项目。对于我们用编辑器上传的图片，我需要将图片宽度默认设置为全宽（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,});
});

Answer 1

我添加了一个回调如下。它在上传图片时对我有用。但在将图像添加为 link.

时不会

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

                    }
                }

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

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

How to set summernote set image to take full width always

html

javascript

css

summernote