I'm testing adding custom stylesSet. So in my code i add the following (per instructions in)
CKEDITOR.stylesSet.add('custom_style', [
{ name: 'No UL Bullets', element: 'ul', styles: { 'list-style-type': 'none' } },
{ name: 'My Custom Inline', element: 'span', attributes: { 'class': 'mine' } }
]);
oEditor.config.stylesSet = 'custom_style';
The problem is that it overrides the rest of the default styles that comes with CKEditor. I cant seem to figure out how to just append my new styles with the existing once. Any ideas?
You don't need to change config.stylesSet option to append your styles to default ones. You can edit the styles.js file, adding and removing styles from it. It is a configuration file just like config.js.
Update: You can set config.stylesSet directly to avoid loading styles.js:
CKEDITOR.replace( 'editor1', {
stylesSet: [
{ name: 'Big', element: 'big' },
{ name: 'Small', element: 'small' },
{ name: 'Typewriter', element: 'tt' }
]
} );
Here is an example how to replace and create new styles and classes in CKEditor 4. This is the whole content of the file styles.js:
CKEDITOR.stylesSet.add ('default', [
/* My Block Styles */
{ name: 'My Div Class', element: 'div', attributes: {'class': 'my-div-class-name'} },
{ name: 'My Div Style', element: 'div', styles: {'padding': '10px 20px', 'background': '#f2f2f2', 'border': '1px solid #ccc'} },
/* My Inline Styles */
{ name: 'My Span Class', element: 'span', attributes: {'class': 'my-span-class-name'} },
{ name: 'My Span Style', element: 'span', styles: {'font-weight': 'bold', 'font-style': 'italic'} }
]);
Edit bar:
Related
{ label: 'Name', fieldName: 'Name', type:'button',initialWidth:200,typeAttributes: { label: {fieldName: 'Name'},class:"borderRemove" },sortable: true}
//css class
.borderRemove{ border:none; }
just add variant: 'base' to typeAttributes
so in your case it should look like this:
typeAttributes: { label: {fieldName: 'Name'}, variant: 'base'}
class:"borderRemove" - should be removed
I have a page where I use CKEditor 5 with CKFinder 3.
By default, the images that are included in the textarea are responsive and can only be aligned as full or right.
The concerning page has photos of contacts on it and they shouldn't be that big.
How can I configure the width of an image that is inserted through the button of the toolbar?
ClassicEditor
.create( document.querySelector( '#pageTextArea' ), {
image: {
styles: [ { name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' } ]
}
ckfinder: {
uploadUrl: 'example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
}
})
.catch( error => {
console.error( error );
process.exit(1);
});
To provide some custom image styling you need to:
First, configure the image.styles option.
ClassicEditor.create( element, {
// ...
image: {
// ...
styles: [
// Pottentially some other style can go here. E.g. the `full` or `side`.
{ name: 'contact', icon: 'right', title: 'My contact style', className: 'my-contact-side-image' }
]
}
}
And secondly, make the image 100px wide via CSS:
.ck-content figure.image.my-contact-side-image {
float: right;
width: 100px;
}
Note that you need to handle styles of the created content outside of the editor as well.
I'm using CkEditor in a Laravel 5 project.
In the config.js under bower_component/ckeditor/ I used the following code:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.FormatOutput = false;
config.allowedContent = true;
};
Also, in the js in the related page, I used the below code:
$(function () {
CKEDITOR.replace('editor2', {
allowedContent: true,
});
});
In the HTML, I used the following code:
<textarea name="content" rows="10" cols="80" id="editor2"></textarea>
In the plugins folder under the bower_component/ckeditor/plugins, I see the "iframe" folder is exist. However, I can't see the iframe icon in the ckeditot toolbar. I configured "allowedContent" as true as mentioned above. Here is the screen grab:
What is the issue?
I have found the solution.
Open the config.js under bower_component/ckeditor and write the following code:
config.extraPlugins = 'iframe';
and voila! you will see the iframe icon on the ckeditor toolbar.
Is it possible to have multiple options in the Style menu that set their own CSS class, but are not mutually exclusive?
For example, I want to have something similar to this:
stylesSet: [
{name: 'Very Large Padding',
element: 'p',
attributes: {
class: 'very-large-padding',
}},
{name: 'Alternative Font',
element: 'p',
attributes: {
class: 'alternative-font',
}},
]
In CSS then, something like:
.very-large-padding { padding: 4242px; }
.alternative-font { font-family: "MyFont", sans-serif; }
This works, but the problem is that I cannot have both "Very Large Padding" and "Alternative Font" activated at the same time. Is there a solution to this, that involves setting styles via CSS instead of inline style attribute?
Block styles in CKEditor 4 cannot be combined. However, you can use inline elements (i.e. span):
{
name: 'Very Large Padding',
element: 'span',
attributes: {
class: 'very-large-padding',
}
},
{
name: 'Alternative Font',
element: 'span',
attributes: {
class: 'alternative-font',
}
},
which results in:
<p><span class="alternative-font">Fo<span class="very-large-padding">oB</span>ar</span></p>
or create a hybrid style:
{
name: 'Very Large Padding with Alternative Font',
element: 'span',
attributes: {
class: 'very-large-padding alternative-font',
}
},
I have added the advanced tool bar and in the toolbar groups
added {name:'styles'}
When i add the styles by default it adds two buttons Styles and Format
How do i remove some of the items from Styles ?
For eg : Styles currently has block styles like 'Italic title', 'Subtitle', etc and Inline styles like 'Marker', 'Big', 'Typewriter' etc
I want to retain the styles but want to delete just couple of elements from the dropdown eg : 'Marker' , 'Subtitle'
Thanks
This link has a similar question.
Edit:
This code block is the extract of what you need to add before initialing CKEditor.
CKEDITOR.addStylesSet( 'mystyleslist',
[
/* Inline Styles */
{ name : 'readMore', element : 'span', attributes : { 'class' : 'readMore' } },
{ name : 'BoldItal' , element : 'span', styles:
{
'font-weight' : 'bold',
'font-style' : 'italic'
}
},
/* Object Styles */
{name : 'Image on Left', element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-right: 5px',
'border' : '2',
'align' : 'left'
}
},
{name : 'Image on Right', element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-left: 5px',
'border' : '2',
'align' : 'right'
}
}
]);
CKEDITOR.config.stylesCombo_stylesSet = 'mystyleslist';
I hope this helps