如何向 Quill.js 添加新格式(<hr> 标签)? [英] How can I add a new format (<hr> tag) to Quill.js?

问题描述

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

这里是小提琴.

<div id="工具栏-容器"><span class="ql-formats"><button class="ql-hr"></button>//这里是我的人力资源按钮</span><span class="ql-formats"><button class="ql-bold"></button><button class="ql-italic"></button></span>

<div id="编辑器"><p>你好世界！</p><小时>//这被替换为 <p>自动标记*奇怪*<p>一些初始的<strong>粗体</strong>文本

我初始化我的编辑器:

 var quill = new Quill('#editor', {模块:{工具栏:'#toolbar-container'},placeholder: '撰写史诗...',主题:雪"});

在这里，我向我的编辑器添加了

标签功能，并且效果很好:

 $('.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>');})

初始 div#editor 中的

---

标签被替换为

标签.我添加的按钮功能对 <hr> 标签不起作用，但对于其他标签它起作用.我知道 <hr> 标签没有在 Quill.js 中实现，这也是我得到这个控制台输出的原因:

<块引用>

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

有什么办法可以解决这个问题吗?

解决方案

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

导入嵌入 blot - 重要:不是阻止"，不是嵌入"、阻止/嵌入"！

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

定义一个扩展 Embed 的新类

class Hr extends Embed {静态创建(值){让节点 = super.create(value);//给它一些余量node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");返回节点；}}

定义你的标签

Hr.blotName = 'hr';//现在您可以在工具栏中使用 .ql-hr 类名hr.className = 'my-hr';hr.tagName = 'hr';

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

var customHrHandler = function(){//获取光标位置var range = quill.getSelection();如果(范围){//插入<hr>光标在哪里quill.insertEmbed(range.index,"hr","null")}}

注册您的新格式

Quill.register({'格式/小时':小时});

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

var quill = new Quill('#editor', {模块:{工具栏:{容器:'#toolbar-container'，处理程序:{'hr':customHrHandler}}},主题:雪"});

HTML 部分保持不变.整个<hr>功能可以类似于 <img>格式.

谢谢你们，你们乐于助人的社区.

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

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:

  $('.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:

  $('.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. And the button functionality I added doensn't work for <hr> tags, but for other tags it works. I know the <hr> tag is not implemented to Quill.js, that's also why I get this console output:

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

Is there any way to fix this?

解决方案

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

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

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

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

The HTML part remains the same. The whole <hr> functionality can be done similar to the <img> format.

Thank you, you helpful community.

这篇关于如何向 Quill.js 添加新格式(&lt;hr&gt; 标签)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！