Я не могу перечислить имена семейства шрифтов в выборе шрифта Quill Editor ⇐ C#

[Anonymous]

Я вижу различия в семье Font в редакторе (то есть настраиваемые шрифты применяются должным образом), но я не могу отобразить список имен шрифтов на панели инструментов редактора Quill. Итак, я использовал этот код (из кода Embed> Web Section): < /p>

Код: Выделить всё

< /code>
Теперь в моем проекте Blazor Web App: < /p>
[h4]RazorPage.razor.css

, упрощенный стиль CSS [/h4]

Код: Выделить всё

.ql-font-roboto {
font-family: 'Roboto', sans-serif;
}

.ql-font-open-sans {
font-family: 'Open Sans', sans-serif;
}

.ql-font-lato {
font-family: 'Lato', sans-serif;
}

.ql-font-montserrat {
font-family: 'Montserrat', sans-serif;
}

.ql-font-roboto-condensed {
font-family: 'Roboto Condensed', sans-serif;
}

.ql-font-oswald {
font-family: 'Oswald', sans-serif;
}

.ql-font-poppins {
font-family: 'Poppins', sans-serif;
}

.ql-font-slabo-27px {
font-family: 'Slabo 27px', serif;
}

.ql-font-noto-sans {
font-family: 'Noto Sans', sans-serif;
}

.ql-font-roboto-mono {
font-family: 'Roboto Mono', monospace;
}

.ql-font-merriweather {
font-family: 'Merriweather', serif;
}

В моем файле Javascript, который я использую для моего razorpage.razor :

Код: Выделить всё

const Font = Quill.import('attributors/style/font');
Font.whitelist = [
'roboto', 'open sans', 'lato', 'montserrat', 'roboto condensed',
'oswald', 'poppins', 'slabo 27px', 'noto sans', 'roboto mono', 'merriweather'
];
Quill.register(Font, true);

setTimeout(function () {
const quill = new Quill('#editor', {
modules: {
toolbar: [ // I have no idea how to specify this: #toolbar-container
['bold', 'italic', 'underline', 'strike'],        // toggled buttons
['blockquote', 'code-block', 'link', 'image'],

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

['clean']
],
},
placeholder: 'Compose a product description here...',
theme: 'snow'
});
window.quillEditor = quill;
console.log("Quill initialized");
}, 1000);
< /code>
Вот код текстового редактора Rich: < /p>

I can see that the font is successfully imported to the editor, but it doesn't reflect on the toolbar font selection:



< /p>

Я alread следовала официальной документации, и это решение, которое я предоставлю ниже: < /p>

по -прежнему в Razorpage.razor.css

Код: Выделить всё

#toolbar-container .ql-font-roboto span[data-label="Roboto"]::before {
font-family: "Roboto";
}

#toolbar-container .ql-font-open-sans span[data-label="Open Sans"]::before {
font-family: "Open Sans";
}

#toolbar-container .ql-font-lato span[data-label="Lato"]::before {
font-family: "Lato";
}

#toolbar-container .ql-font-montserrat span[data-label="Montserrat"]::before {
font-family: "Montserrat";
}

#toolbar-container .ql-font-roboto-condensed span[data-label="Roboto Condensed"]::before {
font-family: "Roboto Condensed";
}

#toolbar-container .ql-font-oswald span[data-label="Oswald"]::before {
font-family: "Oswald";
}

#toolbar-container .ql-font-poppins span[data-label="Poppins"]::before {
font-family: "Poppins";
}

#toolbar-container .ql-font-slabo-27px span[data-label="Slabo 27px"]::before {
font-family: "Slabo 27px";
}

#toolbar-container .ql-font-noto-sans span[data-label="Noto Sans"]::before {
font-family: "Noto Sans";
}

#toolbar-container .ql-font-roboto-mono span[data-label="Roboto Mono"]::before {
font-family: "Roboto Mono";
}

#toolbar-container .ql-font-merriweather span[data-label="Merriweather"]::before {
font-family: "Merriweather";
}

Как вы можете видеть в приведенном выше фрагменте кода CSS, я уже добавил некоторые корректировки кода, чтобы сделать его подходящим для моих потребностей. Обратите внимание, что если я выберу один выбор семейства шрифтов, который ранжируется на основе определенного порядка, который я определял, то FONT-семью применяется должным образом на выделенной линии текста.



































< /code>

С другой стороны, я уже рассмотрел этот вопрос: < /p>

Как удалить или изменить шрифт по умолчанию в Quill JS? это. < /p>

Итак, мой вопрос: как я могу решить эту проблему в текстовом редакторе богатого перо в блазорном веб -приложении с .net 9? < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -selection