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.
Related
I use "CKEDITOR.stylesSet.add(...)" in a custom .js for my CMS. I can add custom styles for headlines, p-tag, ul here...but how can I add a "div", so that two children div will be in it?
I start to add a "div" in this way:
CKEDITOR.stylesSet.add("ifmstyle", [
{
name: "Custom DIV",
element: "div",
attributes: {
class: "custom-div",
},
},
]
..that means, that I have a div where I can place images, p-tags, a-tags for example. But I would like to make it like this (My custom div will have two children divs):
Custom DIV
children-div1
children-div2
image example
You're basing your code on this doc page, right?
https://documentation.bloomreach.com/14/library/concepts/document-types/html-fields/customize-ckeditor-styles.html
This is about the content perspective. You can change styling there but you can't change the markup unless you fork/rewrite some underlying Wicket code.
HTH
Jeroen
BTW community.bloomreach.com is more active then SO here
how do i make admin on rest main grid labels in regular case .as my application requires too many columns in the grid and all together it looks very bad and messy .i have created an en.json file and it's taking the value from there that is if the property is channelType and I have given in en.json as "channelType": "Channel ", its showing "CHANNEL" itself in the grid but I want it to be in regular case such as "Channel", what should I do
You can use the style property on the Datagrid component. See the documentation
const styles = {
header: {
textTransform: 'none',
}
}
<Datagrid styles={styles}>
Is there any option in ckeditor by adding a css class by selecting a paragraph?
My requirements are that I have lengthy text in the field with some paragraphs. One of paragraph I want to change the style through css. So for that I want an option in the ckeditor toolbar from where I can add a css class to a paragraph, not from source and editing the html.
Like currently there is an option for the "Normal (DIV)" in the Format dropdown. Can I add another option in this dropdown with "DIV with class test" and it will add a div with a test css class?
Adding Styleset to ckeditor config. but it only add style attribute to div not class.
CKEDITOR.stylesSet.add('CustomStyle', [
{ name : 'TxtDanger', element : ['p','div','h1'], styles : {'color' : 'red' } }
]);
CKEDITOR.editorConfig = function( config ) {
config.stylesSet = 'CustomStyle';
};
Now you Can Get 'TxtDanger' style in your ckeditor style dropdown. But, 'CustomStyle' is replace your default ckeditor styles(Paragraph, Heading1,2..). so first add all default style into your 'CustomStyle'. here list of default styles.
I have a webpage that contains a <main/> div that I am using as a dropzone. That div is covering most of the screen, and I do not want fine-uploader to modify the CSS of this specific div.
When a file is dragged onto the page, I would like to interactively display an help page. That help page is an hidden div floating above the page. I'd like to instruct the DragAndDrop module of fine-uploader to use <main/> as a dropzone, and to control (either by adding a CSS class, or better some of my Javascript code) the other hidden div.
For now the code looks like:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: document.getElementsByTagName('main'),
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFilesComplete: function(files, dropTarget) {
fineUploaderBasicInstance.addFiles(files);
}
}
});
where fineUploaderBasicInstance is an instance of qq.s3.FineUploaderBasic.
I tried adding a second item into dropZoneElements (the hidden div); but the approach has two issues: first the CSS code gets very messy in my case, and display:block is added to <main/> (https://github.com/FineUploader/fine-uploader/blob/master/client/js/dnd.js#L251 ?) on Chrome, which breaks my layout – again here <main/> should only be the dropzone, not an element that is being modified.
Is there a way to change the behaviour of the DragAndDrop module to control a separate div (for example by having a callback on dragover)?
There's no need for JS control over the help block. CSS can easily do the job as it follows using the tilde / squiggle (~) selector (if it's not exactly next to main. In case it is, use the adjacent (+) selector) :
HTML Code:
<div id="main">... your code ...</div>
<div id="help">... help notes ...</div>
CSS Code (if help div is next to main, as stated above, use +, if not, use ~):
main.cssClassToAddToDropZoneOnEnter + #help {
display: block;
/* and other css properties when shown, maybe a transition effect or something */
}
I want to change the pointer to hand when hovering over jqgrid's rows
Is there an API for that?
This can be done more easily using the classes colModel property as below:
{ name: 'Email', index: 'Email', classes: 'pointer' }
From the wiki:
This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
I just add this into my css file
#mygrid .jqgrow{
cursor:pointer;
}
Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter
Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).
Snippet of my grid object:
colModel :[
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor},
pointercursor is a function name. The code for it is defined like this:
// Custom formatter for a cell in a jqgrid row.
function pointercursor(cellvalue, options, rowObject)
{
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>';
return new_formatted_cellvalue;
}
My CSS class of "pointer" is:
.pointer {
cursor: pointer;
text-decoration: underline;
}
That's it!
in css file put this:
.ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }
It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.