Frontend Editor

Frontend Editor is a plugin that lets you edit content without opening the Manager. It includes TinyMCE 5 for editing.

Frontend Editor

Features

Edit document fields including TV fields.
Simple image upload without the resource manager.
Edit fields by resource ID (useful for editable menus, breadcrumbs, etc.)

Installation and usage

Install the extra. Wrap fields you want to edit in an element with data-frontendeditor and the field name as the value:

modx

<div data-frontendeditor="content">
  [[*content]]
</div>

Allowed values: content, pagetitle, longtitle, menutitle, description, introtext

Editing TV fields

Use tv- plus the TV name:

modx

<div data-frontendeditor="tv-myTvField">
  [[*myTvField]]
</div>

Editor type

For each field you can use TinyMCE tinymce (default) or a simple input simple:

modx

<div data-frontendeditor="tv-myTvField, simple">
  [[*myTvField]]
</div>

Editing by resource ID

To edit another resource's fields, pass its id as the first option. Useful for editable menus, breadcrumbs, etc.

Example: edit pagetitle for resource id 2:

modx

<a href="/index.php?id=2" data-frontendeditor="2, pagetitle, simple">
  [[pdoField? &id=`2` &field=`pagetitle`]]
</a>

Editable menu example:

modx

[[pdoMenu?
  &parents=`0`
  &tpl=`@INLINE <li><a href="[[+link]]" data-frontendeditor="[[+id]], menutitle, simple">[[+menutitle]]</a>[[+wrapper]]</li>`
]]

menutitle field

For empty menutitle fields, the editor shows pagetitle and saves to menutitle. This can be changed; see extra settings.

Extra settings

frontendeditor.tinymce_init_default — TinyMCE config; see TinyMCE 5 docs.
frontendeditor.upload_path — Image upload directory.
frontendeditor.upload_file_name — File name handling: empty (default), sanitize, or uniqid.
frontendeditor.menutitle_behavior — For empty menutitle: 0 = normal, 1 (default) = show pagetitle / save to menutitle, 2 = show and save pagetitle.