What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:
text <span class="fg red">colored text</span> text
and
text <span class="bg blue">colored background</span> text
Clicking into colors have to change color of a span with fg class (and background colors - bg class)
How can I achieve this?
First of all you have to add your own buttons. Check source of any plugin that does this - e.g. basicstyles/plugin.js. You've got to create command for each button and then register all buttons. Simple.
Then I propose to use our styles implementation. It allows to apply/remove defined style from the given selection/range. In the style definition you can specify that it will apply span element with given classes. Check this style definition.
And the last step - join these things together. Command associated with button should apply/remove this style. There's ready to use one - check CKEDITOR.styleCommand usage here.
Everything you need is in basicstyles plugin, so just refer there.
Pozdrawiam :)
If you're flexible about the interface, you could just add your styles to the "Styles" selector.
It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.
You're welcome to use the plugin from the answer where you asked me to look at this question.
It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
You would have multiple calls to the addButtonCommand method.
addButtonCommand( 'Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue );
The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.
Related
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;
}
I have a JavaScript color picker linked to a text input. I would like several colored elements on my to change their color on the update of that color input. I could create several classes, one for each color (blue, red, green, etc), but i would like to have the whole 24 bits coloe palette, not just a few of them.
Is it possible to modify the value of the properties associated to a given CSS class ? If yes, will modifying these values apply new values on the rendered page in real time ?
Thanks in advance :)
Totally possible, and yes it will be updated in real time.
Here is a function to do the class property update, tied to a mouseover event (requires jQuery 1.0+). Mousing over div with id myDiv will update the CSS background color to white for all div's with class myColorDivs:
$('#myDiv').mouseover(function() {
$('.myColorDivs').css('background', '#fff');
});
Sorry, i'm late ...
Had the same question some days before and didn't find a practical answer.
Here's how I solved it for me (requires jquery):
Add an inline-stylesheet after all other stylesheets your page may need with the class you want to change.
Assign a TITLE Attribute to this stylesheet!
<style title="tomrulez" type="text/css">
/*the stylesheet to change - Note the TITLE*/
.shaded{
color:green;
}
</style>
Add this function:
function modCSS (stylesheet, rule, attrib, newval){
$.each( document.styleSheets, function( skey, svalue ) {
if(svalue.title==stylesheet){
$.each(svalue.cssRules,function (rkey,rvalue){
if (rvalue.selectorText==rule){
rvalue.style[attrib]=newval;
}
});
}
});
}
call it like this:
<div onclick="modCSS('tomrulez','.shaded','color','red')"> click here</div>
Parameters are:
stylesheet -> the TITLE of the last stylesheet on your page
rule -> The CSS-rule you want to change
attrib -> The attribute of the rule you want the change
newval -> The new value you want to assign to that attribute
I've tested this with Firefox, Chrome and IE10.
IE may not work in older Versions. But I develop mainly backends for a small group of users that do not use IE if i tell them (Yep, i'm a lucky about that!)
Btw. Here is a Plunker that works for me: http://plnkr.co/edit/EMDpjU06U2p83Df8Lolq?p=preview
I am using Twitter Bootstrap and the uploadify library.
I have got the button uploadify creates styled using buttonClass: 'btn btn-primary' and I resize the object (which does not take into account padding etc by itself) using:
var uploader = $('#document_upload_'+variant_id);
var button = $('.uploadify-button', uploader);
var swfobject = $('object', uploader);
swfobject.css({
height: button.outerHeight(),
width: button.outerWidth()
});
Which all works great, the only problem is that we lose the hover styles on the button.)
So, we need to style the button using it's hover styles when the object is hovered over.
I am aware that the below won't work:
swfobject.hover(
function(){button.mouseover();},
function(){button.mouseleave()}
);
But as this is being used in a general setting, where all the sites are using bootstrap, but they are styled differently (and I cannot modify the core bootstrap files) I cannot simply apply another class, that has the same as the hover pseudo classes.
So, is there a way in jQuery to copy an elements "hover styles"?
Is there a way in jQuery to copy an elements "hover styles"?
Not easily. You could listen to jQuery.hover() and use jQuery.css() to get the custom CSS, iterate over styles in document.styleSheets or you could try a library like jss:
jss('.button:hover').get()['color']
JSS JSFiddle: http://jsfiddle.net/7kEJ9/2/
I'm sorry if this question has been asked before, I've tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I'm not that great at this JavaScript stuff)
Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:
<span class="custom-font"></span>
I've tried using the below in the "config.js" file, but it doesn't seem to work:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span'
config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } };
Can anybody point me in the right direction here?
The "format" only deals with block level elements so you can't use that to add span tag around selected text. You need "style" to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That's where the default styles are defined. Also, you need to add "name" attribute to the object.
{ name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} }
If you want to make a list of your own styles to replace defaults you can find details HERE.
According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.
need a quick help here. I have a series of hyperlinks all with the same class name. I want that when I click on anyone of the links - the background colors of all the other hyperlinks change except the link I have clicked.
$('.className').click(function() {
$('.className').not(this).css('backgroundColor', '#ccff00');
});
Another option here.
Jquery Visited Plugin
Define a CSS class "visited". And then..
$('#sidebar a').visited().addClass('visited');
I would create another class that has the new background color and apply it to all except the one that was just clicked.
$('.first_class').click(function(){
$('.first_class').not(this).addClass('new_class')
});
$("a").onclick(function () {
$(this).css("color");
});
With jQuery you can alter the CSS settings directly - so just build a function, choose a trigger (onclick, mouseover etc.) and you can alter the CSS settings...