javascript - Quill.js 和视频处理程序的自定义提示
问题描述
我正在尝试为 Quill.js 制作自定义提示,但它不起作用。
我需要从提示中获取一个值并将其传递给 Quill 处理程序。
这是一个测试示例: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'
});
我试过这种方式(不起作用):
function videoHandler() {
promptInput(function(value) {
let range = this.quill.getSelection();
this.quill.insertEmbed(range.index, 'video', value);
this.quill.setSelection(range.index + 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'
});
推荐阅读
- javascript - Fetch POST 请求随机运行而不触发函数
- html - 将域名连接到 ip:port
- docker - Docker Swarm 和 NFS 卷(启动容器失败:挂载时出错;卷无法挂载本地卷)
- arrays - 求二维数组的一行和一列的众数
- spring - JPA Hibernate 主外键同时用复合PK
- r - 基于特定行的列和基于特定列的总和行作为新变量
- artificial-intelligence - 修复python数独使用遗传算法的bug?
- javascript - 按钮未在 svg 对象之前显示
- c++ - C++ 中让函数返回错误或值的最佳方法是什么?
- android - 用于 Android 开发的 Kotlin:文本字段到 TextView?