I have a CKEditor used to edit a text in a web-page.
In the web-page, the text renders in its context and therefore follows the page CSS formatting.
My question is how to tell CKEditor to apply a CSS style-sheet to the editor rendering ? Without of course changing the generated source ?
My code :
<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'actu-content' );
};
</script>
and my CSS :
.ActuContent{
padding:10px 10px 10px 10px;
color:#416a8b;
font-size:1.6em;
}
And my CKEditor Config.js file only contains the toolbar config.
CKeditor does not apply the settings of ".ActuContent" to its rendering ...
The actual best answer to this question would be:
CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');
Because you probably would like to have different styles in different editors. If you change the main content.css like Jalil did, you would not be able to do that.
I found a very easy way to answer my question :
the content.css file in CKEditor directory !
I only had to put in the style I wanted to be applied inside the Editor :
body {
color: #416a8b;
font-family: Arial;
font-size: 18px;
font-weight: 400;
text-align: left;
}
That's all :-)
See this posting:
CKEditor: Class or ID for editor body
The solution posted by nemisj will set the class name onto the body of the editor's editable area.
You can do this in an editor onload function. Call this before you call .replace.
CKEDITOR.on( 'instanceReady', function( ev )
{
CKEDITOR.instances.e1.document.$.body.className = "foo";
});
Sometimes when I need to set some styles to the CKEditor on the fly, for example depending on user settings, I use setStyle() and setStyles() functions on the editor's body object. Sample code:
var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);
Another sample:
var editor = CKEDITOR.instances.editor1;
var styles = {
"font-family": "Arial",
"color": "#333"
};
editor.document.getBody().setStyles(styles);
CKEditor uses a DIV with normal HTML elements to represent the text you're editing. Just have a look at the content of this DIV and write a appropriate style sheet.
Of course, this only works if you don't modify the output of CKEditor before you render it.
If you change content.css file you may discover that it's been cached. It's not a trivial task to refresh it in your browser since CKEDITOR.timestamp is added only to js files. I came up with the following solution:
// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;
Related
Suppose I have a CSS file custom_style.css and a HTML file custom_render.html.
custom_render.html contains some input field to take input from user and than generates CSS styles based on those input.
Now I want to store those generated CSS styles in a CSS file called custom_style.css [that is located in my projects root directory], so that I can show the users a preview/output of their selections.
After googling I got a way to store those generated CSS in the same file [custom_render.html] using JavaScript, but I want to store them in custom_style.css.
Can anyone tell me how can I write CSS Styles in CSS files using JavaScript or other JavaScript framework.
- Thanks
Well, you can modify the parameters of objects in your stylesheets. For example:
document.styleSheets[i].rules[j].style.marginTop = "100px";
i being the number corresponding to the sheet you want to edit
and
j being which element rule you want to change the parameter for.
In this case I used marginTop as a paramater and 100px as a value but it could be whatever valid CSS you would like.
simple... (assuming this is what you trying to achieve)
var elem = document.getElementsByClassName('target_class');
// should use for loop to assign click event to each element containing this class
elem[0].onclick = function() {
elem[0].style.background = 'green';
elem[0].style.opacity = '0.2';
}
<div class="target_class" style="width: 200px; height: 200px; background: red"></div>
insertRule(rule, index)
This will inserts a new rule to the stylesheet, where the parameter "rule" is a string containing the entire rule to add (ie: #myid{color: red; border: 1px solid black}), and "index", an integer specifying the position within cssRules[] to insert the new rule.
document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) //add new rule to start of stylesheet
Iam new to javascript, I have given style for a div by using javascript in one js file and i want to get that style from another js file. how it is possible??
when i used
var height= $("#searchComment").css("height");
and on alerting the result it is get like 'undefined'.
if this style is given in html it returns correctly.
test1.js and test2.js are included in index.html
In test1.js ihave given styling to a div of id 'searchComment'
$( "#parentDiv").append("<div class='ui-li-desc' id='searchComment' style='height:50px; width:40 px'></div>");
and in another js file test2.js i want to get the style of div of id 'searchComment'.
how can i get this style?? please help me.
Thank you
use jquery selector and then change css:
$('.number').css({'font-size': '12px', 'text-align': 'left'});
You have to give ID for that div by using the id you can get it from other JS
Limitation :
Both js should be using in that HTML file.
Before using id of <div> you have to create that div
Ex :
test1.js
$("#commentList").append(<div class='number' id="mydiv" style='font-size: 18px;
text-align: justify; direction: rtl; float: right; width: 12%; padding-top:75px;'>
some Variable</div>);
test2.js
document.getElementById("mydiv").style;
You can change of any elements style from any file, But the standard practice is to add class instead of changing style of an element. To add class you can use .addClass('new-class') jQuery function. And put all your style for new class in separate CSS file. And if you just want to add style anyway without caring about standard, then you can use .css jquery function.
$(".number").css({
'attribute1': value,
'attribute2': value,
});
i think you want the description of the css class use. refer the post
function getStyleRules(className) {
var class = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < class.length; x++) {
if (class[x].selectorText == className) {
(class[x].cssText) ? alert(class[x].cssText) : alert(classes[x].style.cssText);
}
}
}
getStyleRules('.YourClassName');
click here
I have a things inspector and this things inspector has two titles. I wan to be able to change the css on this titles and make their font size a bit smaller( default fontSize is 16px and I want to drop it to 12px). I tried to get these titles class and use this method to change their size:
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
it does work and I can see the change but as soon as the page finishes loading ( page loading takes couple of second because it needs to read a json object) title sizes go back to its default.
I dont even know this is a right way to access DOM elements and change their CSS.
Please point me to the right direction of how to change DOM object css in SAPUI5 in general
You could create a new CSS file which you include in your index.html.
Just add the needed selectors with the modified attributes in this custom CSS:
.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
font-size : 12px;
}
Edit: if you need to change it programmatically, you could use the addStyleClass("yourStyle") method which is available to every UI element
Execute the script after dom gets completely loaded. Try like this
$("document").ready(function()
{
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
})
$("document").ready(function()
{
$(".sapUiUx3TVTitleSecond").css("font-size","12px");
})
Directory Structure:
index.html
--admin
----suit.css
And the part of the css file is:
#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}
I want to write a javascript code in the index.html:
<button onclick="">Change CSS</button>
to change the css file like this:
#suit-left { display: none; }
.suit-columns { padding-left: 0; }
How can I do this?regards,thanks a lot
If you want the apply css on particular element by javascript, do something like this.
<button onclick="changeCss()">Change CSS</button>
UPDATE
<script>
function changeCss(){
var suitInput = document.getElementById('suit-left');
suitInput.style.display = 'none';
//UPDATED the answer
var siteCol = document.getElementsByClassName('suit-columns')[0];
siteCol.style.paddingLeft = '0';
//siteCol.style.paddingRight = '0'; //incase of want padding right 0
}
</script>
What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.
Here is a simple example:
.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }
In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.
In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.
I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -
Add class to given element
Using an HTML button to call a JS function
You can write the script in this way and paste below script at head block of index.html
I assume that you have knowledge of jquery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
function ChangeCss(){
$('#suit-left').css('display','none');
$('.suit-columns').css('padding-left','0');
}
<script>
<button onclick="ChangeCss();" >
Now it will help!
So basically using css function of jquery you can change css/style attributes.
I hope it will help you.
I have the following HTML code:
<style>
.thing { color: red }
</style>
<p class="thing">This is a nice thing</p>
I would like to change the ".thing"-style for all current content and all future content which comes to the page via AJAX.
$('.thing').css('color', 'blue');
This would work, but if new HTML code is added to the document via AJAX, all ".thing"-elements will still be colored red.
What I want is to change the whole style property ".thing" for the document and not only for the current elements (with a jQuery selector).
Thanks!
You could add a style rule in the header with the DOM
Demo: The Problem
Demo: DOM Mutation Solution
var newStyles = document.createElement("style");
newStyles.type="text/css";
newStyles.innerHTML = ".thing{color:blue}";
document.head.appendChild(newStyles);
You could use a call back function on your AJAX code to run the jquery css function.
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$('.thing').css('color', 'blue');
}
});
If for some reason you are not able to use any of the techniques given in the duplicate question, you could modify the stylesheet itself, for example:
document.styleSheets[1].cssRules[0].style.color = "blue";
However, the above line is not cross browser (I don't think it will work in IE, which prefers rules instead of cssRules) but it's possible to make it cross-browser compatible with a bit more code.
All it does is change the actual stylesheet, so it's like you had color: blue in there all along. This will affect elements currently on the page, and any that are added in the future (see the fiddle for a working example).
Note that you'll have to modify the indexes to suit your page. The indexes used in the example are just what work for the given stylesheet on jsfiddle.net.
Edit an attempt at a cross-browser solution:
var cssRules = (document.styleSheets[1].cssRules) ? document.styleSheets[1].cssRules[0] : document.styleSheets[1].rules[0];
cssRules.style.color = "blue";
You could add a style rule for blue text
<style>
.thing { color: red }
.thing.blue { color: blue }
</style>
and add "blue" class via call back function on your AJAX
$('.thing').addClass('blue');