how to add css class to a quill selection?

Question

How can I add my own style with a class css in quilljs?

I have this following css class

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

and an event targeting this CSS transformation

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
}   

I cannot find anything in the documentation of quilljs https://quilljs.com

thank you

Answer 1

Basically you have to extend Parchment blots to have custom styled element in quill. I went through this tutorial here and here.

Following is the simple 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>

Here is the actual answer,I have extended blots/inline in following way to wrap selected text into a div with desired class.

<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

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.

Just register a new Class Attributor for span-block:

Parchment = Quill.import('parchment');

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

and attach a handler to format (or removeFormat if already formatted) for the toolbar button (rather than a separate event listener):

// ...
  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);
        }
      }
    }
  }
// ...

Here's a demo (Or if you prefer, see it on 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>

Answer 3

@moghya's answer has a problem for me: I can't redraw the content from generated html, the element will loose the added class name.

I fixed it by add a formats() method and set the className. See my demo below.

  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"];