Question

可以从网址向quill JS编辑器添加图像，但无法像所有传统的富文本编辑器那样找到从计算机添加图像的方法。

有没有办法达到这个目的？

Answer 1

这很简单。只需添加一个带有ql-image类的按钮。

以下示例：

export

最后，将工具栏容器设置为工具栏元素来实例化Quill：

<div id="toolbar" class="toolbar">
   <span class="ql-formats">
      <button class="ql-image"></button>
   </span>
</div>

这会将图像添加到您在img元素上作为基本64位编码字符串的内容可编辑区域。

Answer 2

您可以执行以下操作：

quill.getModule("toolbar").addHandler("image", () => {
        this.selectLocalImage();
    });

function selectLocalImage() {
    var input = document.createElement("input");
    input.setAttribute("type", "file");
    input.click();
    // Listen upload local image and save to server
    input.onchange = () => {
        const file = input.files[0];
        // file type is only image.
        if (/^image\//.test(file.type)) {
            this.saveToServer(file, "image");
        } else {
            console.warn("Only images can be uploaded here.");
        }
    };
}

function saveToServer(file) {
    // Upload file to server and get the uploaded file url in response then call insertToEditor(url) after getting the url from server
}

function insertToEditor(url) {
    // push image url to editor.
    const range = quill.getSelection();
    quill.insertEmbed(range.index, "image", url);
}

如何在Quill JS中添加计算机中的图像？

2 个答案: