I have made a rich text area made with Quill js. I have the next options for the tool bar:
new Quill('#quilljs-container', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block', 'link'],
[{ '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
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
]
},
theme: 'snow'
});
<!-- Style -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- quill js container -->
<div id="quilljs-container"> </div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
Currently, when I try to add more types editing the 'font' option on toolbar (e.g. 'font': ['arial']), the select options just display "Sans Serif" instead of display the "Arial" option. What I spect is see the default options ("Sans Serif", "Serif", "Monospace") plus custom options that I want to add.
Also, I have tried the customizing attributors shown on the documentation, but with my current configuration, it just display just the default options. Maybe I'm missing something.
I hope I was clear with my doubt and someone could help me.
UPDATE:
Just to be a little more clear, I am trying to add more fonts following the Quill Container configuration
Container: At the simplest level, toolbar controls can be specified by a simple array of format names.
This is what you need.
The process is like this you need 4 components:
select
tag with a ql-font
class. This will contain the new font options.Quill
constructor in Javascript.font-family
for each label
in the dropdown. Example: font-family: "Inconsolata"
.ql-font-inconsolata { font-family: "Inconsolata";}
Update:
I read the documentation in order to help you and they mention that
At the simplest level, toolbar controls can be specified by a simple array of format names...
Alternatively, you can manually create a toolbar in HTML by passing the DOM element or selector into Quill; and that is the solution presented in this answer. On the other hand, the documentation does not mention but after trying many ways to load data using an array (without any success), I noticed that is not possible. So, here is my contribution and the reason why I posted this update. I made the equivalences (JS and HTML) for the manual implementation.
A custom toolbar can be created using HTML and a JS constructor. The constructor will receive the #toolbar-container
as a toolbar
in the modules
section.
Then, you can generate the same structure using only HTML
tags. The concept is very similar. For example:
['bold', 'italic', 'underline', 'strike']
in HTML will be:<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
[{ 'header': 1 }, { 'header': 2 }]
in HTML will be<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>
So, here you have a complete example in this code snippet:
// Add fonts to whitelist
let Font = Quill.import('formats/font')
// We do not add Sans Serif since it is the default
Font.whitelist = ['inconsolata', 'roboto', 'mirza', 'arial']
Quill.register(Font, true)
// We can now initialize Quill with something like this:
let quillObj = new Quill('#quilljs-container', {
modules: {
toolbar: '#toolbar-container'
},
placeholder: 'This is a font test...',
theme: 'snow'
})
<!-- Style -->
<link href="https://fonts.cdnfonts.com/css/inconsolata-2" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
/* Set dropdown font-families */
#toolbar-container .ql-font span[data-label="Sans Serif"]::before {
font-family: "Sans Serif";
}
#toolbar-container .ql-font span[data-label="Inconsolata"]::before {
font-family: "Inconsolata";
}
#toolbar-container .ql-font span[data-label="Roboto"]::before {
font-family: "Roboto";
}
#toolbar-container .ql-font span[data-label="Mirza"]::before {
font-family: "Mirza";
}
#toolbar-container .ql-font span[data-label="Arial"]::before {
font-family: "Arial";
}
/* Set content font-families */
.ql-font-inconsolata {
font-family: "Inconsolata";
}
.ql-font-roboto {
font-family: "Roboto";
}
.ql-font-mirza {
font-family: "Mirza";
}
.ql-font-arial {
font-family: "Arial";
}
/* We do not set Sans Serif since it is the default font */
</style>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<div id="standalone-container">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font">
<option selected>Sans Serif</option>
<option value="inconsolata">Inconsolata</option>
<option value="roboto">Roboto</option>
<option value="mirza">Mirza</option>
<option value="arial">Arial</option>
</select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
<button class="ql-link"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
</div>
<!-- quill js container -->
<div id="quilljs-container"></div>
<!-- Add quill js on the project -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>