ProcessWire - Editor - Versionsgeschichte

109.193.152.88 am 3. März 2025 um 16:52 Uhr

2025-03-03T16:52:40Z

2025-02-22T12:45:33Z

Probleme beheben

2022-09-04T10:27:30Z

Snippets

2022-09-04T10:26:59Z

Snippets

2022-09-04T10:26:40Z

Tabellenmodul anpassen

2022-09-04T10:26:01Z

2022-09-04T09:31:09Z

2022-09-04T09:29:06Z

Eigene Stildefinitionen in der Styles Datei

2022-09-04T09:28:33Z

Buttons erlauaben

2022-09-04T09:27:50Z

Styles Dropdown verbessern

← Nächstältere Version		Version vom 3. März 2025, 16:52 Uhr
Zeile 1:		Zeile 1:
		+	Dieser Artikel bezieht sich auf den alten CKEditor. In neueren Versionen wird der TinyMCE Editor verwendet.
		+
		+	[[ProcessWire - TinyMCE Editor]]
		+
	'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''		'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
	== Links ==		== Links ==

@@ Zeile 497: / Zeile 497: @@
 == Probleme beheben ==
 === Bilder - width Attribut beschränkt auf max. 1200px ===
   https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
 Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder

@@ Zeile 208: / Zeile 208: @@
 == Snippets ==
 === Tabellenmodul anpassen ===
 <syntaxhighlight lang="javascript">

← Nächstältere Version		Version vom 4. September 2022, 10:26 Uhr
Zeile 208:		Zeile 208:

	== Snippets ==		== Snippets ==
		+	=== Tabellenmodul anpassen ===
		+	<syntaxhighlight lang="javascript">
		+	Here is another snippet that I use to get rid of unwanted table properties:
		+
		+	// Remove unwanted attributes from tables
		+	CKEDITOR.on('dialogDefinition', function(ev) {
		+	var dialogName = ev.data.name;
		+	var dialogDefinition = ev.data.definition;
		+
		+	if (dialogName == 'table') {
		+	var info = dialogDefinition.getContents('info');
		+	info.remove('txtWidth');
		+	info.remove('txtHeight');
		+	info.remove('txtBorder');
		+	info.remove('txtCellPad');
		+	info.remove('txtSummary');
		+	info.remove('txtCellSpace');
		+	info.remove('cmbAlign');
		+	var advanced = dialogDefinition.getContents('advanced');
		+	advanced.remove('advStyles');
		+	advanced.remove('advId'); //Id attribute
		+	advanced.remove('advLangDir'); // writing direction
		+	advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
		+	}
		+	</syntaxhighlight>
		+
		+	Put this code inside your custom config.js

	=== Praktisches Beispiel 1===		=== Praktisches Beispiel 1===

← Nächstältere Version		Version vom 4. September 2022, 10:26 Uhr
Zeile 455:		Zeile 455:


−	~~=== Tabellenmodul anpassen ===~~
−	~~<syntaxhighlight lang="javascript">~~
−	~~Here is another snippet that I use to get rid of unwanted table properties:~~
−
−	~~// Remove unwanted attributes from tables~~
−	~~CKEDITOR.on('dialogDefinition', function(ev) {~~
−	~~var dialogName = ev.data.name;~~
−	~~var dialogDefinition = ev.data.definition;~~
−
−	~~if (dialogName == 'table') {~~
−	~~var info = dialogDefinition.getContents('info');~~
−	~~info.remove('txtWidth');~~
−	~~info.remove('txtHeight');~~
−	~~info.remove('txtBorder');~~
−	~~info.remove('txtCellPad');~~
−	~~info.remove('txtSummary');~~
−	~~info.remove('txtCellSpace');~~
−	~~info.remove('cmbAlign');~~
−	~~var advanced = dialogDefinition.getContents('advanced');~~
−	~~advanced.remove('advStyles');~~
−	~~advanced.remove('advId'); //Id attribute~~
−	~~advanced.remove('advLangDir'); // writing direction~~
−	~~advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table~~
−	}
−	~~</syntaxhighlight>~~
−
−	~~Put this code inside your custom config.js~~
	== Plugins hinzufügen ==		== Plugins hinzufügen ==
	https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.		https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.

@@ Zeile 453: / Zeile 453: @@
    config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
 </syntaxhighlight>
 == Plugins hinzufügen ==
   https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.

@@ Zeile 11: / Zeile 11: @@
   https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
 Automatische Konfiguration für alle CKEditor Felder
 == Der CKEditor in ProcessWire ==

← Nächstältere Version		Version vom 4. September 2022, 09:29 Uhr
Zeile 98:		Zeile 98:
	]);		]);

		+	// Auch Code ist möglich:
		+	// add inline font-size from 12px to 48px
		+	for(var i = 12; i <= 48; i++) {
		+	myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
		+	}
	</syntaxhighlight>		</syntaxhighlight>

@@ Zeile 113: / Zeile 113: @@
   config.protectedSource.push(/<i[^>]*><\/i>/g);
-==== Buttons erlauaben ====
+==== ExtraAllowedContent Beispiel: Buttons erlauben ====
 Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
 <pre>

@@ Zeile 126: / Zeile 126: @@
 === Styles Dropdown verbessern ===
   https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/
 == CKEditor allgemeines Wissen ==