My understanding of Quill JS is pretty limited at the moment, and I can't find any documentation on this on the Quill site/github page, so I hope someone may be able to set me straight.
When creating a Quill toolbar, it's possible to set the 'selected' attribute of the toolbar's select elements, and this setting will then be used as the default value when entering a new line.
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px">Normal</option>
<option value="18px">Large</option>
<option value="32px" selected>Huge</option>
</select>
While this default value will be displayed in the toolbar, the corresponding value is not applied to the line.
Please see the following JS Fiddle
The 'default' font is monospace and size is 'huge'. However, if you type into the editor, this is not applied, unless you re-select these values from the toolbar dropdowns.
Is it expected that you should also apply CSS rules to the editor that match the 'default' values set in the toolbar? (This seems like unnecessary duplication)
Or am I looking at this from the wrong direction?
It is expected that you also apply CSS rules to the editor to match the 'default'. When you tell the toolbar that '32px' is the default, you're not saying set text to 32px, you're saying set it to nothing / unset it. Otherwise every single unformatted character would be formatted with a huge list of default formats.
Related
I'm attempting to set the text highlight colors in my project that uses TailwindCSS. This can be done fairly easily using the "selection" modifier that Tailwind provides. This works fine except when I try to set different colors for dark mode. I can't figure out what I'm doing wrong but I can't find anything online regarding how to correctly use the "dark" and "selection" modifiers in conjunction.
I tried the following syntax in attempt to get it to work correctly:
<html className="selection:bg-blue selection:text-purple dark:selection:bg-pink dark:selection:text-blue">
However, this only picks up the selection:bg-blue selection:text-purple styles and not the dark mode selection styles (dark:selection:bg-pink dark:selection:text-blue) when dark mode is activated.
Any thoughts on what I'm doing wrong? Thanks in advance.
Edit:
The colors do exist in my tailwind config:
I figured this out. I wasn't thinking and realized what I was doing wrong was putting the selection classes on the HTML tag. The HTML tag is where the dark mode class gets applied and due to this, the selection class wasn't a descendant of the .dark mode class. To fix it, I moved the selection classes to the body tag.
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
I'm trying to set an icon to a ui-select, however I've been failing. I've seen several examples online, where they have screenshots of arrows, or different icons. I'm curious how I can change this out.
Currently, I'm not having much luck, as I don't have any icon showing.
<ui-select multiple ng-model="myModel" theme="bootstrap" on-select="myOnSelect()">
I assume I'm missing a CSS reference, or something else.
Example I found that has ui-select with arrows: http://embed.plnkr.co/jBJkDb
Looking at https://github.com/angular-ui/ui-select/wiki/ui-select there is a section called "Examples: Disabling Instead of Removing Selected Items in Multiple Selection" which has a different icon with a different color.
Can someone identify how to change the icon on the right for the ui-select?
while trying to change the background color of disabled dates to red, using disabledCellCls seems to have no effect on disabled dates. How to make this work..
Fiddle: https://fiddle.sencha.com/#fiddle/4io
Thanks
Since this a bug, one workaround is to use 'cls' config instead of 'disabledCellCls' and additional selectors in css .x-datepicker-disabled a.x-datepicker-date
Sample fiddle: https://fiddle.sencha.com/#fiddle/4ph