ProcessWire - TinyMCE Editor: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
Der TinyMCE Editor ist der Nachfolger des CKE Editor. Er läßt sich deutlich leichter modifizieren. | Der TinyMCE Editor ist der Nachfolger des CKE Editor. Er läßt sich deutlich leichter modifizieren. | ||
| − | Styles lassen sich in den Moduleinstellungen anpassen: | + | 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 | Beispiel | ||
| Zeile 16: | Zeile 16: | ||
Wobei #Blocks für den Menübereich steht und der Kommentar für das /* Label */ | 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. | ||
| + | |||
| + | === Plugin Code === | ||
| + | <syntaxhighlight lang="javascript"> | ||
| + | /** | ||
| + | * “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' }) | ||
| + | }; | ||
| + | }); | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | * 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) | ||
Version vom 4. August 2025, 18:49 Uhr
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.
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)
