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

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как добавить что -то вроде <input type = "color"> для опции моей панели инструментов для моей панели, чтобы изменить цве

Сообщение 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Как добавить что -то вроде <input type = "color"> для опции моей панели инструментов для моей панели, чтобы изменить цве
    Anonymous » » в форуме Html
    0 Ответы
    7 Просмотры
    Последнее сообщение Anonymous
  • Округленный
    Anonymous » » в форуме CSS
    0 Ответы
    14 Просмотры
    Последнее сообщение Anonymous
  • Округленный
    Anonymous » » в форуме CSS
    0 Ответы
    6 Просмотры
    Последнее сообщение Anonymous
  • Округленный
    Anonymous » » в форуме CSS
    0 Ответы
    8 Просмотры
    Последнее сообщение Anonymous
  • Как позиционировать визуально скрытую всплывающее окно под значком?
    Anonymous » » в форуме Html
    0 Ответы
    4 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»