如何将 css class 添加到羽毛笔选择中？

Question

如何在 quilljs 中使用 class css 添加自己的样式？

我有以下内容 css class

.ql-editor spanblock {
  background-color: #F8F8F8;
    border: 1px solid #CCC;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 15px 0;
}

以及针对此 CSS 转换的事件

var toolbarOptions = [
    [{ "header": [false, 1, 2, 3, 4, 5, 6] }, "bold", "italic"],
    [{ "list": "ordered"}, { "list": "bullet" }, { "indent": "-1"}, { "indent": "+1" }],
    ["blockquote","code-block", "span-block","link", "hr"]
];
var quill = new Quill("#form_field_" + options.id + " .editor-container > .editor", {
    modules: {
        toolbar:  toolbarOptions
    },
    theme: "snow"
});

var toolbar = quill.getModule("toolbar");
toolbar.addHandler("span-block", function(){});
var spanBlockButton = document.querySelector(".ql-span-block");

spanBlockButton.addEventListener("click", () => {
    let range = quill.getSelection(true);
    // what should I add here
}

我在 quilljs 的文档中找不到任何内容 https://quilljs.com

谢谢

Answer 1

基本上你必须扩展 Parchment blots 才能在 quill 中拥有自定义样式的元素。我完成了本教程 here and here。

下面是简单的html

<link href="http://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<style>
.ql-spanblock:after {
  content: "<spanblock/>";
}

.spanblock {
    background-color: #F8F8F8;
    border: 1px solid #CCC;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 15px 0;
}
</style>


<div id="editor">
</div>

这是实际的答案，我已经按照以下方式扩展了 blots/inline 以将选定的文本包装成具有所需 class 的 div。

<script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script type="text/javascript">

let Inline = Quill.import('blots/inline');

class SpanBlock extends Inline{    

    static create(value){
        let node = super.create();
        node.setAttribute('class','spanblock');
        return node;    
    } 
}

SpanBlock.blotName = 'spanblock';
SpanBlock.tagName = 'div';
Quill.register(SpanBlock);


var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script':'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                         // remove formatting button
    ['link', 'image', 'video'],
    ['spanblock']
];


var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

var spanBlockButton = document.querySelector('.ql-spanblock');

//event listener to spanblock button on toolbar
spanBlockButton.addEventListener('click', function() {

        var range = quill.getSelection();
        if(range){

            quill.formatText(range,'spanblock',true);
        }else{

        }

    }
);

</script>

Codepen-demo.

Answer 2

@moghya 的回答对我来说有一个问题：我无法重绘生成的 html 的内容，该元素将丢失添加的 class 名称。

我通过添加 formats() 方法并设置 className 来修复它。请参阅下面的演示。

  let Block = Quill.import('blots/block');
  var icons = Quill.import('ui/icons');

   // Lottery tooltip
  class LotteryTitle extends Block {
    static create() {
      let node = super.create();
      node.setAttribute('class', this.className);
      return node;
    }

    static formats(domNode) {
      return true;
    }
  }
  LotteryTitle.blotName = 'lottery-title';
  LotteryTitle.className = "sc-lottery-title"
  Quill.register(LotteryTitle);
  icons['lottery-title'] = icons.header["2"];

Answer 3

Quite late to the scene, but it seems there's a better way to do this (than the previous answers) through Parchment's Attributor Class, hence this post.

Parchment Class Attributors and the Quill toolbar handlers are in-built ways to let you do exactly that, without having to create a new Blot.

只需为 span-block 注册一个新的 Class 属性：

Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.BLOCK };
let SpanBlockClass = new Parchment.Attributor.Class('span-block', 'span', config);
Quill.register(SpanBlockClass, true);

并为工具栏按钮（而不是单独的事件侦听器）附上 handler to format (or removeFormat（如果已格式化）：

// ...
  toolbar: {
    container: toolbarOptions,
    handlers: {
      'span-block': function() {
        var range = quill.getSelection();
        var format = quill.getFormat(range);

        if (!format['span-block']) {
          quill.format('span-block', 'block');
        } else {
          quill.removeFormat(range.index, range.index + range.length);
        }
      }
    }
  }
// ...

这是一个演示（或者，如果您愿意，可以在 Codepen 上查看）

Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.BLOCK };
let SpanBlockClass = new Parchment.Attributor.Class('span-block', 'span', config);
Quill.register(SpanBlockClass, true)

var toolbarOptions = [
  [{ "header": [false, 1, 2, 3, 4, 5, 6]}, "bold", "italic"],
  [{"list": "ordered"}, {"list": "bullet"}, {"indent": "-1"}, {"indent": "+1"}],
  ["blockquote", "code-block", "span-block", "link"]
];

var icons = Quill.import('ui/icons');
icons['span-block'] = 'sb';

var quill = new Quill("#editor-container", {
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: {
        'span-block': function() {
          var range = quill.getSelection();
          var format = quill.getFormat(range);

          if (!format['span-block']) {
            quill.format('span-block', 'block');
          } else {
            quill.removeFormat(range.index, range.index + range.length);
          }
        }
      }
    }
  },
  theme: "snow"
});

#editor-container {
  height: 375px;
}

.ql-editor .span-block {
  background-color: #F8F8F8;
  border: 1px solid #CCC;
  line-height: 19px;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 15px 0;
}

<link href="//cdn.quilljs.com/1.2.4/quill.snow.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.2.4/quill.js"></script>
<div id="editor-container"></div>

如何将 css class 添加到羽毛笔选择中？

how to add css class to a quill selection?

javascript

css

quill