Question

我想添加一个按钮，为quill.js (beta)编辑器添加<hr>标记。

这里是fiddle。

<!-- Initialize Quill editor -->
    <div id="toolbar-container">
        <span class="ql-formats">
          <button class="ql-hr"></button>  //here my hr-button
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
        </span>
    </div>

    <div id="editor">

      <p>Hello World!</p>
      <hr> // this gets replaced by <p> tag automatically *strange*
      <p>Some initial <strong>bold</strong> text</p>
    </div>

我初始化我的编辑器：

 var quill = new Quill('#editor', {
        modules: {
          toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      });

在这里，我向编辑器添加了<h1>标记功能，效果非常好：

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      var text = quill.getText(range.index, range.length);
      quill.deleteText(range.index, range.length);
      quill.pasteHTML(range.index, '<h1>'+text+'</h1>');
  })

现在我对<hr>标记尝试相同的操作，但根本不起作用：

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      quill.pasteHTML(range.index, '<hr>');
  })

初始<hr>中的div#editor标记被<p>标记取代。我添加的按钮功能doensn适用于<hr>标签，但对于其他标签，它可以正常工作。我知道<hr>标签没有实现到Quill.js，这也是我得到这个控制台输出的原因：

quill：工具栏忽略附加到不存在的格式hr select.ql-hr

有什么方法可以解决这个问题吗？

Answer 1

我仍然不知道为什么这个问题有问题，但是这里有解决方案：

导入嵌入blot - 重要：不是＆＃34;阻止＆＃34;而不是＆＃34;嵌入＆＃34;，＆＃34;阻止/嵌入＆＃34;！

 var Embed = Quill.import('blots/block/embed');

定义一个扩展Embed

的新类

        class Hr extends Embed {
            static create(value) {
                let node = super.create(value);
                // give it some margin
                node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");
                return node;
            }
        }

定义您的代码

        Hr.blotName = 'hr'; //now you can use .ql-hr classname in your toolbar
        Hr.className = 'my-hr';
        Hr.tagName = 'hr';

为＆lt; hr＆gt;编写自定义处理程序按钮

        var customHrHandler = function(){
            // get the position of the cursor
            var range = quill.getSelection();
            if (range) {
                // insert the <hr> where the cursor is
                quill.insertEmbed(range.index,"hr","null")
            }
        }

注册新格式

        Quill.register({
            'formats/hr': Hr
        });

使用HTML中的正确选择器实例化编辑器

       var quill = new Quill('#editor', {
          modules: {
            toolbar: { container: '#toolbar-container',
                handlers: {
                    'hr': customHrHandler
                }
            }
          },
          theme: 'snow'
        });

HTML部分保持不变。整个＆lt; hr＆gt;功能可以与<img> format类似。

谢谢你，有用的社区。

Answer 2

没有足够的代表评论，因此发布作为答案，以解决未成年人问题。

由@Suisse's great answer中显示的嵌入引起的默认提示框似乎必须在toolbar handler（带有第二个参数）中进行处理，如下所示：

var toolbarOptions = {
  handlers: {
    // ...
    'hr': function(value) {
       this.quill.format('hr', true);
    }
  }
}

源讨论-
Documentation: How to avoid default 'prompt' when invoking custom Embed blots via toolbar module

工具栏处理程序文档中的提示示例：https://quilljs.com/docs/modules/toolbar/#handlers

如何向Quill.js添加新格式（<hr />标签）？

2 个答案: