Javascript Quilljs通过按钮在光标位置插入图像点击进入顶部

我尝试在光标位置插入图像

复制步骤

单击光标中的任意一行

单击“插入”

预期行为：

在当前光标位置插入图像

实际行为：

插入就在上面

平台：

我的大脑我想它只是弄错了

这是我尝试插入的方式：

var currentPosition = 0

quill.on('editor-change', () => {
  if (quill.getSelection()) {
    currentPosition = quill.getSelection().index
    $('.position').text(currentPosition)
  }
})

$('.insertImage').on('click', (e) => {
  e.preventDefault
  quill.setSelection(currentPosition, 0)
  quill.updateContents({
    ops: [{
      insert: {
        image: 'http://loremflickr.com/320/240'
      },
      attributes: {
        link: 'http://www.google',
        alt: 'yoyoyoy'

      },

    }]
  })

})

完整示例：

var quill=新的quill（“#编辑器容器”{
模块：{
工具栏：[
[{
标题：[1,2，false]
}],
[“粗体”、“斜体”、“下划线”]，
[“图像”，“代码块”]
]
},
占位符：“创作史诗…”，
主题：“雪”//或“泡泡”
});
/**
我的代码从这里开始**/
var currentPosition=0
quill.on（'editor-change'，（）=>{
if（quill.getSelection（））{
currentPosition=quill.getSelection（）.index
$（'.position'）.text（当前位置）
}
})
$（'.insertImage'）。在（'单击'，（e）=>{
e、 防止违约
纬管设置选择（当前位置，0）
羽毛笔({
行动：[{
插入：{
图像：'http://loremflickr.com/320/240'
},
属性：{
链接：'http://www.google',
alt:“Yoyoy”
},
}]
})
})

#编辑器容器{
身高：375px；
}

插入图像
目前职位：0

聊天机器人令人难以置信的潜力在于能够独立地、在上下文中进行一对多的通信。

让我们把它分解一下。

一对多通信：在历史的这一点上，有很多工具允许我们进行一对多通信。这些工具，包括从基本邮件到电子邮件营销再到社交媒体的所有工具，使得同时接触大量受众和受众中的目标群体变得容易。但是，在大多数情况下，这些工具不允许我们在个人层面上与人沟通。

个人沟通：在个人层面上接触大量的人是很久没有出现过的事情。现在最流行的方法是
但是，如果你想把事情做好，最终以一种有意义的方式接触个人需要大量的工作和分析知识。

上下文交流：我们每天与人交谈时都这样做。对大多数人来说，这是无意识的行为。

当有人问你“我应该带件夹克吗？”你不会问他们打算哪天带件夹克，你只知道他们在问是否应该现在带件夹克。你无意识地（或者可能有意识地，通过检查你的天气应用程序）识别天气，并根据你正在进行的对话和你当前的环境给出你最好的回应。

我相信上下文通信（一种动态智能）将使聊天机器人成为每个人都看好的革命性技术。
目前，与机器人进行上下文通信并不是一个合理的要求，但是有一个
，我相信这种互动将成为未来的标准。

虽然聊天机器人在创新潜力方面仍处于初级阶段，但他们仍在努力了解使用这项新技术的最佳方式以及如何构建尽可能最好的机器人。





















聊天机器人破坏用户体验的原因
除了我们刚才讨论的原因外，还有一个事实，即人类天生就有进行对话的天赋。它是我们日常生活的一部分，我们每天都依靠我们的设备来帮助我们沟通。

很自然，我们开始看到企业在用户活跃的地方发展 — 消息平台 — 而不是试图创建和引导用户进入他们创建的新生态系统。它不仅更简单、更具成本效益，而且是一种更自然的沟通方式。

















普通人每天只使用4-6个应用程序
尽管智能手机用户平均有27款应用，但他们通常每天只使用其中的4-6款。30天后，只有3%的应用程序保留了新用户。

“超过25亿人至少安装了一个短信应用程序。在几年内，这一数字将达到36亿，约占人类的一半。” — 经济学人
下载一个新的应用程序并测试它，看看它是否能成为下一个加入我们前6名的应用程序所需的努力已经不再值得下载了。你的用户宁愿你将你的服务集成到他们已经使用的应用程序中，也不愿下载另一个应用程序。

















这意味着什么
不要浪费金钱试图把人们拉进你的生态系统。将内容推送到用户已处于活动状态的位置。

试试这个：

$('.insertImage').on('click', (e) => {
  var Delta =  Quill.import('delta');
  quill.updateContents(
    new Delta()
      .retain(quill.getSelection().index)
      .insert({ 
        image: 'http://loremflickr.com/320/240'
      },
      {
        link: 'http://www.google',
        alt: 'yoyoyoy'
      }));
});

---

嘿，谢谢，这很有效！但是我不知道如何传递alt和link，我检查了文档，没有关于alt和link的内容link@cannap，请参阅我的更新答案，还有另一种方法可以添加具有附加属性的图像。关于如何将数据属性或css类传递给img，您有什么想法吗D这实际上是一个非常可爱的图像：）