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.