ckeditor default style or class for the textarea - javascript

Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx

Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7

Related

How to add a class to a specific stylesheet?

I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.
It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.
This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");
To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.
The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.
You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.
Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Video-js custom skinning

I am using the 'less2css' css editor for customising video-js.
to save a custom skin, it states 'replace all instances of 'vjs-default-skin'with new name..
to be clear, I have to change EVERY instance of that name that i find ANYWHERE within the css file?
there is no shortcut to do this within 'less2css' "
thanks,
keith.
Hi reddog i believe this link will help u rather than editing default css add ur custom class as mentioned in below link. http://www.videojs.com/docs/skins/

Modifying :hover styling for an element with jQuery/javascript

I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.
Any help out there?
To currently apply anything I am doing the following:
$('#content a').css('color','#ffcc00');
I need to do something similar for a:hover. ie:
$('#content a:hover').css('color','#000');
If you want to make the change using javascript you can attach it to jQuery.hover().
Here's a full working example
$('a.link').hover(
function(){
$(this).css('color',$('input').val());
}
);
I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.
you can use css like assert your element´s id is
"element1"
css :
#element1:hover {
background-color:pink;
}

Need help with adding Classes to HTML Editor Elements

I'm using a WYSIWYG Editor called CKEditor and its really awesome. Inside the editor, whenever I add a new Heading/Text/DIV/Image/ anything else for that matter, I want it to stay attached with a class:
Like
<h2 class="blah">Sample Text</h2>
<img src="/abc.png" class="blah1" />
Here's a reference link:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
I'm not good with Javascript, if anyone can help me out, I would be really Grateful!
Thank you.
For example, the following code will ensure that elements will have their "alt" attribute filled:
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
img : function( element )
{
if ( !element.attributes.alt )
element.attributes.alt = 'An image';
}
}
});
Read the Overview (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor) this example was taken from there.
You can do the same for "class". Take a look at the existing output, then either add "class" if it's missing or replace them if that's your intent.
take a look at answers for this question.
customize the dialogs during the define, add a "class" field and then set and get the contents in the setup and commit functions.
look at ckeditor/_samples/api_dialog.html for background on modifying dialogs.
for the Headings you'd have to look at modifying the commands. Those don't have dialogs.
There's probably a way to always apply the same class based on the particular tag in the "data processor". Do you want to always set the same class everytime or allow the user to choose the class, that's important because it changes your options quite a bit.

Categories

Resources