Как добавить что -то вроде <input type = "color"> для опции моей панели инструментов для моей панели, чтобы изменить цве ⇐ Html

[Anonymous]

`Итак, я наткнулся на эту проблему, где я должен был реализовать полный спектр вариантов цвета для панели инструментов Quill. Контекст: это из ngx-quill, и используется в угловом. Но моя единственная забота здесь: пикер цвета появляется в верхнем левом углу моего экрана, что выглядит странно. Попытался добавить CSS, но, похоже, не работает. < /P>
Вот моя работа: < /p>
ngAfterViewInit() {
this.setupColorPicker();
this.editors.changes.subscribe(() => {
this.setupColorPicker();
});
}

setupColorPicker() {
this.editors.forEach((editorComponent, index) => {
this.colorPicker(editorComponent, index);
});
}

colorPicker(editorComponent: QuillEditorComponent, index: number){
const quill = editorComponent.quillEditor;
const toolbar = quill.getModule('toolbar');
if ((toolbar as any).handlerExists) return;
(toolbar as any).handlerExists = true;
toolbar.addHandler('color', (value) => {
if (value === 'color-picker') {
let picker = document.getElementById(`color-picker-${index}`) as HTMLInputElement;
const onChange = () => {
const selection = quill.getSelection();
if (selection && selection.length > 0) {
quill.format('color', picker.value);
} else {
quill.format('color', picker.value);
}
};
if (!picker) {
picker = document.createElement('input');
picker.id = `color-picker-${index}`;
picker.type = 'color';
picker.value = '#FF0000';
picker.style.display = 'none';
document.body.appendChild(picker);
}
const newPicker = picker.cloneNode(true) as HTMLInputElement;
picker.replaceWith(newPicker);
picker = newPicker;
picker.addEventListener('change', onChange, false);
const colorPickerOption = document.querySelector('.ql-color .ql-picker-options [data-value="color-picker"]') as HTMLElement;
if (colorPickerOption) {
picker.style.position = 'absolute';
picker.click();
}
} else {
quill.format('color', value);
}
});
}

< /code>

[*] Я попытался найти, откуда исходит CSS, но как только я нажимаю на «осмотреть», выбирает цветовой выбор. Явные CSS в файле .css, но бесполезно. Даже использование '! Важно', кажется, не работает.

Если используется какое -либо другое свойство отображения, то он затем движется непосредственно здесь и там.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ars-option