We use TinyMCE to create HTML text blocks that are included into various other contexts. Typically the styling is defined by the destination, not by the text block itself, but we still have limited font and size selection in the toolbar to allow the destination styling to be overridden if required.
In TinyMCE 4 these style toolbar items were 'unset' in the case where the styling hadn't been overridden, showing general text such as "Font".
We are now upgrading to TinyMCE 6 and the current font is always shown in the toolbar, even when no explicit styling is present in the HTML. This not only hides the case where no explicit styling is set, but it is often incorrect when no styling has been applied, as in some cases we style the size using percentages (the only valid options are 10%, 20% etc.) but TinyMCE shows the current font settings (e.g. 11px) regardless of whether they are valid or not.
Is there any way to restore the original behaviour? The current behaviour doesn't make a lot of sense for our use case.
I can't see any option that would seem to affect this behaviour.
Related
I have a problem with Drupal7's text editor.
I put an image inside my texts (By CKEditor), and set some styles to the image (For example width or height), and save the post, when I back to edit the post, the styles gone and my image rolls back to the default width and height!
See the issue here:
To make sure that these images will actually also be rendered (when viewing the page), make sure that the "text format" used in the node does allow the img-tag. Typically for a node using the "Filtered HTML", it could well be that the img-tag is not allowed (yet) as one of the available HTML tags. In that case, your HTML code does include an 'img" tag, but when viewing the saved node the image is not rendered (visible). To resolve it, within admin you must enter the img-tag as one of the allowed HTML tags for the text format used in the node.
And if the img-tag is already allowed in the filter you're using, then it must be some other tag that is not yet allowed.
I've been searching for a while for an answer to this problem and I'm rather surprised that I have not found a solution. I'm working with Qt on Mac and would like to customize QPushbuttons and other QWidgets, but I want to maintain the native look somewhat as well. For example, if I want to remove the margins of a QButton using style sheets, I do:
QPushButton btn(this);
...
btn.setStyleSheet("margin:0;");
This indeed removes the margins, but it also removes the native style already set for default buttons. Of course, I just want to modify margins using style sheets, how do I do this?
Also, I would expect that btn.styleSheet() would return the native style sheet, but it is blank by default. Only when I set my own style sheet, does it return a valid value, but only for the property I set. I get that setStyleSheet would reset the style sheet, but how do I modify certain properties and leave everything else as is?
TL;DR: It can't be done that way.
The native style cannot be generally expressed as a CSS style sheet, thus styleSheet() is empty by default on all styles. Thus, unfortunately, it's not possible to change native style elements one-by-one, since typically they are drawn by the platform APIs that allow little if any customization.
For examples, a QPushButton is drawn by the native calls on both OS X and Windows.
In the specific case of the margin, though, you can easily work around by creating a proxy style that returns smaller control rectangle and crops and transforms the painter before passing it to the base style. This also works for colorization/color substitution etc. You basically have to accept that the base style has to do the drawing, and then it's up to you to tweak it.
i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.
I'm working on a site that needs to allow people to override the colors of the text through their browser settings. The way I've been doing this is to NOT set any color values for text in the CSS. In my testing I've noticed that inputs and selects which don't have any CSS color set for them stay black even if they are supposed to be overridden with a different color from the browser. I've attached some screenshots (all text should be blue) for Firefox as an example but have also seen this problem in IE.
Does anyone know if this is fixable and how to make input and select tags pick up the browser color?
Native form elements (especially in older browsers) are notoriously hard to style, both at the page CSS level, as well as at the browser level. Internet Explorer (at least versions 8 and older) use the native OS UI elements for form elements, and those get their default styles from the operating system itself.
The page can override the colors of the native form elements to a limited extent (and user-level CSS within the browser can as well).
If you are looking to have more control, you may want to consider using a JavaScript replacement for the native select box.
In answer to your question, however, the coloration on the form elements is likely a system-wide OS setting. (In Windows, this is controlled in the same place as where the color of the window chrome is controlled.)
When I look on the font-family of an HTML element (from js, firebug or similar) it's always a list. How can I see which of the font is actually used from the list?
I realise it's not ideal, but you can copy the text from the viewport and paste it into a rich text editor, and it will tell you.
It's a bit fiddly, but using Firebug you can tweak the name of each font in a font-family, working left to right until the element's font changes, meaning it was the last font you changed is being used. On the latest Firebug at least, you only need to add or remove a letter from a font's name for the change to be reflected.
The Font Finder add-on for Firefox can do this. Since it’s clearly possible, it sure would be convenient if this were built in to Firebug.
Update 2012/2/4:
I examined the Font Finder source to find out how it works, and it’s actually a clever little hack. The relevant code is in the Detector class in fontfinder.js. To quote the source:
Inner class that's used to determine which font is rendered. It
operates under the foundation that each font has a unique height &
width when given a large enough font size & sample string
What’s it doing is almost like an automated version of Marcel’s answer.
So how it works is that a dummy element — with the text “mmmmmmmmmmlil” — is added to the DOM. It is set to use the browser fallback font, “serif”, at a font-size of 72px. With that, Font Finder knows the width and height of the element when the fallback font is in use. Next, it just iterates through all the fonts listed in the font-family, setting the font on the element in turn, for each one in the list. If the width and height of the element matches the width and height when the fallback font was set, we can deduce that the given font is not present. The first font in the list which produces a different width or height on the element will be the font that is actually being rendered (note: there is a special case involved when the fallback font, “serif,” is in the font-family list).
There is also a Chrome version of Font Finder. It differs (relevant source) in that the browser fallback font appears to be “sans” — not “serif.” Any code using this method will have to have browser-specific knowledge of the fallback font.