jqueryquill

Quill 2.0 Localization


I am using the new Quill 2.x WYSIWYG editor. I would like to implement localization. How to approach this? I find nothing detailed in the Knowledge Base.

BTW:

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>

Solution

  • it turns out that this is the solution. Translation can be applied via CSS. Here it is for German:

    <style>
        .ql-snow .ql-tooltip::before {
      content: "URL besuchen:" !important;
    }
    
    .ql-snow .ql-tooltip input[type=text]::placeholder {
      content: "https://www.beispiel.de";
    }
    
    
    .ql-snow .ql-tooltip a.ql-action::after {
      content: 'Bearbeiten' !important;
    }
    
    .ql-snow .ql-tooltip a.ql-remove::before {
      content: 'Entfernen' !important;
    }
    
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      content: 'Speichern' !important;
    }
    
    .ql-snow .ql-tooltip[data-mode=link]::before {
      content: "Link eingeben:" !important;
    }
    
    .ql-snow .ql-tooltip[data-mode=formula]::before {
      content: "Formel eingeben:" !important;
    }
    
    .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "Video-URL eingeben:" !important;
    }
    
    /* Zusätzliche Stile für bessere Anpassung */
    .ql-snow .ql-tooltip input[type=text] {
      width: 200px; /* Breite anpassen, falls nötig */
    }
    
    .ql-snow .ql-tooltip a.ql-preview {
      max-width: 250px; /* Maximale Breite für Vorschau-Links anpassen */
    }
      </style>