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',
}
},
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
how do we override the styles and provide the space between the content and wrapper,
tried to add styles
const myTheme: ThemeInput = {
componentStyles: {
Menu: {
root: {
color: "yellow",
//tried to provide maring space but it is taking for whole menu, rather menuitem content
},
}
}
};
I did the following. There is still some slight jumping which I think is coming from the MenuItemWrapper. You could play around with the numbers and see if you can get the desired size. The docs are really not clear and I don't know if this approach will be removed in later versions.
<Menu underlined primary defaultActiveIndex={0} styles={{ border: 0 }}
items={[
{
key: "itemOne",
content: "ItemOne",
styles: ({ props }) => {
return {
paddingBottom: 5,
marginBottom: props.active ? 0 : 5,
":hover": {
marginBottom: 0,
paddingBottom: 5
}
};
}
},
// ...other items
]}
/>
You can use custom css for this. You need to override below class by inspecting
<span class="ui-menu__itemcontent of og oh oi bz gx" dir="auto">Editorials</span
as follow:
.oi {
margin-bottom: 0.7143rem;
}
.
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 Extjs 6.0 (with Framework Codeigniter 3.0.3).
I'm trying to get something like this:
+---------------------------+-------------+
| something | something | something |
+-------------+-------------+-------------+
| Label A| Label B |
+-------------+-------------+-------------+
I'm using table layout (Label A with colspan 2).
The problem is I need different aligning in Label A and Label B (right and center respectively).
Is there a way to accomplish this?
This is the code:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 400,
height: 200,
layout: {
type: 'table',
columns: 3
},
items: [{
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
}, {
xtype: 'label',
text: '----First Row----',
padding: 5
},{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
}, {
xtype: 'label',
text: 'Label B',
padding: 5
}],
});
For Label A, I've tried adding (without effect):
align: 'right'
textAlign: 'right'
labelAlign: 'right'
If I add:
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
textAlign: 'right'
}
}
}
Then both Label A and Label B align to the right, and that's not what I need.
you can use the following code to align Label A to the right:
{
xtype: 'label',
text: 'Label A',
padding: 5,
colspan: 2,
style:{
"float":"right"
}
},
Labels are somehow special, presumably because they are made for the purpose to be used by labelable. A label is intended to be used together with a field, and when you click the label, that field is focused. The labelable mixin of the field does the aligning (based on the labelAlign configuration), and label does not always respect the layout you ask for.
While the answer of #Saloo seems to work, it is a hack that may break in other themes and/or older browsers and/or different versions of the framework.
It would be better to use different means of displaying text. I have come to use a container with the html configuration. With a container, style:{textAlign:"right"} works as intended, and since "text-align" is a local CSS setting that does not require the browser to think outside the box, it should be safe enough to use across browsers, across themes, across framework versions.
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: