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
Related
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 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.
I'm using Magento with TinyMCE, and currently it does not support assigning custom CSS class to anchor element through user-friendly interface:
I tried adding this:
extended_valid_elements : "a[name|href|target|title|onclick|class]"
to setup.js, to settings var, but it didn't help.
How would I add custom class to <a> element in tinymce?
Thanks
ADVlink supports only classes for the starting point of the anchor - here is it possible to chose a class from a pulldown, but not for the target.
Yes, it is possible at least in TinyMCE v4. The option you are looking for is called visual_anchor_class. All you have to do is to add the following line to your TinyMCE configuration:
visual_anchor_class: 'my-custom-class'
And all anchor links you create will get a class 'my-custom-class'.
(Manual: https://www.tinymce.com/docs/configure/content-appearance/#visual_anchor_class)
I would do it using a custom rightclick menu and an own popup.
A bit late but have you tried the advlink plugin? This provides a dropdown for css classes, that you can define in the settings with advlink_styles:
http://www.tinymce.com/wiki.php/Plugin3x:advlink
You can use link_class_list https://www.tiny.cloud/docs/plugins/link/#link_class_list
Example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "link",
menubar: "insert",
toolbar: "link",
link_class_list: [
{title: 'None', value: ''},
{title: 'Dog', value: 'dog'},
{title: 'Cat', value: 'cat'}
]
});
I am looking to add a title to the Kendo UI grid toolbar and align it left. Is there some way I can add an h2 or h3 to this area?
Also to style just this toolbar can I access the style property? ( I want to put a darker color/gradient to the top and bottom (where pagination is))
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
The class that identifies the Kendo Grid toolbar is k-grid-toolbar. So for styling it, you might use:
#grid .k-grid-toolbar {
background: red;
}
For adding some content to the toolbar, you can use:
$(".k-grid-toolbar", "#grid").prepend("<h1>hello</h1>");
or
$(".k-grid-toolbar", "#grid").before("<h1>hello</h1>");
$(".k-grid-toolbar", "#grid").after("<h1>hello</h1>");
depending if you want to add the HTML inside the div containing the buttons before or after it.
And grid is the id of the div containing the grid.
In Kendo-MVC parlance, the solution is quite simple:
#(Html.Kendo().Grid<MyGridsViewModel>()
.Name("MyGridsName")
.ToolBar(toolbar => toolbar.Template("<h4>My Grid's Title</h4>"))
.DataSource(datasource => ...
This works fine until you start getting crazy and attempt to use the Create/Custom buttons builders with the toolbar lambda.
In that case, the buttons are never rendered. The solution there is to use one of the other approaches identified in this thread: http://www.telerik.com/forums/custom-command-button-in-toolbars