Quill - 添加图片 URL 而不是上传图片
Quill - Add Image URL instead of uploading it
我不是 JS 专家,我使用的是 Quill Rich Text Editor for one of our projects. It's working well, but when I use getContents()
method to get its contents (with Delta 格式),它显示图像,如下所示:
{
"insert": {
"image": "data:image/png;base64,iVBORw0KGgoAA...=="
}
}, ...
我想在添加图片时给编辑一个URL,而不是上传一张。我的意思是,我希望它在我添加图像时显示 URL 输入框,而不是打开文件对话框来选择图像。就像我添加视频时所做的那样:
我该如何实现? 我应该编辑 quill.js
代码吗?
是的。我也不明白这怎么可能再简单不过了。不幸的是,Quill 仍处于 1.x 版本。遇到这样的情况是正常的。不过别担心。关于你的问题,我觉得可以帮到你:
https://github.com/loagit/Quill-Examples-and-FAQ#quill-project-004---customizable-tooltip
为了更深入地了解这个主题,我建议您查看整个存储库。我希望它能帮助你。那里有很多信息。
虽然我来晚了,但我还是post回答了,因为它可能对访问这里的人有所帮助。
您可以为 image
选项定义自定义处理程序。像这样就可以了。
//add the toolbar options
var myToolbar= [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['image'] //add image here
];
var quill = new Quill('#quill-container', {
theme: 'snow',
modules: {
toolbar: {
container: myToolbar,
handlers: {
image: imageHandler
}
}
},
});
function imageHandler() {
var range = this.quill.getSelection();
var value = prompt('please copy paste the image url here.');
if(value){
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
}
}
对于希望从羽毛笔工具提示而不是提示中获取 url 的任何人。
自定义 URL React 图像处理程序基于 biz-quill
的评论
function imageHandler() {
const tooltip = this.quill.theme.tooltip;
const originalSave = tooltip.save;
const originalHide = tooltip.hide;
tooltip.save = function () {
const range = this.quill.getSelection(true);
const value = this.textbox.value;
if (value) {
this.quill.insertEmbed(range.index, 'image', value, 'user');
}
};
// Called on hide and save.
tooltip.hide = function () {
tooltip.save = originalSave;
tooltip.hide = originalHide;
tooltip.hide();
};
tooltip.edit('image');
tooltip.textbox.placeholder = 'Embed URL';
}
然后在您的 Quill 模块中添加如下内容:
export const modules = {
toolbar: {
container: '#toolbar',
handlers: {
undo: undoChange,
redo: redoChange,
imageHandler: imageHandler, //Add it here
},
},
history: {
delay: 500,
maxStack: 100,
userOnly: true,
},
};
您可以像这样从 svg 创建自定义按钮图标:
const CustomImageFromLink = () => (
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"></path>
</svg>
);
然后只需将它添加到您的工具栏,例如:
<button className="ql-imageHandler"> //class is ql-yourHandlerName
<CustomImageFromLink /> //Your Icon Component
</button>
我不是 JS 专家,我使用的是 Quill Rich Text Editor for one of our projects. It's working well, but when I use getContents()
method to get its contents (with Delta 格式),它显示图像,如下所示:
{
"insert": {
"image": "data:image/png;base64,iVBORw0KGgoAA...=="
}
}, ...
我想在添加图片时给编辑一个URL,而不是上传一张。我的意思是,我希望它在我添加图像时显示 URL 输入框,而不是打开文件对话框来选择图像。就像我添加视频时所做的那样:
我该如何实现? 我应该编辑 quill.js
代码吗?
是的。我也不明白这怎么可能再简单不过了。不幸的是,Quill 仍处于 1.x 版本。遇到这样的情况是正常的。不过别担心。关于你的问题,我觉得可以帮到你:
https://github.com/loagit/Quill-Examples-and-FAQ#quill-project-004---customizable-tooltip
为了更深入地了解这个主题,我建议您查看整个存储库。我希望它能帮助你。那里有很多信息。
虽然我来晚了,但我还是post回答了,因为它可能对访问这里的人有所帮助。
您可以为 image
选项定义自定义处理程序。像这样就可以了。
//add the toolbar options
var myToolbar= [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['image'] //add image here
];
var quill = new Quill('#quill-container', {
theme: 'snow',
modules: {
toolbar: {
container: myToolbar,
handlers: {
image: imageHandler
}
}
},
});
function imageHandler() {
var range = this.quill.getSelection();
var value = prompt('please copy paste the image url here.');
if(value){
this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
}
}
对于希望从羽毛笔工具提示而不是提示中获取 url 的任何人。
自定义 URL React 图像处理程序基于 biz-quill
的评论function imageHandler() {
const tooltip = this.quill.theme.tooltip;
const originalSave = tooltip.save;
const originalHide = tooltip.hide;
tooltip.save = function () {
const range = this.quill.getSelection(true);
const value = this.textbox.value;
if (value) {
this.quill.insertEmbed(range.index, 'image', value, 'user');
}
};
// Called on hide and save.
tooltip.hide = function () {
tooltip.save = originalSave;
tooltip.hide = originalHide;
tooltip.hide();
};
tooltip.edit('image');
tooltip.textbox.placeholder = 'Embed URL';
}
然后在您的 Quill 模块中添加如下内容:
export const modules = {
toolbar: {
container: '#toolbar',
handlers: {
undo: undoChange,
redo: redoChange,
imageHandler: imageHandler, //Add it here
},
},
history: {
delay: 500,
maxStack: 100,
userOnly: true,
},
};
您可以像这样从 svg 创建自定义按钮图标:
const CustomImageFromLink = () => (
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"></path>
</svg>
);
然后只需将它添加到您的工具栏,例如:
<button className="ql-imageHandler"> //class is ql-yourHandlerName
<CustomImageFromLink /> //Your Icon Component
</button>