js ckeditor show text color - javascript

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

Related

reading the background color in javascript doesn't work - why?

The following line of code produces an empty alertbox:
alert (document.getElementById(x).style.backgroundColor);
Of course, this is only a control, the background color would then be used in an if-clause.
The string variable x contains the id of a table data cell < td>< /td>.
x definitely exists. The line works when I test it with another style property such as document.getElementById(x).style.height.
The table cell x also has a defined background color. It was set in
javascript with
document.getElementById(x).style.backgroundColor = #00FF55
I also tested given color names like "lime", but to no avail.
Setting the background color with javascript works, reading it doesn't work.
I also tested the example here, and it worked, so it's not a problem of my browser.
I've tinkered around the good part of a working day to make this work, still have no idea.
Both the name of the id and the value after the = must be surrounded by "..."
document.getElementById(x).style.backgroundColor = #00FF55
SyntaxError: Invalid or unexpected token.
String literals must be surrounded with " or '.
document.getElementById("x").style.backgroundColor = "#00FF55";
You're failing to set the value, so it remains unset when you try to read it back.
Found the answer:
I defined the cell background colors originally in (php created) HTML:
<td ID ="x" name="nx" bgcolor=#00FF55 style="overflow: visible; border-left:1px solid grey"></td>
I tried to set the hex value in quotes after reading the comments here, but this is not even allowed in the HTML syntax.
When background color was changed via javascript it was set as style property, which worked.
But reading the set color as style didn't.
I even had tried this solution before, setting the colors as styles from the beginning, but as this resulted in unwanted behaviour of the table, I discarded it. Now I reedited the table creating code and implemented setting the colors as style properties, and everything worked out.
I still think reading the background colors when they are set, even as HTML, should be possible.

String with new line and tabs to display in HTML

I have a string coming from my java backend which is formatted to display in a certain way, the new line, tab and space characters are in certain positions.
How do I get this to display the same way in HTML?
For example, say I have the current string in Javascript as so:
var str = "\t\tTitle \n Some text \t\t\t more text";
Browsers typically strip out extra white space, you might need to put it inside a preformatted text block or use white-space: pre
var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);
Also yes, you need to use backslahes too, as mentioned about.
I might be late but just in order to help if a beginner like me is facing this kind of problem.
You can add a css class to the html tag where you want to display the data. In my case I am using ngFor of Angular 2. The data coming from my back end had line breaks and tabs. So I just added a class to the html tag with a css white-spacing style as follows.
Backend Data"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
And the css
.response-title {
white-space:pre;
}
This one do the job perfectly.
You can use textarea also. here is a Working Fiddle
MDN textarea

Adding space in a string jquery

I wanto to insert a space at the start of my string
Example:
MySite
MySite (I want this)
I have tried in this mode but nothing
txt=" "+v.text();
Can someone help me? Thanks a lot
Try :
txt=" "+v.text();
The other good solution would be to use div with some style set on it.
<div style='margin-left:15px' id='main_text'></div>
You could use jQuery to place txt in the div.
txt= v.text();
$('#main_text').html(txt);
A solution is to fill the spaces with entities, but if you have to achieve this effect just for styling/visualization purpose, then wrap that line in a proper tag and use some CSS instead (e.g. text-indent property)
if you have to indent text inside a select (as I guess reading your previous answer) you may want to wrap your options inside an optgroup element (and give it some padding)
var str2 = " Here goes your string with spaces";
There are 2 solutions below :-
1. txt="<pre> </pre>"+v.text();
2. txt="<span style='margin-left:15px'></span>"+v.text();

Hightlight substring of "text" in HTML SELECT OPTION using javascript

I have a html-select which gets populated at run time.
i.e. when i type something in html input textbox, i display the substring based results in below attached html-dropdown-listbox.
Now i want to highlight only that substring of an item in html dropdown listbox which matches with the string in html-input textbox.
e.g.
if i type "ample" in html-input textbox then it should highlight "ample"
<OPTION value=723.1> S*ample* Text </OPTION>
i have already tried to modify the innerHTML property of that html-dropdown-listbox.
I want to do it using javascript.
You cannot style the inside elements of a SELECT. It's rendered by the OS, not HTML.
Try this approach
<p id="textindrop">this is the text in the dropbox</p>
tohighlight
<script type="text/javascript">
function highlightsubstring(el) {
var theText = document.getElementById(el).innerHTML;
theText = theText.replace(/(web)/gi, "<b>$1</b>");
document.getElementById(el).innerHTML = theText;
}
</script>
Try this and see this helps you, put some logic of yours also. you can also use regular expressions for this. read about regular expression in javascript
There is a CSS3 way:
Use font-family: monospace to get equal width characters.
Use background-image to get an adjustable background.
Use background-position to set the starting position of the highlighting background in ch.
Use background-size to set the length of the highlighting background in ch.
Restrictions:
Only works in Gecko-based browsers.
Highlighting in the select too requires additional adjusting. (I did it with text-indent, finding better solution is encouraged.)
I put together a simple demo on jsFiddle.

How to extract the style of the text including the value from text area using javascript?

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.

Categories