Quill.js 和视频处理程序的自定义提示

Question

我正在尝试为 Quill.js 创建自定义提示，但它不起作用。

我需要从提示中获取一个值并将其传递给 Quill 处理程序。

function promptInput(callback, event) {

    let prompt = document.getElementById('prompt');
    
    if(prompt) {

        let input = document.getElementById('input');
        prompt.style.display = 'block';

        document.getElementById("ok").onclick = function() {
            prompt.style.display = 'none';
            callback(input.value);
        };

    }

}

function videoHandler() { 

    promptInput(function(value) {
                console.log(value);
    });
    
    let range = this.quill.getSelection();

    this.quill.insertEmbed(range.index, 'video', value);
    this.quill.setSelection(range.index + 1);
    
}

var quill = new Quill('#editor', {
        modules: {
            toolbar: {
            container: "#toolbar",
                handlers: {
                    video: videoHandler
                }
            }
        },
        placeholder: 'Content',
        theme: 'snow'
});

我试过这种方法（没用）：

function videoHandler() { 

    promptInput(function(value) {
        let range = this.quill.getSelection();

        this.quill.insertEmbed(range.index, 'video', value);
        this.quill.setSelection(range.index + 1);
    });

}

Answer 1

我稍微重构了你的代码：

var prompt = document.getElementById('prompt');
var input = document.getElementById('input');
var okButton = document.getElementById("ok");

okButton.onclick = () => {
  prompt.style.display = 'none';
  embedVideo();
};

const embedVideo = () => {
  let range = this.quill.getSelection();
  this.quill.insertEmbed(range.index, 'video', input.value);
  this.quill.setSelection(range.index + 1);
}

function videoHandler() {
  if (prompt) prompt.style.display = 'block';
}

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: "#toolbar",
      handlers: {
        video: videoHandler
      }
    }
  },
  placeholder: 'Content',
  theme: 'snow'
});

这是工作示例：https://jsfiddle.net/zj70u2kr/15/

Quill.js 和视频处理程序的自定义提示

Quill.js and custom prompt for video handler

javascript

quill