Quilljs 通过按钮在光标位置插入图像单击转到顶部

Question

我尝试在光标位置插入图片。

复制步骤

单击光标中的任意一行
点击插入

预期行为：

正在当前光标位置插入图片

实际行为:

仅在顶部插入

平台：

我的大脑我认为它只是弄错了

这是我尝试插入的方式：

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 = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

/**
My Code Starts here **/
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'

      },

    }]
  })

})

#editor-container {
  height: 375px;
}

<link href="//cdn.quilljs.com/1.1.3/quill.snow.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.1.3/quill.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type=button class=insertImage>Inser Image</button>
<div class=current>Current Position: <span class=position>0</span>
</div>
<hr>

<div id="editor-container">
  <p><span style="color: rgba(0, 0, 0, 0.8);">The incredible potential of chatbots lies in the ability to&nbsp;</span><strong style="color: rgba(0, 0, 0, 0.8);"><em>individually and contextually communicate one-to-many</em></strong><span style="color: rgba(0, 0, 0, 0.8);">.</span>
  </p>
  <p><span style="color: rgba(0, 0, 0, 0.8);">Let’s break that down.</span>
  </p>
  <p><strong style="color: rgba(0, 0, 0, 0.8);">One-to-Many Communication:&nbsp;</strong><span style="color: rgba(0, 0, 0, 0.8);">There are plenty of tools out there that allow us to communicate one-to-many at this point in history. These tools, including everything from basic mailers to email marketing to social media, make it easy to reach a large audience and target groups within that audience all at the same. But, for the most part, these tools do not allow us to communicate with people on an individual level.</span>
  </p>
  <p><strong style="color: rgba(0, 0, 0, 0.8);">Individual Communication:</strong><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;Reaching mass amounts of people at the individual level is something that hasn’t been around for very long. The most popular way to do so right now is&nbsp;</span>
    <a href="http://digiday.com/platforms/what-is-programmatic-advertising/" target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>programmatic advertising</strong>
      </a><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;but, ultimately, reaching the individual in a meaningful way takes a lot of work and analytic knowhow if you want to do it right.</span>
  </p>
  <p><strong style="color: rgba(0, 0, 0, 0.8);">Contextual Communication:</strong><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;We do this every day when we talk to someone. It’s unconscious behavior for most people.</span>
  </p>
  <p><span style="color: rgba(0, 0, 0, 0.8);">When someone asks you “Should I bring a jacket?” you don’t ask them what day they were thinking about bringing a jacket, you just know that they’re asking if they should bring a jacket right now. You unconsciously (or maybe consciously, by checking your weather app) recognize the weather and give your best response based on the conversation you’re having and your current environment.</span>
  </p>
  <blockquote><span style="color: rgba(0, 0, 0, 0.8);">I believe contextual communication (a form of dynamic intelligence) is what will make chatbots the revolutionary technology everyone is promising.</span>
  </blockquote>
  <p><span style="color: rgba(0, 0, 0, 0.8);">Right now contextually communicating with bots isn’t something that’s reasonable to ask across the board but there are a&nbsp;</span><a href="https://www.hipmunk.com/hello" target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>few</strong></a>
    <span style="color: rgba(0, 0, 0, 0.8);">&nbsp;</span><a href="https://pana.com/" target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>that</strong></a><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;</span><a href="https://www.google.com/search/about/"
    target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>are</strong></a>
    <span style="color: rgba(0, 0, 0, 0.8);">&nbsp;</span><a href="http://www.mitsuku.com/" target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>doing</strong></a><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;</span><a href="https://www.getvi.com/?src=kickstarter2&amp;coupon=kickstarterspecial"
    target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>it</strong></a><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;</span><a href="https://www.30secondstofly.com/product/" target="_blank" style="color: rgba(0, 0, 0, 0.8);"><strong>well</strong></a>
    <span style="color: rgba(0, 0, 0, 0.8);">, and I believe this type of interaction will be the standard in the future.</span>
  </p>
  <p><span style="color: rgba(0, 0, 0, 0.8);">While chatbots are still in their infancy in terms of creative potential,&nbsp;</span><a href="https://www.fastcodesign.com/3064055/mind-and-machine/why-chat-may-be-king-of-the-new-mobile-landscape" target="_blank"
    style="color: rgba(0, 0, 0, 0.8);"><strong>it’s still a very exciting time for creatives</strong></a><span style="color: rgba(0, 0, 0, 0.8);">&nbsp;trying to understand the best way to use this new technology and how to build the best bot possible.</span>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <h3><strong style="color: rgb(51, 51, 51);">Why Chatbots are Disrupting UX</strong></h3>
  <p><span style="color: rgba(0, 0, 0, 0.8);">Aside from the reasoning we just walked through, there’s also the fact that humans are innately wired to have conversations. It’s part of our daily lives, and we rely on our devices to help us communicate every day.</span>
  </p>
  <p><span style="color: rgba(0, 0, 0, 0.8);">It’s only natural that we begin to see businesses build where their users are active — messaging platforms — instead of trying to create and onboard users to new ecosystems they’ve created. Not only is it easier and more cost effective, it’s also a more natural form of communication.</span>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <h4><strong style="color: rgb(51, 51, 51);">The average person only uses 4–6 apps every&nbsp;day</strong></h4>
  <p><span style="color: rgba(0, 0, 0, 0.8);">Although the average smartphone owner has 27 apps on their phone, they typically only use 4–6 of those apps every day. And at the end of 30 days, only 3% of all apps retain their new users.</span>
  </p>
  <blockquote><span style="color: rgba(0, 0, 0, 0.8);">“Over 2.5 billion people have at least one messaging app installed. Within a couple of years that will reach 3.6 billion, about half of humanity.” — The Economist</span>
  </blockquote>
  <p><span style="color: rgba(0, 0, 0, 0.8);">The effort required to download a new app and test it out to see if it could be the next to join our top 6 just isn’t worth the download anymore. Your users would rather have you integrate your services into an app they already use than download another app.</span>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <h4><strong style="color: rgb(51, 51, 51);">What this&nbsp;means</strong></h4>
  <p><span style="color: rgba(0, 0, 0, 0.8); background-color: transparent;">Stop wasting money trying to pull people into your ecosystem. Push your content where your users are already active.</span>
  </p>
  <p>
    <br>
  </p>
</div>

Answer 1

试试这个：

$('.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'
      }));
});

Quilljs 通过按钮在光标位置插入图像单击转到顶部

Quilljs Insert Image on cursor position via Button click goes to top

javascript

quill