Вставьте ссылку в определенный индекс в редакторе quill

Я пытаюсь вставить якорный текст в определенную позицию в редакторе перьев.

 var fullEditor = new Quill('#m_wiki_textarea', {
              modules: {
                'toolbar': { container: '#toolbar' },
                 'image-tooltip': true,
                'link-tooltip': true
              },
              theme: 'snow'
            });
            fullEditor.setHTML(m_wiki_current);
           //added by pavneet
            console.log("added by pavneet");

          $(document).keypress("q",function(e) {
          if(e.ctrlKey)
         {
           var range = fullEditor.getSelection();
           var index = range.start;
                console.log(range);
            console.log(index);
 fullEditor.clipboard.dangerouslyPasteHTML(index,'<a class="wiki_link_details" data-l_id="3698">Learn more from this resource</a>');
         }`

Но я получаю эту ошибку: Невозможно прочитать свойство 'dangerouslyPasteHTML' неопределенного. Но я уже определил редактор.

Есть ли способ вставить ссылку в редактор quill?


quill
person pavneet tiwana    schedule 09.10.2016    source источник
comment
Какую версию Quill вы используете? Ваш синтаксис инициализации выглядит как v0.20.   -  person jhchen    schedule 10.10.2016
comment
@jhchen - Есть ли способ добавить теги ‹h2› также, когда вы выделяете определенный текст жирным шрифтом в редакторе?   -  person pavneet tiwana    schedule 11.10.2016
comment
Вы должны взглянуть на документы 0.20, а затем quilljs.com/0.20   -  person jhchen    schedule 12.10.2016

Ответы (2)


arrow_upward
8
arrow_downward

Используйте updateContents.

Example: 

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

quill.insertText(0, "abc ");

var delta = {
  ops: [
    {retain: 4},
    {insert: "Learn more from this resource", attributes: {link: "http://wikipedia.org"}}
  ]
};
quill.updateContents(delta);
#editor-container {
  height: 375px;
}
<script src="//cdn.quilljs.com/1.0.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.0.6/quill.snow.css" rel="stylesheet"/>
<div id="editor-container"></div>

person Ben Browitt    schedule 10.10.2016
comment
Есть ли способ вставить div, привязку или парах (в основном любой элемент) с атрибутом класса и атрибутом данных? - person pavneet tiwana; 10.10.2016
comment
Вы не можете вставить произвольный HTML. Вы можете использовать clipboard.dangerousPasteHTML(html). Quill переведет ваш HTML в ops и оставит поддерживаемые форматы. Вы можете следовать этому руководству, чтобы добавить дополнительные форматы quilljs.com/ руководства/как настроить перо/ - person Ben Browitt; 10.10.2016
comment
Эти рекомендации трудно понять. не могли бы вы поделиться рабочим примером, в котором добавляется атрибут класса или атрибут данных. Если я использую функцию sethtml(), она работает, но мне нужно добавить элемент в определенную позицию - person pavneet tiwana; 10.10.2016
comment
Введите текст. Выберите его и нажмите кнопку C (пользовательская). Промежуток будет иметь класс ql-custom-test. Пример: codepen.io/anon/pen/PGRQrx. - person Ben Browitt; 10.10.2016
comment
Это пример форматирования текста с помощью ql-custom-test из API: codepen.io/anon/ ручка/ORvvXG - person Ben Browitt; 10.10.2016
comment
спасибо за ['image', 'code-block'] я использовал его для изображений и видео - person Mohamed hesham; 30.10.2018

arrow_upward
1
arrow_downward

Да, вы должны вставить текст, а затем выделить его и сделать из него ссылку (демонстрация) :

function addLink(quill, index, text, url) {
  quill.insertText(index, text, 'user');
  quill.setSelection(index, text.length);
  quill.theme.tooltip.edit('link', url);
  quill.theme.tooltip.save();
}
person splintor    schedule 20.05.2021