No way to set default alignment for images or tables. #8502

burtonator · 2020-11-22T21:13:22Z

When you insert images / tables there's no way to pick the default alignment.

I looked at the alignment for images and there is a 'styles' which has an isDefault property but that's not actually working.

I also can't find any documentation on how to do this with tables either.

Mgsy · 2020-11-23T07:35:25Z

Hi! By default, all widgets (tables, images, media embeds) are displayed in the centre of the editor. However, you can simply change this behaviour with CSS - for example, refer to the .table element and define your desired styling.

burtonator · 2020-11-23T17:31:44Z

@Mgsy I think that's true and I can take a look but the issue I think is that if I adjust the styling then setting the position in ckeditor doesn't really work.

runepedersen-visma · 2021-02-05T13:29:16Z

Would love to get some alignment options here. If not, atleast have left align as default.

jensen-lin · 2021-02-05T14:29:06Z

Our users is giving us feedback that they need to have tables and images left aligned as default

jensen-lin · 2021-03-08T09:14:21Z

If we add css to make tables always align to left by default, the middle-alignment button in "Table properties" will no longer be working.

When switching between alignments from "Table properties" modal, html is adjusted as follows:

When left-alignment
When middle-alignment
When right-alignment

so when middle-alignment is chosen, our custom css will make the table align to left.

Reinmar · 2021-03-18T11:39:03Z

TODO:

Document how to define which of the image styles is the default one. AFAIK it's doable now as it's under our control whether it's the left/right/center style that doesn't apply a class. However, it's only possible when you define your custom styles. If you use existing ones, that's not doable. Thus, let's document that you can do it via custom styles and for now that's it.
As for tables – let's allow defining which of the options left/center/right does not set the style. Same mechanism (configuration paradigm) could be then also added to table cell alignment.

pomek · 2021-03-19T14:05:06Z

Image Style

In the CKEditor 5 documentation, you can find the guide about Defining custom styles for images. In the guide, you can also see the advanced configuration options that allows defining custom styles or updating existing ones.

We have three cases that I would like to cover:

Modify the default style for predefined styles
Define the custom styles
Modify the default style while using predefined and custom styles

Modify the default style for predefined styles

As mentioned in the advanced configuration options, you can adjusting predefined styles.

import customIcon from 'custom-icon.svg';

const imageConfig = {
	styles: [
		// This will only customize the icon of the "full" style.
		// Note: 'right' is one of default icons provided by the feature.
		{ name: 'full', icon: 'right' },

		// This will customize the icon, title and CSS class of the default "side" style.
		{ name: 'side', icon: customIcon, title: 'My side style', className: 'custom-side-image' }
	]
};

Based on the code above, we can modify the default style:

const imageConfig = {
	styles: [
	    // The "full" style is no longer the default one.
	    // Let's add the "image-style-full" class when the "full" style is applied.
		{ name: 'full', isDefault: false, className: 'image-style-full' },

		// As for now, images will have the "side" style applied by default.
		// Note: When the default style is applied, the `<figure>` element has no additional classes.
		{ name: 'side', isDefault: true }
	]
};

And the <figure> element when:

the full style is applied:
the image was just uploaded and the default style was used (side):

Define the custom styles

If predefined styles are not satisfactory enough, you can define custom styles:

import { icons } from '@ckeditor/ckeditor5-core';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		/* The editor configuration... */
		image: {
			styles: [
			    // The "fullStyle" style will apply the "center-class" to `<figure>` element.
				{ name: 'fullStyle', title: 'Custom full style.', icon: icons.objectFullWidth, className: 'center-class' },
				// The "sideStyle" style will apply the "side-class" to `<figure>` element.
				{ name: 'sideStyle', title: 'Custom side style.', icon: icons.objectRight, className: 'side-class' },
				// The "dummyStyle" style is marked as the default one. No class will be added to the `<figure>` element.
				{ name: 'dummyStyle', title: 'Custom dummy style.', icon: icons.threeVerticalDots, isDefault: true }
			],
			toolbar: [
				'imageStyle:fullStyle', 'imageStyle:sideStyle', 'imageStyle:dummyStyle'
			]
		}
		/* The editor configuration... */
	} )

Modify the default style while using predefined and custom styles

The ImageStyle plugin allows using predefined styles and custom definitions:

import { icons } from '@ckeditor/ckeditor5-core';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		/* The editor configuration... */
		image: {
			styles: [
			    // The predefined style "full" is no longer the default one.
				{ name: 'full', isDefault: false, className: 'image-style-full' },
				// Create the custom "sideStyle" style.
				{ name: 'sideStyle', title: 'Custom side style.', icon: icons.objectRight, className: 'side-class' },
				// Create "dummyStyle" style which will be the default one.
				{ name: 'dummyStyle', title: 'Custom dummy style.', icon: icons.threeVerticalDots, isDefault: true }
			],
			toolbar: [
				'imageStyle:full', 'imageStyle:sideStyle', 'imageStyle:dummyStyle',
			]
		}
		/* The editor configuration... */
	} )

On the attached screenshot, you can see the editor with the image styles configuration listed above after uploading an image:

The dummyStyle is applied by default.

Summary

Thanks to the ImageStyle plugin, you can customize images in the editor. However, the plugin adds or removes a CSS class from the <figure> element (that contains the image) so all adjustments must be done in the CSS stylesheet.

When the default style is applied, no CSS class is added to the <figure> element.

I hope this will help you. In the case of the table, I'll need a few days to prepare a solution.

Reinmar · 2021-03-24T08:51:09Z

TODO still in this ticket:

Check how the solution that we'll use for images (Implement individual config options for default image styles #9341) fits the configuration for table alignment and table cell alignment and other fields as well (see Default table properties via configuration #9219).
Propose a format that works for table props and table cell props features.
Let's check whether we can handle the entire Default table properties via configuration #9219. If it'll turn out that it'd increase the scope 3+ times (over what's required for the alignments themselves), then let's focus on alignments. But if it'll not require a lot more work, then we can cover all properties at once.
Do it ;)

pomek · 2021-03-26T10:58:50Z

Proposed API for defining default styles for a table or table cells:

const editorConfig = {
	table: {
		// ...other "table" options.
		tableProperties: {
			// Default styles for the entire table.
			defaultProperties: {
				alignment: 'left',
				borderColor: '#ff0000',
				borderWidth: '2px',
				borderStyle: 'dashed'
			}
		},
		tableCellProperties: {
			// Default styles for each cell in the table.
			defaultProperties: {
				horizontalAlignment: 'right',
				verticalAlignment: 'bottom',
				borderColor: '#0000ff',
				borderWidth: '2px',
				borderStyle: 'dotted'
			}
		}
	}
}

In the clear editor, after inserting the table (2x2) and adding testing content:

The editor produces the following HTML:

<p>A paragraph above the table..................................</p>
<figure class="table" style="float:left;">
   <table style="border-bottom:2px dashed #ff0000;border-left:2px dashed #ff0000;border-right:2px dashed #ff0000;border-top:2px dashed #ff0000;">
      <tbody>
         <tr>
            <td style="border-bottom:2px dotted #0000ff;border-left:2px dotted #0000ff;border-right:2px dotted #0000ff;border-top:2px dotted #0000ff;text-align:right;vertical-align:bottom;">
               <p>A1</p>
               <p>A2<br>A3</p>
               <p>(paragraph+soft break)</p>
            </td>
            <td style="border-bottom:2px dotted #0000ff;border-left:2px dotted #0000ff;border-right:2px dotted #0000ff;border-top:2px dotted #0000ff;text-align:right;vertical-align:bottom;">A2</td>
         </tr>
         <tr>
            <td style="border-bottom:2px dotted #0000ff;border-left:2px dotted #0000ff;border-right:2px dotted #0000ff;border-top:2px dotted #0000ff;text-align:right;vertical-align:bottom;">B1<br>B1<br>B1<br>(soft-breaks)</td>
            <td style="border-bottom:2px dotted #0000ff;border-left:2px dotted #0000ff;border-right:2px dotted #0000ff;border-top:2px dotted #0000ff;text-align:right;vertical-align:bottom;">
               <p>B2</p>
               <p>B2</p>
               <p>B2</p>
               <p>(paragraph)</p>
            </td>
         </tr>
      </tbody>
   </table>
</figure>
<p>A paragraph below the table..........</p>

I pushed my changes on the #i/8502 branch. You can use a manual test to play with the feature: http://localhost:8125/ckeditor5-table/tests/manual/tableproperties.html.

PS: Yes, the table can be centered even if the default style aligns it to the left side:

The same touches cells:

pomek · 2021-04-21T17:11:49Z

We were about to release the next version of the editor. Hence, we needed to prepare the project and polishing things that we wanted to show. That's why we have some delays regarding the default table properties.

The phrase "default table properties" can be understood in two ways.

The first one describes the default properties when inserting a new table into the editor, and this was implemented in #9393. Unfortunately, it does not resolve the issue.

The second describes the default properties regarding the CSS definitions on the website where the editor is used. The integrator defines its default style for tables and expects that the editor will understand it. I mean, the editor's UI will respect values defined in CSS:

And will not put these values into the model because they are marked as defaults. We do not insert default values into the model to avoid complications. If the attribute is missing, the default value should be applied.

The same rule should be applied while upcasting data (creating the editor instance over non-empty DOM element).

The working prototype is available on the branch https://github.com/ckeditor/ckeditor5/compare/i/8502-ui.

While working on the issue, I found two bugs in the engine package (related to the StylesMap), and table package (related to upcasting properties).

Border styles produced in inline styles could be more optimal #9490 – the border-* CSS selectors produced by the editor in various scenarios were invalid.
upcastStyleToAttribute() helper is called in wrong context #9536 – while upcasting attributes, some converters are called too many times.

The first one is already fixed. The second one blocks the default table properties.

Feature (table): Support for the default table properties. Read more about [the feature in the documentation](https://ckeditor.com/docs/ckeditor5/latest/features/table.html). Closes #8502. Closes #9219. Fix (engine): The conversion upcast `elementToAttribute()` and `attributeToAttribute()` functions should not call the `model.value()` callback if the element will not be converted. Closes #9536. MINOR BREAKING CHANGE (table): Clases `TableAlignmentCommand`, `TableBackgroundColorCommand`, `TableBorderColorCommand`, `TableBorderStyleCommand`, `TableBorderWidthCommand`, `TableHeightCommand`, `TablePropertyCommand`, `TableWidthCommand` requires the second argument called `defaultValue` which is the default value for the command. MINOR BREAKING CHANGE (table): The `TablePropertiesView` class requires additional property in the object as the second constructor argument (`options.defaultTableProperties`).

archasek · 2023-02-06T12:24:20Z

#13410

AliaksandrBortnik · 2023-06-29T09:03:18Z

Am I right that default properties in a config are just initial values for the table/cell configuration popup? So, they are still not used to inject them by default into HTML as inline once we just inserted a new table.

In short, those default are simply default UI popup values. That's it. Right?

niegowski · 2023-06-29T13:42:32Z

I think this should help: https://ckeditor.com/docs/ckeditor5/latest/features/tables/tables-styling.html#default-table-and-table-cell-styles

AliaksandrBortnik · 2023-06-29T13:47:42Z

@niegowski no, it doesn't. If you use the data created by CKE5 somewhere outside of your application, let's say, you send email templates.. the only option is the inline attributes in HTML. They are added when you use Table/Cell properties via popup, but default config are not applied as inline attributes based on "defaults" on load. I bet the config table default options are simply UI popup initial values, not more than it.

Witoso · 2023-06-30T07:19:24Z

Am I right that default properties in a config are just initial values for the table/cell configuration popup?

@AliaksandrBortnik this is correct. That's why there's a need to implement the stylesheet as well. TBH I find it a bit confusing as well. #1627 may be of help here when we do it in terms of the email templates (there's a proposed implementation in the comments).

AliaksandrBortnik · 2023-06-30T11:12:58Z

@Witoso thanks for your response! The confusing part is why the insert table command (toolbar button) does not leverage our default table properties... I do want to provide a default border (in HTML data, not fake CSS border style via selectors) and not force a user to manually set a border each time via TableProperties popup to achieve the same.

Sebastianyang666 · 2024-06-27T05:50:41Z

Image Style

In the CKEditor 5 documentation, you can find the guide about Defining custom styles for images. In the guide, you can also see the advanced configuration options that allows defining custom styles or updating existing ones.

We have three cases that I would like to cover:

Modify the default style for predefined styles

Define the custom styles

Modify the default style while using predefined and custom styles

Modify the default style for predefined styles

As mentioned in the advanced configuration options, you can adjusting predefined styles.
import customIcon from 'custom-icon.svg';

const imageConfig = {
	styles: [
		// This will only customize the icon of the "full" style.
		// Note: 'right' is one of default icons provided by the feature.
		{ name: 'full', icon: 'right' },

		// This will customize the icon, title and CSS class of the default "side" style.
		{ name: 'side', icon: customIcon, title: 'My side style', className: 'custom-side-image' }
	]
};
Based on the code above, we can modify the default style:
const imageConfig = {
	styles: [
	    // The "full" style is no longer the default one.
	    // Let's add the "image-style-full" class when the "full" style is applied.
		{ name: 'full', isDefault: false, className: 'image-style-full' },

		// As for now, images will have the "side" style applied by default.
		// Note: When the default style is applied, the `<figure>` element has no additional classes.
		{ name: 'side', isDefault: true }
	]
};
And the <figure> element when:

the full style is applied:

the image was just uploaded and the default style was used (side):

Define the custom styles

If predefined styles are not satisfactory enough, you can define custom styles:
import { icons } from '@ckeditor/ckeditor5-core';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		/* The editor configuration... */
		image: {
			styles: [
			    // The "fullStyle" style will apply the "center-class" to `<figure>` element.
				{ name: 'fullStyle', title: 'Custom full style.', icon: icons.objectFullWidth, className: 'center-class' },
				// The "sideStyle" style will apply the "side-class" to `<figure>` element.
				{ name: 'sideStyle', title: 'Custom side style.', icon: icons.objectRight, className: 'side-class' },
				// The "dummyStyle" style is marked as the default one. No class will be added to the `<figure>` element.
				{ name: 'dummyStyle', title: 'Custom dummy style.', icon: icons.threeVerticalDots, isDefault: true }
			],
			toolbar: [
				'imageStyle:fullStyle', 'imageStyle:sideStyle', 'imageStyle:dummyStyle'
			]
		}
		/* The editor configuration... */
	} )
Modify the default style while using predefined and custom styles

The ImageStyle plugin allows using predefined styles and custom definitions:
import { icons } from '@ckeditor/ckeditor5-core';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		/* The editor configuration... */
		image: {
			styles: [
			    // The predefined style "full" is no longer the default one.
				{ name: 'full', isDefault: false, className: 'image-style-full' },
				// Create the custom "sideStyle" style.
				{ name: 'sideStyle', title: 'Custom side style.', icon: icons.objectRight, className: 'side-class' },
				// Create "dummyStyle" style which will be the default one.
				{ name: 'dummyStyle', title: 'Custom dummy style.', icon: icons.threeVerticalDots, isDefault: true }
			],
			toolbar: [
				'imageStyle:full', 'imageStyle:sideStyle', 'imageStyle:dummyStyle',
			]
		}
		/* The editor configuration... */
	} )
On the attached screenshot, you can see the editor with the image styles configuration listed above after uploading an image:

The dummyStyle is applied by default.

Summary

Thanks to the ImageStyle plugin, you can customize images in the editor. However, the plugin adds or removes a CSS class from the <figure> element (that contains the image) so all adjustments must be done in the CSS stylesheet.

When the default style is applied, no CSS class is added to the <figure> element.

I hope this will help you. In the case of the table, I'll need a few days to prepare a solution.

This is only useful when you choose a button after users upload images,Is there any solves to set it once users upload images?cause i saw the 'isDefualt:true' isn't add any className.Even we add className ,still not work

burtonator added the type:bug This issue reports a buggy (incorrect) behavior. label Nov 22, 2020

Mgsy added pending:feedback This issue is blocked by necessary feedback. type:question This issue asks a question (how to...). and removed type:bug This issue reports a buggy (incorrect) behavior. labels Nov 23, 2020

oleq added domain:ui/ux This issue reports a problem related to UI or UX. package:image package:table squad:core Issue to be handled by the Core team. labels Mar 2, 2021

oleq added this to the nice-to-have milestone Mar 2, 2021

oleq mentioned this issue Mar 15, 2021

Default table properties via configuration #9219

Closed

Mgsy assigned pomek Mar 18, 2021

Mgsy modified the milestones: nice-to-have, iteration 42 Mar 18, 2021

lslowikowska added the support:2 An issue reported by a commercially licensed client. label Mar 18, 2021

pomek mentioned this issue Mar 31, 2021

Support for default table (and cells) properties #9393

Closed

AnnaTomanek mentioned this issue Mar 31, 2021

📃 Iteration 42 roadmap #9394

Closed

Mgsy modified the milestones: iteration 42, iteration 43 Apr 15, 2021

pomek mentioned this issue Apr 23, 2021

Support for default table properties (CSS: .ck-content) #9555

Merged

AnnaTomanek mentioned this issue Apr 27, 2021

📃 Iteration 43 roadmap #9578

Closed

pomek closed this as completed in #9555 Apr 29, 2021

archasek mentioned this issue Feb 6, 2023

Cannot set right align of all added images by default #13410

Closed

This comment was marked as abuse.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No way to set default alignment for images or tables. #8502

No way to set default alignment for images or tables. #8502

burtonator commented Nov 22, 2020

Mgsy commented Nov 23, 2020

burtonator commented Nov 23, 2020

runepedersen-visma commented Feb 5, 2021

jensen-lin commented Feb 5, 2021

jensen-lin commented Mar 8, 2021

Reinmar commented Mar 18, 2021

pomek commented Mar 19, 2021 •

edited

Loading

Reinmar commented Mar 24, 2021

pomek commented Mar 26, 2021

pomek commented Apr 21, 2021

archasek commented Feb 6, 2023 •

edited

Loading

AliaksandrBortnik commented Jun 29, 2023 •

edited

Loading

niegowski commented Jun 29, 2023

AliaksandrBortnik commented Jun 29, 2023 •

edited

Loading

Witoso commented Jun 30, 2023

AliaksandrBortnik commented Jun 30, 2023

Sebastianyang666 commented Jun 27, 2024

Image Style

Modify the default style for predefined styles

Define the custom styles

Modify the default style while using predefined and custom styles

Summary

This comment was marked as abuse.

No way to set default alignment for images or tables. #8502

No way to set default alignment for images or tables. #8502

Comments

burtonator commented Nov 22, 2020

Mgsy commented Nov 23, 2020

burtonator commented Nov 23, 2020

runepedersen-visma commented Feb 5, 2021

jensen-lin commented Feb 5, 2021

jensen-lin commented Mar 8, 2021

Reinmar commented Mar 18, 2021

pomek commented Mar 19, 2021 • edited Loading

Image Style

Modify the default style for predefined styles

Define the custom styles

Modify the default style while using predefined and custom styles

Summary

Reinmar commented Mar 24, 2021

pomek commented Mar 26, 2021

pomek commented Apr 21, 2021

archasek commented Feb 6, 2023 • edited Loading

AliaksandrBortnik commented Jun 29, 2023 • edited Loading

niegowski commented Jun 29, 2023

AliaksandrBortnik commented Jun 29, 2023 • edited Loading

Witoso commented Jun 30, 2023

AliaksandrBortnik commented Jun 30, 2023

Sebastianyang666 commented Jun 27, 2024

Image Style

Modify the default style for predefined styles

Define the custom styles

Modify the default style while using predefined and custom styles

Summary

This comment was marked as abuse.

pomek commented Mar 19, 2021 •

edited

Loading

archasek commented Feb 6, 2023 •

edited

Loading

AliaksandrBortnik commented Jun 29, 2023 •

edited

Loading

AliaksandrBortnik commented Jun 29, 2023 •

edited

Loading