javascript - 如何添加新格式（ <hr> 标签）添加到Quill.js？(How can I add a new format (<hr> tag) to Quill.js?)

Question

I want to add a button which would add a <hr> tag to the quill.js (beta) editor.

(我想添加一个按钮，该按钮会将<hr>标记添加到quill.js（测试版）编辑器。)

Here the 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>

I initialize my editor:

(我初始化编辑器：)

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

Here I add a <h1> tag functionality to my editor and it works very well:

(在这里，我向编辑器添加了<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>');
  })

Now I try the same for a <hr> tag, which doesn't work at all:

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

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

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

the <hr> tag in the initial div#editor gets replaced with a <p> tag.

(初始div#editor的<hr>标签将替换为<p>标签。)

And the button functionality I added doensn't work for <hr> tags, but for other tags it works.

(我添加的按钮功能不适用于<hr>标签，但适用于其他标签。)

I know the <hr> tag is not implemented to Quill.js, that's also why I get this console output:

(我知道<hr>标记未实现到Quill.js，这也是为什么我得到此控制台输出的原因：)

quill:toolbar ignoring attaching to nonexistent format hr select.ql-hr

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

Is there any way to fix this?

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

  ask by Suisse translate from so

Answer 1

I have still no idea why the question has downvotes, but however here is the solution:

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

Import the embed blot - important: not "block", not "embed", "block/embed"!

(导入嵌入污点 -重要：不要“阻止??”，不要“嵌入”，“阻止/嵌入”！)

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

Define a new class that extends that 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;
    }
}

Define your tag

(定义标签)

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

Write a custom handler for the <hr> button

(为<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")
    }
}

Register your new format

(注册您的新格式)

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

Instantiate your Editor with the right selectors in your HTML

(在HTML中使用正确的选择器实例化您的编辑器)

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

The HTML part remains the same.

(HTML部分保持不变。)

The whole <hr> functionality can be done similar to the <img> format .

(整个<hr>功能可以类似于<img>格式来完成。)

Thank you, you helpful community.

(谢谢您，对我们有帮助的社区。)