Quill.js setzt den Text auf normaler Eingabetaste zurück, anstatt die ausgewählte Größe zu halten ⇐ JavaScript

[Anonymous]

Ich verwende quill.js < /strong> und muss: < /p>

[*] Machen Sie "klein" die Standardtextgröße, wenn der Editor Laden Sie. "Anstatt die ausgewählte Größe zu behalten). /> Der Editor beginnt mit "klein" . < /li>
Wenn der Benutzer eine andere Größe auswählt, funktioniert er beim Eingeben . Der Benutzer drückt die Eingabetaste, die neue Zeile wechselt immer auf "normal" Anstatt die ausgewählte Größe zu behalten. < /li>
Die Symbolleiste zeigt weiter . "

Code: [/b]
HTML:


Content Arabic
*

< /code>
JavaScript: < /p>

$(document)
.ready(
function() {
var contentInput = document.getElementById('contentAr');

// Initialize Quill editor
var quillAr = new Quill('#editor-container-ar', {
theme : 'snow',
modules : {
toolbar : [
[ {
'font' : []
} ],
[ {
'size' : [ 'small', 'normal', 'large',
'huge' ]
} ],
[ 'bold', 'italic', 'underline',
'strike' ], [ {
'color' : []
}, {
'background' : []
} ], [ {
'script' : 'sub'
}, {
'script' : 'super'
} ], [ {
'header' : 1
}, {
'header' : 2
} ], [ 'blockquote', 'code-block' ],
[ {
'list' : 'ordered'
}, {
'list' : 'bullet'
} ], [ {
'indent' : '-1'
}, {
'indent' : '+1'
} ], [ {
'direction' : 'rtl'
} ], [ {
'align' : []
} ], [ 'link', 'image', 'video' ],
[ 'clean' ] ]
}
});

console.log(quillAr);

let userSelectedSize = 'small'; // Track the user’s selected size

// Force "Small" as the default size on load
setTimeout(function () {
let editorContent = quillAr.root.innerHTML.trim();
console.log('Editor content:', editorContent);
if (editorContent === "
") {
quillAr.root.innerHTML = '


'; // Ensure small visually
}
quillAr.format('size', 'small'); // Make sure new text starts as "small"
}, 100);

// Detect when the user selects a size
quillAr.on('selection-change', function (range) {
console.log('Selection changed:', range);
if (range) {
let format = quillAr.getFormat(range);
console.log('Format:', format);
userSelectedSize = format.size !== undefined ? format.size : 'normal'; // Store user-selected size
}
});

// Ensure newly typed text follows the selected size
quillAr.on('text-change', function (delta, oldDelta, source) {
console.log('Text changed:', delta, 'Source:', source);
if (source === 'user') {
let format = quillAr.getFormat();
console.log('Current format:', format, 'User selected size:', userSelectedSize);
if (!format.size || format.size !== userSelectedSize) {
quillAr.format('size', userSelectedSize); // Apply user-selected size
}
}
});

// Keep the selected size when pressing Enter
quillAr.keyboard.addBinding({ key: 'Enter' }, function (range) {
setTimeout(() => {
let newSize = userSelectedSize || 'small'; // Ensure we have a size

// Move cursor to the new line and apply formatting
quillAr.formatText(range.index, 1, 'size', newSize);

console.log('New line formatted to:', newSize);
}, 0);
});

// Force "Small" to always use
quillAr.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
console.log('Pasted content:', node, delta);
delta.ops.forEach(op => {
if (op.attributes && !op.attributes.size) {
console.log('Applying small size to:', op);
op.attributes.size = 'small'; // Ensure "small" gets a
}
});
return delta;
});
....

< /code>
Ausgabe: < /strong> < /p>

[*] Selbst mit diesem Code wird das Drücken der Eingabetaste zurückgesetzt. Normal "anstatt die ausgewählte Größe zu behalten.
Die Symbolleiste zeigt weiter>