CKEditor styles dropdown: add class to the selected element - ckeditor

What I'm trying to do in CKEditor is to add some custom styles that should apply on several elements. Each of my element (title from h2 to h6, plus link a) must have 3 itemizations that only changes color.
To avoid describing each style one by one: H2 Red, H2 Blue, H2 Green, H3 Red, H3... I wanted to select the element as usual from the Format list, then the itemization from the style list. I would have 3 styles: Red, Blue, Green, that could apply to the selected element by simply adding a class, not by defining itself the element.
Is it doable?
I considered using a custom color list (http://docs.ckeditor.com/#!/guide/dev_colorbutton) but colors are added "on-the-fly" with the color code, therefore when your site coloring changes, you can't simply change 3 classes color property, you have to modify all your authored texts, what I don't want, and which is honestly less elegant.
I tried to setup a style like this, without a specified element (I'm under Drupal but we don't really care):
if (typeof(CKEDITOR) !== 'undefined') {
CKEDITOR.addStylesSet( 'drupal',
[
{
name : 'Blue',
attributes :
{
'class' : 'color-blue'
}
},
{
name : 'Green',
attributes :
{
'class' : 'color-green'
}
},
{
name : 'Red',
attributes :
{
'class' : 'color-red'
}
},
]);
}
But it doesn't work, a span is automatically added.
Thanks for your help!

Duplicate of http://ckeditor.com/forums/CKEditor/Adding-class-to-the-current-text-block-regardless-of-the-elementtag
No answer neither since a year, so it should not be doable...

Related

Override class in ActiveAdmin index

I am using ActiveAdmin Flat Skin as template and I want to highlight some rows of the index page depending on an attribute of the row. The index page shows even odd rows displaying even rows with a light gray. Depending on this available attribute I want to display them with a light red.
I got the following partially working:
index row_class: ->elem { 'red' unless elem.available } do |dog|
In my active_admin.scss I have the following
.red {
background-color: #f7b9b9 !important;
}
But the rows that have the light gray are not being displayed in red. Any ideas?
Here is how it looks right now. The ones that say "[NO EN ADOPCION]" should all be in red.
Even if I inspect the element and add an inline style="background-color: red !important" the background does not change.
Try changing the css to:
tr.odd, tr.even {
&.red {
background-color: #f7b9b9 !important;
}
}

How does addStylesSet interact with the contents css?

I have redirected the contents.css file for my CKEditor 3.6 to my site's stylesheet:
CKEDITOR.config.contentsCss = '/css/style.css';
Now I'd like to add some styles from that stylesheet into the dropdown box for users to select when editing content. The previous developer created this:
CKEDITOR.addStylesSet( 'cms_styles',
[
{
name : 'Page Header',
element : 'h2'
},
{
name : 'Page Text',
element : 'p'
},
It appears to work, but makes very little sense to me. Where do these get their style from given that a class name cannot have spaces? Why is an element being specified if we're just adding styles to the dropdown? Google turned up no good results for addStylesSet, and the developer guide I found (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles) really wasn't very specific.
I do not want to display all available classes; just a few that we define.
The name property on the style objects is only used for display purposes, it does not make it into the content in any way. What the previous developer created works because those styles are just specifying the element, and the css likely has styling defined using those element specifiers.
The element property is being set so that CKEditor knows how to apply that style to the content. If you have a style with the element property having a value of p then that style will become a block style and will apply to the currently active p block in the content. If the element property has a value of span then the style would be applied to the selected text only (it would be surrounded with a span element if one didn't already exist).
To get styles in the dropdown to represent classes in your external css you need to add the style objects to the styles set and have it set the class attribute of the element the style is being applied to. By setting properties on the attributes property of the style object you can have CKEditor add or modify attributes on the element that it is applying the style to. For our purposes we want to set the class property of the attributes property in order to have the class defined in your css applied.
CSS:
p.myBlockStyle {
font-size: 32px;
}
CKEditor stylesSet array:
[
{
name: "My Block Style",
element: "p",
attributes: {
"class": "myBlockStyle"
}
}
]
Note that the class property has it's name quoted because class is a reserved keyword.

Is there a way to stop a Command Button cell from highlighting in KendoUI grid?

So I have a standard KendoUI Grid. Works great. I have highlighting set to "Row". Works great.
At the end of each row is a cell with two command buttons (Edit and Delete), and I would like to NOT have that cell highlighted when selected.
Anyone have ideas?
Thanks to all in advance.
Changing the style for just the cell containing buttons is a little tricky since you need to reenable the default styles and that depends on KendoUI style and then you need to apply to the cell.
One way of doing it to the cell containing the buttons is defining this cell as:
{ command: ["edit", "destroy" ], attributes: { "class": "ob-style" } },
Where I add an attribute to the row that is class: "ob-style".
For re-applying the styles, you should check the styles and then apply it to both row and alternative row. Something like:
.k-alt .ob-style {
background-color: rgb(245, 245, 245)
}
.ob-style {
background-color: rgb(255, 255, 255)
}

CKEditor config.stylesSet

I'm trying to get the dropdown styles option in CKEditor V4 configured. My test, shown below, does not work as expected. The dropdown style menu its self does display the "Green Check" option (label and the image used in the style) but its not applied to content of editor instance when used. I'm using the new inline editing feature (way cool it is too).
config.stylesSet = [
{ name: 'Green Check', element : 'ul li',
styles :
{
'background' : 'url(/images/bullets/greencheck.png) no-repeat top left;',
'list-style-type' : 'none;'
}
}
];
I specified the element element : 'ul li', because 'ul' obviously targets the ul element but when 'li' is specified, I get nothing in the dropdown menu or applied to content.
Here's more or less the complete style that I'm trying to configure...
ul.greencheck li{
list-style-type:none;
line-height:18px;
background: url(/images/bullets/greencheck.png) no-repeat center left;
padding-left:30px;
}
Any help gratefully received.
'ul li' isn't a valid element, you can use either 'ul' or 'li' but not both
You should remove also the ending semicolon in the styles 'none;' isn't valid, 'none' is the correct one
and instead of setting the inline styles it would be better to just apply a class to the UL and leave the styles to a separate css file.

jqGrid Custom Formatter Set Cell wont work with options.rowId

Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.
function StatusFormatter(cellvalue, options, rowObject) {
if (cellvalue == 'C'){
jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
}
return cellvalue;
};
The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.
EDITED-
I tried the answer, and it seems to be what I need. I tried the following
{ name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},
To aleast make them all red before I dove into the logic, and it didnt do anything for me.
Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.
If you want to set text color on the SOORDLINE cell you should cellattr instead:
celattr: function () { return ' style="color: red"'; }
The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.
Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.

Resources