Quill Custom action

[dacastro4]

I don't know if it possible but I would like to add a custom action to Quill using this guide
Cloning Medium with Parchment and this codepen example:

[layout-lab]

Hi @dacastro4, did you have any joy with this? I'm also looking to add some inline text styles.

[dacastro4]

@layout-lab unfortunately, I did not

[layout-lab]

Hi @dacastro4,

I've taken a look at this, and have managed to get it to work by editing the Twill vendor files which isn't desirable, but may help you. If anyone knows how to extend the below files, I'd love to hear your input.

The editor configuration is contained in this file:

twill/frontend/js/libs/Quill/QuillConfiguration.js

Line 1 in e780bcf

import Quill from 'quill'

The Quill docs have info on adding fonts to the whitelist:
https://quilljs.com/guides/how-to-customize-quill/#customizing-attributors
I therefore added the following to the aforementioned config file:

var FontAttributor = Quill.import('formats/font')
var fonts = ['impact', 'courier']
FontAttributor.whitelist = fonts
Quill.register(FontAttributor, true)

Some CSS needs to be added to display the drop down items. I added my CSS to the VUE file below, although it's probably possible to push this elsewhere.

twill/frontend/js/components/Wysiwyg.vue

Line 309 in e780bcf

<style lang="scss">

  .ql-snow .ql-picker.ql-font span[data-value="impact"]::before {
    content: "Impact";
  }
  .ql-snow .ql-picker.ql-font span[data-value="courier"]::before {
    content: "Courier";
  }

In the Wysiwyg formField I added this to toolbarOptions :

['font' => ['', 'impact', 'courier'] ],

Hope this helps!