Javascript 如何在Quill JS中添加图像？

我不知道如何让图像像上面的示例中那样工作

---

我尝试将

添加到工具栏，工具栏会添加按钮，但单击按钮没有任何作用，并且在文档中找不到任何内容。有什么建议吗？

编辑：从1.0开始，这不再准确。克里斯·霍克斯的观点是正确的

不幸的是，这似乎没有记录在任何地方，但您需要包括图像工具提示模块。例如，quilljs.com主页上的编辑器使用以下内容：

quill = new Quill('#editor', {
  modules: {
    'toolbar': { container: '#toolbar' },
    'image-tooltip': true,
    'link-tooltip': true
  },
  theme: 'snow'
});

---

以上答案在js中是正确的，但您必须将html添加到编辑器中，例如：

<span class="ql-format-group">
  <span title="Link" class="ql-format-button ql-link"></span>
  <span class="ql-format-separator"></span>
  <span title="Image" class="ql-format-button ql-image"></span>
</span>

---

更新的答案

从版本1.0及更高版本开始，您不再需要添加工具提示模块，默认情况下，该模块包括在内。如何启用它的示例如下

    <script>
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [ 'link', 'image', 'video', 'formula' ],          // add's image support
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean']                                         // remove formatting button
            ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },

            theme: 'snow'
        });
    </script>

变量工具栏选项=[
['bold'、'italic'、'underline'、'strike']，//切换按钮
['blockquote'，'code block']，
[{'header'：1}，{'header'：2}]，//自定义按钮值
[{'list'：'ordered'}，{'list'：'bullet'}]，
[{'script'：'sub'}，{'script'：'super'}]，//上标/下标
[{'indent'：'-1'}，{'indent'：'+1'}]，//outdent/indent
[{'direction'：'rtl'}]，//文本方向
[{'size'：['small'，false'，large'，mage']}，//自定义下拉列表
[{'header'：[1,2,3,4,5,6,false]}，
['link'，'image'，'video'，'formula']，//添加的图像支持
[{'color'：[]}，{'background'：[]}]，//主题中带有默认值的下拉列表
[{'font'：[]}]，
[{'align'：[]}]，
['clean']//删除格式化按钮
];
var quill=新的quill（“#编辑器”{
模块：{
工具栏：工具栏选项
},
主题：“雪”
});

从Quill 1.3版开始，以上所有答案都不再有效。 不幸的是，官方文件也没有多大进展

你有两种解决问题的方法，都适用于官方主题“雪”和“泡泡”。 无论哪种方式，您都不必添加以下代码：

“图像工具提示”：true，
“链接工具提示”：true

方式1： 初始化纬管，如下所示：

var editor=new Quill（'#editorDiv'，
{
模块：{
工具栏：[
...
['image']，
...
],
//不再需要：“图像工具提示”：true，
//不再需要：“链接工具提示”：true
...
},
...
});

方式2： 初始化纬管，如下所示：

...

var editor=new Quill（'#editorDiv'，
{
模块：{
工具栏：“#editorToolbarDiv”，
//不再需要：“图像工具提示”：true，
//不再需要：“链接工具提示”：true，
...
},
...
});

---

从1.3版开始，Quill不支持调整图像大小。但是，可以使用自定义模块来实现这一点。

为什么没有一个关于如何创建工具栏的示例实际创建了上面示例中所示的工具栏？或者举例说明“标题”是什么，为什么这些例子都不包含？我对他们糟糕的例子和文档感到非常失望。真遗憾，这个工具正是我需要的——但是，哇。真正地我的意思是，没有人喜欢文档，但哦，天哪，这是一个小问题，那是什么，你不明白？我们可以上传大图片吗？并将其存储在服务器上，并保存映像的路径，而不是base64数据。这篇文章非常有用。我刚刚添加了这个数组并设置了如图所示的选项，它给了我一个完全设置好的坏蛋编辑器，让我现在觉得JIRA/Confluence正在使用Quill。你的“方式1”与@Chris Hawkes的答案（）有什么不同？看起来不是这样，Chris的答案适用于当前版本1.3.6Hello。我来这里只是想给任何看到这个问题的人补充一点信息。我相信以下链接对任何使用（或开始使用）羽毛笔的人都有很大帮助：

    <script>
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [ 'link', 'image', 'video', 'formula' ],          // add's image support
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean']                                         // remove formatting button
            ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },

            theme: 'snow'
        });
    </script>