jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="content-container">
  <div id="toolbar-container">

    <select class="ql-header">
      <option value="1">Heading 1</option>
      <option value="2">Heading 2</option>
      <option value="3">Heading 3</option>
      <option value="">Normal</option>
    </select>
    <span class="ql-formats">
      <button class="ql-list" value="ordered" />
      <button class="ql-list" value="bullet" />
      <button class="ql-indent" value="-1" />
      <button class="ql-indent" value="+1" />
    </span>
    <button class="ql-bold" data-toggle="tooltip" data-placement="bottom" title="Bold" />
    <button class="ql-italic" data-toggle="tooltip" data-placement="bottom" title="Add italic text <cmd+i>" />
    <button class="ql-underline" />
    <!-- But you can also add your own -->

    <button id="custom-button" class="custom-icon" title="Functions">fn</button>

    <select class="ql-custom" [title]="">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
      <option value="4">value4</option>
    </select>

  </div>

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

CSS

.custom-icon {
  background: #444 !important;
  color: #fff !important;
  height: 20px !important;
  width: 20px !important;
  display: block !important;
  font-size: 10px !important;
  padding: 8px 0px 0px 2px !important;
  border-radius: 2px;
  float: right !important;
  text-align: left;
}

#editor {
  height: 375px;
}

.ql-custom {
  position: absolute;
  right: 25px;
  margin-top: 3px;
}

JavaScript

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

// Enable all tooltips
//$('[data-toggle="tooltip"]').tooltip();

//$('#custom-button').unwrap();

//Clicking custom
var customButton = document.querySelector('#custom-button');
customButton.addEventListener('click', function() {
  alert('Clicked!');
});