I m using CKEditor for a simple CMS i built for a client.
Here s the problem I m having, client copies and pastes text from a word document, and this text is stored to database with the current font that was in the text. and on the front end it shows different font from the rest of page.
How can i enforce a fix font for a page?
I have a font defined globally in css but fonts can be overriden in different divs p, span etc. right?
I thought of removing fonts from CKEditor.
Looking for a neat solution.
cheers.
Word makes a real mess of any text that it pastes, with all kinds of extraneous tags in it.
The easiest for you is to educate your client about the paste from Word button.
If you really want this enforced, you can always set forcePasteAsPlainText to true.
You can add a listener for the "paste" event. It will clean up your HTML the way you want.
Related
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
I was thinking to replace user text like :), :P in comments with smilies (emoticons). Using regex. Do you think it's a good idea for the replacement to be a span element with a class? Then I apply the smiley image to that class?
Or should I just replace that text with <img> tags?
CSS is usually seen as not part of the content, but these image smileys are...
(if you disable the css, the text could change its meaning because emoticons are missing)
An emoticon is visual information presented using characters, so if you replace, say, “:-)” by something, the natural candidates are special characters such as “☺” (U+263A WHITE SMILING FACE) and an img tag like <img alt=":-)" src="smiley.png">.
Using an element with a background image has several drawbacks, including lack of any counterpart to the alt attribute and the common browser behavior of suppressing background images on printing.
It is somewhat risky to programmatically change anything emoticon-looking to e.g. an image. You cannot be sure that every “:-)” is an emoticon. All kinds of odd character combinations may arise in special fields. Besides, if the user was writing e.g. about emoticons, part of the content might get lost or distorted in the replacement.
if you have a lot of smileys you are better of using the css sprite trick because it means the browser only has to download one image file instead of downloading a dozen smaller ones
this will result in less overhead and better caching
Use CSS to display the pictures. The best practice is to strip unwanted characters, invisible characters and HTML tags from user input, to avoid HTML code injection and cross-site scripting.
Have the smileys in plain-text, and display a picture instead with CSS.
You can achieve that by using a <span> or another element.
For instance, :) should be <span class="normalsmiley">:)</span> in the code.
Then the text will make sense for people not seeing images or with CSS disabled (they will see a text smiley).
I've got an input so the user can type either html or plain text. When the user copy & paste text from MS Word, for example, it generates a weird html. Then, when you view that topic, you can see the whole page's style is affected. I don't really know if the generated html has unclosed tags or something, but it looks like it does and thus, the style of the page is affected.
Does anybody know how to "isolate" the html of that div(or whatever the container be) from the whole page's style?
Short of showing the content in an IFRAME, you can't really do that. What I usually do in this situation is apply tag stripping logic to the content as it comes in. You really don't want to allow arbitrary HTML from a security perspective, but even if you don't care what your users input, you should be stripping out invalid HTML tags (Word has a habit of creating tags with weird namespace-looking things like o:p) and running something like Tidy over the result to ensure every tag is properly closed. There are a number of Tidy libraries for .NET out there; here's one.
Here's a quick cut-and-paste of how I've done this in the past. Note that the class implements an interface from the project I used it in, but you get the general idea.
Copying text from word can include <style> tags. The only sure way to isolate these styles is to put the input control in an <iframe>
You can either sanitize the input or display it in an IFrame.
It it were me I'd strip all but basic formatting (e.g., bold, italics) and use Tidy. That's what I end up doing, I strip and convert all the CSS styles of word into <strong>, <em>, etc.
I am working on a CMS. One of its functions is the editing of HTML "chunks" in a WYSIWYG editor that are displayed as individual pages.
I have an area in the CMS where these chunks are previewed.
The chunks rely on a "foundation.css" file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.
The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.
Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.
Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can't.
an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user's workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.
I have thought about "lifting" all other CSS to a sub-class (i.e. adjusting the CMS' CSS), but that would involve touching a lot of files, some probably PHP source code, and I'd rather not do that.
I don't think this has a solution but you never know.
There are CSS Reset stylesheets available; you could modify those, perhaps?
you could give all of the divs that contain code from the WYSIWYG editor a class, and then reset everything inside of that div.
Adding to what GSto said you can have some style set up like
div.clearCss *
{
property: value !important
}
With all pertinent style properties reset.
This style should apply to anything under an element with clearCss set as it's class, so you would only need to apply that class to the parent element.
Are you using a specific WYSIWYG editor in CMS? I've found that the Telerik RadEditor will allow you to use specific stylesheets for the actual editing area of the editor. The editor that you are using might also be able to to do that.
Good luck, and hope this helps.
If you take TinyMCE for example, they use also an iframe, I think they had the same problems like you. I use it in my backend and on some pages 4 iframes. I don´t see any performance problems.
With TinyMCE it is possible to compress the functions you need (in PHP, JSP, .NET and Coldfusion), this gives you a great speedboost.
Think twice, bevore you write your own WYSIWYG editor, the others are well tested and have a bunk of very good plugins for nearly every need.
I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.
I have not seen this anywhere, so I don't know if this is possible with HTML and JavaScript.
Has anyone seen anything like this? Or know how to write it?
Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.
Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.
The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.
Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.
It's not possible.
Way to go is to make textarea's font, but not cursor, transparent using color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlapping div to which content of textarea will be copied + formatted on textarea's oninput event.
You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.
AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.
You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.
For example
Original text:
This is what the user typed.
Highlighted text
This is what the <a class="className">user</a> typed.