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.
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 could I add a style using CK Editor ?
I want to create a style which I will use it in the class attribute on the liferay editor .
For example -
In the page javascript section
CKEDITOR.XXXX(// add style class for red color called 'myRed')
and then in the editor -
<p class="myRed">Text</p>
would give red text .
Place in your theme:
.myRed {
color: red;
}
Then only include the class in source mode of the editor like you described in your question:
<p class="myRed">Text</p>
that's it.
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 am using the following code to add ckeditor to my pages.
<textarea class="ckeditor" name="editor1"></textarea>
I would like to define a few toolbar configurations as not all of the textareas in my application need a full toolbar.
I have customized the default toolbar configuration for my needs, but would like to break this down even further to a more basic toolbar for some of my textareas.
Is there a way to do this if I am using the class attribute to set ckeditor?
It's not possible to have different configurations for editors created by class name. In such case, only the global CKEDITOR.config is considered.
Still there's easy workaround for this problem. First, put this script in the top of the document:
<script>
CKEDITOR.replaceClass = null; // Disable replacing by class
</script>
Now define the data-custom-config property (as config.customConfig) for each <textarea> you want to replace like this:
<textarea class="ckeditor" data-custom-config="myCustomConfig.js">
Moo
</textarea>
Finally use the following code to manually replace editors by class name (assuming your class is ckeditor). This code will replace all textareas of the class ckeditor with CKEditor instance driven by the config defined in data-custom-config attribute:
var textareas = Array.prototype.slice.call( document.getElementsByClassName( 'ckeditor' ) ),
textarea, cfg, customCfg;
while ( ( textarea = textareas.pop() ) ) {
textarea = new CKEDITOR.dom.element( textarea );
cfg = {};
if ( ( customCfg = textarea.getAttribute( 'data-custom-config' ) ) )
cfg[ 'customConfig' ] = customCfg;
CKEDITOR.replace( textarea.getId(), cfg )
}
And now comes the cherry on the top. Put your custom toolbar config in myCustomConfig.js:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
];
};
Of course you can modify this code to involve jQuery for easier element selection, use some object literal instead of config.customConfig and so on. This is just a showcase of how the problem can be solved.
I'm using CKEditor as part of the WYGWAM plugin for ExpressionEngine, but at the core my issue is a CKEditor issue.
I have some custom HTML markup for certain UI elements and thus far have had no problems using the templates_files and CKEditor 3 Templates to use them.
However, for some reason, not all the markup of each HTML template is being preserved. In the following case with applying expand/collapse accordion list, the first "toggler" isn't preserved when going to the next < li > item.
The code:
CKEDITOR.addTemplates( 'default',
{
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( '../../../../wygwam_assets' ) + 'template-thumbs/' ),
// Template definitions.
templates :
[
/* toggler */
{
title: 'Expand & Collapse List',
image: 'testing.png',
description: 'Create a collapsed list of expandable items. When each title is clicked, the content below will animate open and reveal the full content.',
html:
'<div class="toggle_wrap"><ul>' +
'<li><div class="toggler">ITEM_TITLE</div><div class="togglee">ITEM_CONTENT</div></li>' +
'</ul></div>'
}
]
});
Oddly enough, when pressing enter at the end of the last line for the < li >, the next item on the list is added with the following output:
<li>
<div class="togglee">
</div>
</li>
The togglee div is there! But why oh why not the toggler?!
See if setting allowedContent to true in your config for CKEditor makes a difference. This is used to strip style and class attributes etc. so basically strip out content that is not allowed by default.
e.g.
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true;
};