Quill — добавьте URL-адрес изображения вместо его загрузки

Ага. Я тоже не понимаю, как это не может быть проще. К сожалению, Quill все еще находится в версии 1.x. Может быть нормальным столкнуться с такими ситуациями. Но не беспокойтесь. Что касается вашего вопроса, я думаю, что это может вам помочь:

https://github.com/loagit/Quill-Examples-and-FAQ#quill-project-004---customizable-tooltip

Чтобы глубже вникнуть в тему, я предлагаю вам посмотреть весь этот репозиторий. Я надеюсь, что это поможет вам. Там много информации.

Несмотря на то, что я опаздываю, я публикую ответ, так как это может помочь кому-то посетить здесь.

Вы можете определить собственный обработчик для параметра 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>