ProcessWire - TinyMCE Editor

Der TinyMCE Editor ist der Nachfolger des CKE Editor. Er läßt sich deutlich leichter modifizieren.

Styles lassen sich in den Moduleinstellungen anpassen (Custom style formats CSS). Das geht auf Modulebene oder auf Feldebene (wenn man das in den Moduleinstellungen erlaubt):

Beispiel

#Extras h5.accordion { } /* Accordion item heading */
#Extras h6 { } /* Tab item heading */
#Extras hr.stop { } /* Stop tabs or accordions */
#Blocks uk-text-lead {font-size: 1.5em } /* Lead text */
#Blocks .uk-text-meta { font-size: 14px; color: #999 } /* Meta text */
#Blocks .uk-text-small { font-size: 14px; } /* Small text */ #Uikit .uk-text-muted { color: #999; } /* Muted text */
#Inline span.red-text { color: red; } /* Red Text */
#Blocks p.outline { padding: 20px; border: 1px dotted #ccc; } /* Outline paragraph

Wobei #Blocks für den Menübereich steht und der Kommentar für das /* Label */

Divs erlauben mittels Plugin

Wenn man divs nutzen will gibt es einige Fallen. Z.B. ist es nicht so einfach mehrere p-Tags innerhalb eines Divs zu nutzen. Man kann aber z.B. ein TinyMce Plugin basteln.

Mit diesem Div kannst du per Button einen Bereich im Editor mit einem DIV umschließen. Danach funktionieren auch div.meinstyle Elemente die man als Blockelemente (wie oben gezeigt) definiert.

Plugin Code

/**
 * “wdiv” (wrap selected content with a div) plugin
 * for TinyMCE 6 in processwire (what eles?)
 */

tinymce.PluginManager.add('wdiv', (editor, url) => {
	const openDialog = () => editor.windowManager.open({
		title: 'wdiv plugin',
		body: {
			type: 'panel',
			items: [
				{
					type: 'input',
					name: 'ziclass',
					label: 'css class to use'
				}
			]
		},
		buttons: [
			{
				type: 'cancel',
				text: 'Close'
			},
			{
				type: 'submit',
				text: 'Save',
				buttonType: 'primary'
			}
		],
		onSubmit: (api) => {
			const data = api.getData();
			/* wrap the selected text/html with a div having a class */
			let cnt = editor.selection.getContent({format: 'html'});
			if(data.ziclass != '') {
				editor.insertContent(`<div class="${data.ziclass}">${cnt}</div>`);
			}
			else {
				editor.insertContent(`<div class="box">${cnt}</div>`);
			}
			api.close();
		}
	});
	editor.ui.registry.addIcon('divcode', '<svg height="24" width="24" viewBox="0 0 24 24"><path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z" /></svg>');
	editor.ui.registry.addButton('wdiv', {
		text: 'wdiv',
		icon: 'divcode',
		tooltip: "wrap with a div",
		onAction: () => {
			/* Open dialog window */
			openDialog();
		}
	});
	// metadata
	return {
		getMetadata: () => ({ name: 'Wdiv' })
	};
});

• Pfad zum Plugin unter external Plugins in den Moduleinstellungen eingeben z.B.

/site/templates/modules/TinyMcePlugins/pw-tinymce-div-plugin-main/wdiv.js

• Plugin kann jetzt in den Feldeinstellungen aktivieret werden.
• Button zum Menü hinzufügen, mit dem Kürzel wie das Plugin heißt (hier wdiv)