Quill.js and custom prompt for video handler

user_16085626 0
Viewed 947

I'm trying to make a custom prompt for Quill.js, but it does not work.

I need to get a value from a prompt and pass it to Quill handler.

Here is an example for test: https://jsfiddle.net/yk03dt7j/

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

I've tried this way (does not work):

function videoHandler() { 

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

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

}
quill javascript
1 Answers

I refactored your code a little:

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

Here is the working example: https://jsfiddle.net/zj70u2kr/15/

user_143898300
Related