Adding Custom Toolbar Option to Built-In Toolbar

[ccashwell]

The Toolbar docs are very unclear as to whether it's possible to both attach custom controls with specified handlers and use built-in toolbar controls. Is it possible to do this without building a replacement Toolbar module?

[benbro]

Example of custom controls with built-in toolbar controls: http://codepen.io/anon/pen/ALoxpX

The Ω button inserts the Ω symbol at the current cursor.

[benbro]

The last example under the toolbar container section explain the above example http://quilljs.com/docs/modules/toolbar/#container

[ccashwell]

Thanks, but I can see now that my question was unclear. I'm wondering if one can import the standard theme toolbar and append a button with custom functionality without manually describing standard functionality. The approach you've described requires definition of the standard toolbar as well as custom functionality. I'd prefer not to have to define all the default toolbar buttons manually just to add one.

[benbro]

Something like this? http://codepen.io/anon/pen/rrzpGx

[ccashwell]

Exactly like that. Thanks! 🏆

[benbro]

I don't see an option to tell quill to use the default buttons of the theme and add a custom button.

[artaommahe]

@benbro this does not allow to add button with custom html. Currently u need to redeclare whole toolbar with all used default buttons for adding just one custom button

[alexkrolick]

@artaommahe Quill automatically adds space for every button name in the toolbar module config with the class .ql- + the name (see the example). So you can use CSS to define a background SVG, :before content, or whatever else. Are you adding something a lot more complex that requires HTML?

[artaommahe]

@alexkrolick it works only for simple buttons, any list requires custom html

[jhchen]

Sounds like the OP's question have been answered and a workaround provided.

If someone else is using Quill with a complex toolbar the requires custom HTML mixed with standard buttons Quill would otherwise add for you, feel free to open another issue with a proposal and spec of how this new/modified configuration would look and work. There should be enough detail in the proposal to fill out the documentation page, if implemented.

[pedrovinicius]

@benbro provided a great example of putting a custom button without rewriting the entire HTML. But what about a dropdown list? How can I add a custom dropdown list?

[SylarVolkoff]

@PedroVinicius, @artaommahe With something like that :

`

for (let r = 1; r <= maxRows; r++) { for (let c = 1; c <= maxCols; c++) { tableOptions.push('newtable' + r + '' + c); } }
let tableColors = ['red', 'orange', 'yellow', 'aqua', 'chartreuse', 'green', 'blue', 'navy', 'purple', 'grey', '#CCC', 'aliceblue', 'seashell'];

return [

  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],
  [{ 'indent': '-1'}, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],

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

  [{ 'color': [] }, { 'background': [] }],
  [{ 'align': [] }],

  ['link', 'image', 'code-block'],

  ['clean'],
   // Extended toolbar buttons
  [{ 'table': tableOptions }], // cursor needs to be in the table
  [{ 'table': 'append-row' }], // cursor needs to be in the table
  [{ 'table': 'remove-row' }], // cursor needs to be in the table
  [{ 'table': 'append-col' }], // cursor needs to be in the table
  [{ 'table': 'remove-col' }], // cursor needs to be in the table
  [{ 'table': tableColors }], // cursor needs to be in the table
  [{ 'table': 'remove-table' }], // cursor needs to be in the table
  // Extended toolbar buttons

];`

Here I'm puting some table, add/remove row/cols and background color. As you can see, we can put a list when defining it :

let tableColors = ['red', 'orange', 'yellow', 'aqua', 'chartreuse', 'green', 'blue', 'navy', 'purple', 'grey', '#CCC', 'aliceblue', 'seashell'];`

[{ 'table': tableColors }]`

Hope this will help. !

[AlexKvazos]

Is it possible to use the same prompt utility that the link module uses? I'd like to ask for some input from the user on my handler but I don't want to use the browser's prompt.

[littlee]

the codepen example keep refreshing, can any one fix that ?

[MHase]

@littlee I have exactly the same problem. to see codepen you can open it in incognito mode, but still on normal tab it's broken..

[josephadah]

Is it possible to use the same prompt utility that the link module uses? I'd like to ask for some input from the user on my handler but I don't want to use the browser's prompt.

@AlexKvazos where you able to get this done? I don't want to use the browser's prompt and I can't find a way to use the quill's prompt used for link

[tannakartikey]

In the example given by @benbro the addHandler function does not seem to be running.