How do I apply css styles in a string with javascript? I try the following way:
var text = '<b>stylized text</b>';
Note: When I send this string via e-mail, the whole string appears, as (<b>stylized text</b>), without the style applied. How do I make the text with the applied style appear in the received email?
You don't need javascript for this. Just use the HTML style attribute, so:
<b style="font-size:24px;color:green">stylized text</b>
You can put most CSS styles in the style attribute. For more information, see this.
Note: some email applications support embedded HTML and some don't. From what I can tell from the results you describe in your question, yours does. But it's something to keep in mind.
Related
I've been trying to do something simple, i think, let me explain:
I have an BPMS software where a send an e-mail at the end of the process, this e-mail is an HTML page that i created, inside the HTML page we have some identifying codes that get a field value from an previously form, some strings. The problem is, when i transfer that value to the HTML page, obviously the "Enter" key doesn't work like the "br" tag, so i made a simple javascript to replace the "enter" for the "br". It worked, but when i send the e-mail my ID is changed and they put an "x_" prefix, so there goes my question.
Can i stop it or there is some other way to do it?
The code is below:
<p id="informacoes">
TEST
TEST
</p>
<script>
var strMessege = document.getElementById('informacoes');
strMessege.innerHTML = strMessege.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />');
</script>
It seems like your end goal here is to retain original line breaks present in the source code. I think your best bet would be to address this using CSS.
Take a look at the CSS property white-space, MDN: white-space property
By default, CSS collapses white space (e.g. multiple non-breaking ("regular") spaces, tabs, and newlines) into, effectively, a single regular space. In your example, the line breaks that you see in the source code are being collapsed and so they will not be rendered by the browser or email client.
Try using CSS to set a different white-space property, like
#informacoes {
white-space: pre-line;
/* depending on your use case,
a different value might work better */
}
Property values other than white-space: normal (which is the default) will change whether and how white space, including new lines, are collapsed when rendering from the source code to the screen.
In the ckeditor, firstly I want to use set data that the text color is black, and than I want to set text color to be red.
var editor = CKEDITOR.replace("editor");
editor.setData ('msg');
editor.addCss({body:{color: #FF0F0D;});
But it does not work, what should I do?
Like your other question, this is very basic JavaScript and I suggest you run through some tutorials just to get you up to speed. In the CKEditor manual entry for the addCsss function, you can see that the argument for addCss is a string of CSS, but you are trying to give it something else as an argument. In JavaScript, strings are delimited with the " or ' charter.
Try editor.addCss("body{color:#FF0F0D;}");. Note that I encosed your CSS rule between quotes and fixed it to be valid CSS.
Manual is at http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss
We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas
I am using the textarea for my web page.
It is similar to RichTextEditor.
Now i want to get the code for that text entered with its style and value of the text using JavaScript... so please can anyone help me.
I am able to extract only value but not style of the text..so how can I get the style also with text value...
Style all by itself won't tell you what you want. You need to ask for a child of 'style'. Something like:
var textarea_style = getRefToDiv( 'id_of_the_textarea' ).style.the_style_attribute_you_want;
For example, style.fontWeight, style.lineHeight, and so on. BTW, the styles you set with CSS:
font-weight: bold;
in JS are named by deleting the dash and capitalizing the word after it, so in JS it's fontWeight.
My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.
You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.
I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")
The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.