51

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

这里的小提琴。

<!-- 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>。我添加的按钮功能不适用于<hr>标签，但适用于其他标签。我知道该<hr>标记未在 Quill.js 中实现，这也是我得到此控制台输出的原因：

quill:toolbar 忽略附加到不存在的格式 hr select.ql-hr

有没有什么办法解决这一问题？

4

2 回答 2

58

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

导入嵌入印迹- 重要：不是“块”，不是“嵌入”，“块/嵌入”！

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';

为 <hr> 按钮编写自定义处理程序

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 部分保持不变。整个 <hr> 功能可以类似于<img> 格式来完成。

谢谢你，你乐于助人的社区。

于 2016-06-14T14:23:09.903 回答
4

没有足够的代表发表评论，因此发布作为答案，以解决一个小问题。

@Suisse 的出色答案中显示的嵌入导致的默认提示框似乎必须在工具栏处理程序（带有第二个参数）中处理，如下所示：

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

源讨论-
文档：如何在通过工具栏模块调用自定义嵌入印迹时避免默认的“提示”

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

于 2019-05-12T21:05:36.113 回答