ProcessWire - Front Page Editing

ProcessWire - Frontend Editing

Front-End Editing wir oftmals Frontend Editing genannt. Zur besseren Suche diese Überschrift.

Front-End Page Editor - PageFrontEdit

https://processwire.com/docs/front-end/front-end-editing/

Auch genannt: Frontend-Editing oder Frontpage Edit oder Frontend-Editor

• Mehrere Optionen (im Backend auswählen)
• Option A -> Automatisch
  • Kann verwendet werden wenn ein Feld nur einmal auf einer Seite verwendet wird.
• Option B -> API Method Call
  • Geeignet für text fields, number fields, dates...
  • Nicht geeignet für Files/Images, PageTables, Repeaters or andere Felder über die man iteriert
  • Statt get einfach edit nehmen

<?php echo $page->edit('body'); ?>

• Option C -> HTML Edit Tags
  • Anhand <edit [feldname]>...</edit> findet PW die Felder
  • Für Repeater geeignet
  • Unterstüzt Inline Editor, wenn das Feld es unterstützt

• Option D -> HTML Edit Attributes
  • Gleiche Funktionalität wie Tags
  • edit Attribut für div, span, ... statt eigenständiges Tag
  • always uses the dialog editor and does not use the inline editor.

...

Konfiguration

• PageFrontEdit Modul installieren (Core)
• Für Option A Checkboxen anhaken
• Für Option B-C Templates berarbeiten.

Options in Detail

Option A

Einfach im Backend anhaken

Option B

Statt

$page->get('field_name');
$page->edit('field_name');

Beispiel

<?php echo $page->edit('body'); ?>

Option C

Beispiel Image Feld 'photo'

<edit photo>
  <img src="<?=$page->image->url?>" />
</edit>

Beispiel Repeater, PageTable oder Table Field

<edit events>
  <?php foreach($page->events as $event): ?>
    <div class="event">
      <h3><?=$event->title?></h3>
      <p class="date"><?=$event->date?></p>
      <p><?=$event->summary?></p>
    </div>
  <?php endforeach; ?>
</edit>

Beschreibung von Ryan:

By the way, you can also use some more verbose but alternate syntax for the <edit> tags if you prefer. If your editor does syntax highlighting with your HTML, it may be more consistent (the "quotes" are optional of course):

<edit field="events"> ... </edit>

If your editable region contains multiple fields you want to be edited together, you can specify more than one:

<edit field="intro,image,events"> ... </edit>

If your field happens to be on some other page other than the one being rendered, you can also specify what page you want to be edited:

<edit field="events" page="1001"> ... </edit>

The 1001 can be any page ID or path. The above can also be shortened to this if you prefer:

<edit field="1001.events"> ... </edit>

Or this:

<edit 1001.events> ... </edit>

If you are using <edit> tags with a field that supports inline editing (like a text or CKEditor field), the inline editor will be used. Otherwise it will open a dialog to the editor.

Option D

<div edit="events">
  <!-- code to output events -->
</div>

Or to specify a field from some other page (1001):

<div edit="1001.events"> ... </div>

Or to specify multiple fields:

<div edit="intro,image,events"> ... </div>

The "edit" attributes are stripped from the markup that gets output, so the only place you will see them is where you place them in your template file(s).

Worth noting about option D is that it always uses the dialog editor and does not use the inline editor.

Probleme lösen

Front Page Editing in Repeatern

Verschachtelte Repeater

Update 10/2023 - In verschachtelten Repeatern funktioniert die Methode C unten nicht. Du musst den Redakteuren zusätzlich Zugriff auf das (System-)Template des Übergeordneten Repeaters oder RepeaterMatrix-Felds geben.

Templates > Systemtemplates anzeigen > Repeater Feld > Zugriff > Bearbeiten und Ansehen hinzufügen

Option C funktioniert

$item->edit('simple_texteditor')

Der Editor zeigt keinen Inhalt. Bei Superadmins funktioniert es aber.

https://processwire.com/talk/topic/15357-solved-frontend-edit-on-repeater-fields/
https://github.com/processwire/processwire-issues/issues/183

Lösung: Mit Option C funktioniert es, wenn man noch das page-Attribut mit reinnimmt. Im page Attribut gibt man den Repeater an.

foreach($page->repeater_field as $item) {
  echo "<h3><edit field='title' page='$item'>$item->title</edit></h3>";
  echo "<edit field='body' page='$item'>$item->body</edit>";
}

Manchmal auch praktisch wenn man mit fields arbeitet:

// Body
if($page->body){
  $bodyMarkup = "<edit field=\"body\" page=\"$page\">$page->body</edit>";
}

Kopiervorlage für $item und body:

"<edit field=\"body\" page=\"$item\">$item->body</edit>"
'<edit field="body" page="'.$item.'">'.$item->body.'</edit>';

Editor funktioniert nicht immer

Die Edit Tags werden aus dem Code entfernt aber man kann nicht doppelklicken.

Prüfen ob du mit einer anderen Domain (z.B. ohne www.) angelmeldet bist. Der Editor funktioniert bei mir nur wenn man in der exakt selben Domain ist.

Kopierschnipsel

<edit field="body">'.$page->body.'</edit>
<edit field="body" page="'.$page.'">'.$page->body.'</edit>
<edit field="body">'.$item->body.'</edit>
<edit field="body" page="'.$item.'">'.$item->body.'</edit>