ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard
verified publisher icon ckeditor

There is no easy way to apply styles to the document editable only

Open pomek opened this issue 1 year ago • 5 comments

📝 Provide detailed reproduction steps (if any)

  1. Create the following project:

    index.html 
    <!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CKEditor 5 Sample</title>
		<link rel="stylesheet" href="./style.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckeditor5@alpha/dist/browser/ckeditor5.css">
	</head>
	<body>
		<div class="main-container">
			<div
				class="editor-container editor-container_document-editor"
				id="editor-container"
			>
				<div class="editor-container__toolbar" id="editor-toolbar"></div>
				<div class="editor-container__editor-wrapper">
					<div class="editor-container__editor"><div id="editor"></div></div>
				</div>
			</div>
		</div>
		<script type="importmap">
		{
			"imports": {
				"ckeditor5": "https://cdn.jsdelivr.net/npm/ckeditor5@alpha/dist/browser/ckeditor5.js",
				"ckeditor5/": "https://cdn.jsdelivr.net/npm/ckeditor5@alpha/dist/"
			}
		}
		</script>
		<script type="module" src="./main.js"></script>
	</body>
</html>
    style.css 
    @import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.main-container,
.ck-content {
	font-family: 'Lato';
}

.main-container {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.ck-content {
	word-break: break-word;
	line-height: 1.5;
	box-sizing: border-box;
	min-width: 210mm;
	max-width: 210mm;
	min-height: 297mm;
	height: fit-content;
	padding: 20mm 12mm;
	border: 1px hsl(0, 0%, 82.7%) solid;
	border-radius: 4px;
	background: hsl(0, 0%, 100%);
	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
	flex: 1 1 auto;
	margin-left: 72px;
	margin-right: 72px;
}

.editor-container__editor-wrapper {
	display: flex;
	width: fit-content;
}

.editor-container_document-editor {
	border: 1px solid var(--ck-color-base-border);
}

.editor-container_document-editor .editor-container__toolbar {
	display: flex;
	position: relative;
	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
}

.editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar {
	flex-grow: 1;
	width: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.editor-container_document-editor .editor-container__editor {
	margin-top: 28px;
	margin-bottom: 28px;
	height: 100%;
}

.ck-content h3.category {
	font-family: 'Oswald';
	font-size: 20px;
	font-weight: bold;
	color: #555;
	letter-spacing: 10px;
	margin: 0;
	padding: 0;
}

.ck-content h2.document-title {
	font-family: 'Oswald';
	font-size: 50px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	border: 0;
}

.ck-content h3.document-subtitle {
	font-family: 'Oswald';
	font-size: 20px;
	color: #555;
	margin: 0 0 1em;
	font-weight: bold;
	padding: 0;
}

.ck-content p.info-box {
	--background-size: 30px;
	--background-color: #e91e63;
	padding: 1.2em 2em;
	border: 1px solid var(--background-color);
	background: linear-gradient(
		135deg,
	var(--background-color) 0%,
	var(--background-color) var(--background-size),
	transparent var(--background-size)
),
	linear-gradient(
		135deg,
		transparent calc(100% - var(--background-size)),
	var(--background-color) calc(100% - var(--background-size)),
	var(--background-color)
);
	border-radius: 10px;
	margin: 1.5em 2em;
	box-shadow: 5px 5px 0 #ffe6ef;
}

.ck-content blockquote.side-quote {
	font-family: 'Oswald';
	font-style: normal;
	float: right;
	width: 35%;
	position: relative;
	border: 0;
	overflow: visible;
	z-index: 1;
	margin-left: 1em;
}

.ck-content blockquote.side-quote::before {
	content: '“';
	position: absolute;
	top: -37px;
	left: -10px;
	display: block;
	font-size: 200px;
	color: #e7e7e7;
	z-index: -1;
	line-height: 1;
}

.ck-content blockquote.side-quote p {
	font-size: 2em;
	line-height: 1;
}

.ck-content blockquote.side-quote p:last-child:not(:first-child) {
	font-size: 1.3em;
	text-align: right;
	color: #555;
}

.ck-content span.marker {
	background: yellow;
}

.ck-content span.spoiler {
	background: #000;
	color: #000;
}

.ck-content span.spoiler:hover {
	background: #000;
	color: #fff;
}

.ck-content pre.fancy-code {
	border: 0;
	margin-left: 2em;
	margin-right: 2em;
	border-radius: 10px;
}

.ck-content pre.fancy-code::before {
	content: '';
	display: block;
	height: 13px;
	background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
	margin-bottom: 8px;
	background-repeat: no-repeat;
}

.ck-content pre.fancy-code-dark {
	background: #272822;
	color: #fff;
	box-shadow: 5px 5px 0 #0000001f;
}

.ck-content pre.fancy-code-bright {
	background: #dddfe0;
	color: #000;
	box-shadow: 5px 5px 0 #b3b3b3;
}
    main.js 
    import {
	DecoupledEditor,
	GeneralHtmlSupport,
	Heading,
	Style,
} from 'ckeditor5';

const editorConfig = {
	toolbar: {
		items: [
			'heading',
			'style'
		]
	},
	plugins: [
		GeneralHtmlSupport,
		Heading,
		Style,
	],
	style: {
		definitions: [
			{
				name: 'Article category',
				element: 'h3',
				classes: ['category']
			},
			{
				name: 'Title',
				element: 'h2',
				classes: ['document-title']
			},
			{
				name: 'Subtitle',
				element: 'h3',
				classes: ['document-subtitle']
			},
			{
				name: 'Info box',
				element: 'p',
				classes: ['info-box']
			},
			{
				name: 'Side quote',
				element: 'blockquote',
				classes: ['side-quote']
			},
			{
				name: 'Marker',
				element: 'span',
				classes: ['marker']
			},
			{
				name: 'Spoiler',
				element: 'span',
				classes: ['spoiler']
			},
			{
				name: 'Code (dark)',
				element: 'pre',
				classes: ['fancy-code', 'fancy-code-dark']
			},
			{
				name: 'Code (bright)',
				element: 'pre',
				classes: ['fancy-code', 'fancy-code-bright']
			}
		]
	},
	initialData: '<h2>Congratulations</h2>'
};

DecoupledEditor.create(document.querySelector('#editor'), editorConfig).then(editor => {
	document.querySelector('#editor-toolbar').appendChild(editor.ui.view.toolbar.element);

	return editor;
});

  2. Use an HTTP server to run the snippet.

  3. Click the Style toolbar component.

✔️ Expected result

image

❌ Actual result

image

.ck-content impacts the toolbar, but also other editors that are inside the root one.

❓ Possible solution

I can modify the .ck-content selector:

.ck-content:not(:is(.ck-sidebar, .ck-toolbar, .ck-body-wrapper) .ck-content) {

But it looks weird, and the integrators will not find such examples in our documentation.

pomek avatar Jun 12 '24 10:06 pomek

Problems:

  • Changing presentation styles of the root editable itself only (without affecting e.g. comments)
  • Changing presentation styles of e.g. the comments editor without affecting the root editor (e.g. adding max-height)
  • Writing content styles that apply only to the root or sub editors.
  • Styling different roots of a multi-root editor differently.

Root cause: It's hard to change editable attributes (classes/ids) – https://github.com/ckeditor/ckeditor5/issues/798#issuecomment-461378118.

Hypothesis: If we allowed setting ids/classes/other-attrs of the editable(s) of an editor via the config of this editor, we would allow simple solutions for all these problems.

Reinmar avatar Jun 13 '24 10:06 Reinmar

Another issue: Builder uses .ck-content to apply presentational styles to the editable area (width, margins, etc.)

This affected the styles dropdown preview.

We could theoretically move those presentational styles from .ck-content to .ck-editor__editable_inline (where it's much more correct). It will fix the styles dropdown preview. But this is still going to affect the comments editor.

Reinmar avatar Jun 13 '24 10:06 Reinmar

Other notes:

  • "Content styles" include e.g. font sizes, colors, margins between paragraphs. But not styles like widget borders. The former are applied by .ck-content. The latter by different selectors.
  • Whatever we'll change here we need to take export to PDF and pagination into consideration (they use .ck-content).

Reinmar avatar Jun 13 '24 10:06 Reinmar

BTW, we often used this snippet in the past (e.g. in the quick start snippets in the customer portal):

        .ck.ck-editor__editable_inline:not(.ck-editor__nested-editable) {
            min-height: 400px;
        }

And this is affecting comments too :face_exhaling:

Reinmar avatar Jun 14 '24 11:06 Reinmar

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot avatar Jun 14 '25 23:06 CKEditorBot

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

CKEditorBot avatar Jul 15 '25 23:07 CKEditorBot