I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.
Related
I have a WP site with "baskerville2" theme and am trying to remove uppercase styling to some menu items.
I found some 'text-transform: uppercase' rules in the stylesheet and have removed these - as well as adding 'html {text-transform: none !important;}' for good measure.
Have also searched JS assets for any instance of toUpperCase, and there are none.
Still the menu items are uppercase, so I'm wondering if they could be styled some other way?
This really has me stumped since, the theme creator himself recommends 'text-transform: normal;' as per this page: https://allaboutbasic.com/2017/03/21/baskerville-2-by-anders-noren-modifications-of-header-footer-sidebar-contents-customization-and-documentations/
but even the code given there doesn't work.
Panic over... It seems I had a browser window still open with an unsaved edit on the site custom css. Somehow, this caused my css changes made on another bowser window not to update.
So the text-transform change does work after all - no mystery!
in your website text-decoration is uppercase yet
I have application where user can paste their html code, when ever I paste html with style tag those CSS rules are applied to my application too.
Those CSS rules should be applied only to pasted code.
Found this:
http://www.w3schools.com/tags/att_style_scoped.asp
But it only works with firefox, would be perfect solution for this problem.
Now I'm thinking about parsing pasted CSS rules and applying them to html as inline css rules.
Is there any better solution?
Use iFrame to provide safe way of showing user supplied HTML code. That way even when user tries to overwrite your site to look like bank account he still have no access to outer-iFrame content.
I am using a link generated from a RSS converter (webrss.com), which sits inside a javascript tag at the end of my html. I have needed to convert an RSS feed to HTML for displaying on some digital signage. It works great, except I am having trouble overriding its default styles. I can change .li and .a styles but not font-size in the body or html tags.
I have looked everywhere for a solution and have tried using !important in my CSS but it isn't working. I would like to use an external style sheet and have it override all styles in the js tag at the end of my html.
Is this possible? I'm new to this and am stuck, please help!
Possible they are setting some of the styles inline on the elements eg. <span style="font-size:12px">contents</span> using JS themselves. If they are, there is no way to override it with CSS you'll have to use js your self to override their styles.
Basically, specificity and valid css can be your issue.
Specificity: You can inspect element to see what styles are applying. Assuming your css code is valid, it will show up for the selected element, below the css rules taking precedence above your own. Something like "li {font-size: 11px !important;}" should take precedence above all others, unless there is a more specific selector using the important piece as well.
Validity: For all html elements (li, a, body, html), you select them by just writing them out (ie "html {color: red;}" NOT ".html {color: red;}". I see you've mentioned .li and .a in your question, which may have just been an accident. Note that the dot is not necessary unless it is a class name assigned (ie. ). Check if your css is even listed in the inspector for that element to check if your css is valid.
You can override inline styles with css. The important tag trumps the inline style. See http://css-tricks.com/override-inline-styles-with-css/
The best way to override rule in JS is using CSSOM, I found this lib may help:
https://github.com/cssobj/cssobj
It's render CSSOM from JS, and you can change rules directly from JS.
I have a ckeditor with certain set of user defined toolbars in it.Now if I use this code in config.js,
config.allowedContent = 'img[!src,alt,width,height]{float}';
the ckeditor shows only the toolbars for the above tags. Other tools are ignored or removed. I do not want inline style in images. What else can I use to remove inline styling in images without using replace() function in ckeditor?
Just add all the content you can allow to the rules. That way you have complete control over the source and it's easier than you would think.
Currently it's not possible to disallow specific content - but follow closely this trac issue: http://dev.ckeditor.com/ticket/10276 - it is about creating exactly this; a disallowed content rule.
I am building a mass mailer system where you can see a preview of the email before it is sent. I render the email html into a preview box using jquery -- $().html(theHtml).
Html emails use all inline css for their styles. When I fill the html, it overrides some of my css.
I am looking for a solution to completely stop this from happening. Is there any way to self contain the email html/css so it does not affect the entire document?
I understand that adding !important to my styles will do the trick, but it is not a very scalable option.
Thanks in advance.
Unfortunately !important is the only way to override an inline style - that's just how specificity works.
However you might be able to get around it by making all of the "wrapper" CSS (e.g. the CSS for YOUR page, not the HTML email preview) more specific by using IDs and classes etc so that their styles don't get overridden by generic style declarations embedded in the HTML email.
I'm a little confused though - are you trying to override "inline" styles (as in elements with the style="your css here" attribute) or embedded CSS (e.g. "your css here")? If it's the latter, just make important stuff more specific in your own CSS.
Some more info about specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Using an iframe as Sander suggested might be a simpler solution than trying to restructure your CSS specificity rules though.
Are you using the same class/id names for your website and the emails? This should not be the case.
I highly recommend using a pseudo-namespace for your CSS.
Basically, add an arbitrary prefix to your CSS that won't be contained in the inlined 3rd-party content: <div class='foo'> becomes <div class='myapp-foo'>
Having used this practice on our projects recently, it requires only a bit more discipline, but makes the app easier to manage for embedding other content.