web-dev-qa-db-fra.com

Comment ajouter des types de police sur Quill js avec les options de la barre d'outils?

J'ai créé une zone de texte riche faite avec Quill js . J'ai les options suivantes pour la barre d'outils:

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>

Actuellement, lorsque j'essaie d'ajouter plus de types en modifiant l'option 'police' sur la barre d'outils (par exemple 'police': ['arial']), les options de sélection affichent simplement "Sans Serif" au lieu d'afficher l'option "Arial". Ce que je pense, c'est voir les options par défaut ("Sans Serif", "Serif", "Monospace") ainsi que les options personnalisées que je veux ajouter.

De plus, j'ai essayé les personnalisation des attributs indiqués sur la documentation, mais avec ma configuration actuelle, il n'affiche que les options par défaut. Peut-être que je manque quelque chose.

J'espère que j'ai été clair avec mon doute et que quelqu'un pourrait m'aider.

METTRE À JOUR:

Juste pour être un peu plus clair, j'essaie d'ajouter plus de polices en suivant la configuration Quill Container

Conteneur : au niveau le plus simple, les contrôles de la barre d'outils peuvent être spécifiés par un simple tableau de noms de format.

javascriptjqueryfontsquill
9
albertini07

Voilà ce dont vous avez besoin.

Le processus est comme ça dont vous avez besoin 4 composants:

  1. Une balise select avec un ql-font classe. Cela contiendra les nouvelles options de police.
  2. Ajoutez les nouvelles polices à la liste blanche. Cela doit être défini avant d'appeler le constructeur Quill en Javascript.
  3. Définir la font-family pour chaque label dans la liste déroulante. Exemple: font-family: "Inconsolata"
  4. Définissez les familles de polices de contenu qui seront utilisées dans la zone de texte. En suivant l'exemple du 3e composant: .ql-font-inconsolata { font-family: "Inconsolata";}

Mise à jour:

J'ai lu la documentation pour vous aider et ils mentionnent que

Au niveau le plus simple, les contrôles de la barre d'outils peuvent être spécifiés par un simple tableau de noms de format ...

Alternativement, vous pouvez créer manuellement une barre d'outils dans [~ # ~] html [~ # ~] en passant le Élément DOM ou sélecteur dans Quill; et c'est la solution présentée dans cette réponse. D'un autre côté, la documentation ne le mentionne pas mais après avoir essayé de nombreuses façons de charger des données à l'aide d'un tableau (sans succès), j'ai remarqué que ce n'est pas possible. Alors, voici ma contribution et la raison pour laquelle j'ai posté ceci mise à jour. J'ai fait les équivalences (JS et HTML) pour l'implémentation manuelle.

Une barre d'outils personnalisée peut être créée à l'aide de [~ # ~] html [~ # ~] et un constructeur JS . Le constructeur recevra le #toolbar-container en tant que toolbar dans la section modules.

Ensuite, vous pouvez générer la même structure en utilisant uniquement les balises HTML. Le concept est très similaire. Par exemple:

  • Si dans [~ # ~] js [~ # ~] nous déclarons un tableau comme ceci: ['bold', 'italic', 'underline', 'strike'] in [~ # ~] html [~ # ~] sera:

    <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>

  • Dans [~ # ~] js [~ # ~] est [{ 'header': 1 }, { 'header': 2 }] in [~ # ~] html [~ # ~] sera

    <span class="ql-formats"> <button class="ql-header" value="1"></button> <button class="ql-header" value="2"></button> </span>

Donc, ici, vous avez un exemple complet dans cet extrait de code:

// Add fonts to whitelist
var 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:
var quillObj = new Quill('#quilljs-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'This is a font test...',
  theme: 'snow'
});
<!-- Style -->
<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>
13
Teocci

Vous [~ # ~] pouvez [~ # ~] utiliser le constructeur JavaScript pour créer une sélection de police personnalisée.

À partir de la page Quill Quickstart voici le HTML de base -

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

Le code requis dans l'initialiseur JavaScript est le suivant:

let Font = Quill.import('formats/font');
Font.whitelist = ['times-new-roman', 'arial'];
Quill.register(Font, true);

let toolbarOptions = [
    [{ 'font': ['', 'times-new-roman', 'arial'] }],

    ['clean']                                         // remove formatting button
];

let quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
      },
    theme: 'snow'
    });

Vous devez également ajouter ce qui suit à votre feuille de style où les noms dans les sélecteurs CSS sont ces noms dans le JavaScript ci-dessus:

/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
  content: 'Default';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before
{
  content: 'Times New Roman';
  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before
{
  content: 'Arial';
  font-family: 'Arial';
}

/****************************************************
Set the font-family content used for the HTML content.
*****************************************************/
.ql-font-arial {
  font-family: 'Arial';
}

.ql-font-times-new-roman {
  font-family: 'Times New Roman';
}
3
Steve B

FWIW, j'ai copié le code de Steve B et l'ai rendu plus générique. De cette façon, vous n'avez pas besoin de faire tout le copier-coller des règles CSS, etc ... spécifiez simplement les polices que vous souhaitez ajouter dans votre tableau de polices.

// specify the fonts you would 
var fonts = ['Arial', 'Courier', 'Garamond', 'Tahoma', 'Times New Roman', 'Verdana'];
// generate code friendly names
function getFontName(font) {
    return font.toLowerCase().replace(/\s/g, "-");
}
var fontNames = fonts.map(font => getFontName(font));
// add fonts to style
var fontStyles = "";
fonts.forEach(function(font) {
    var fontName = getFontName(font);
    fontStyles += ".ql-snow .ql-picker.ql-font .ql-picker-label[data-value=" + fontName + "]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=" + fontName + "]::before {" +
        "content: '" + font + "';" +
        "font-family: '" + font + "', sans-serif;" +
        "}" +
        ".ql-font-" + fontName + "{" +
        " font-family: '" + font + "', sans-serif;" +
        "}";
});
var node = document.createElement('style');
node.innerHTML = fontStyles;
document.body.appendChild(node);

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': fontNames }],
    [{ 'align': [] }],

    ['clean']                                         // remove formatting button
];

// Add fonts to whitelist
var Font = Quill.import('formats/font');
Font.whitelist = fontNames;
Quill.register(Font, true);

var quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});
0
Thomas