The missing link editor for Neos
- Wilhelm Behncke - [email protected]
- Martin Ficzel - [email protected]
The development and the public-releases of this package was generously sponsored by our customer https://www.cornelsen.de and our employer https://www.sitegeist.de.
composer require sitegeist/archaeopteryx
Sitegeist.Archaeopteryx is a drop-in replacement for the default Link Editor that is used for Rich Text in Neos. Once installed, you'll notice that the default editor won't show up anymore if you try to add a link to some piece of text.
Instead, a dialog with a lot more options will open:
Sitegeist.Archaeopteryx is fully backwards-compatible. You don't have to worry about links that are already in the system. You can install or uninstall Sitegeist.Archaeopteryx at any point in time while retaining full functionality of all of your links.
|
|
|
Besides the integration with the Rich Text editor toolbar, Sitegeist.Archaeopteryx also provides an Inspector Editor that can be used as a replacement for Neos.Neos/Inspector/Editors/LinkEditor.
In case of the Inspector Editor, Sitegeist.Archaeopteryx won't automatically override the default. Instead, you need to configure it as a properties' inspector editor explicitly:
'Vendor.Site:MyContent':
# ...
properties:
link:
type: string
ui:
inspector:
# ...
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'Sitegeist.Archaeopteryx ships with 4 built-in Link Types.
The Web Link Type handles external links, so links that begin with http:// or https://.
The Document Link Type handles internal links. The editor offers you a document tree from which you can select documents from within your site. It also offers a search and a node type filter similar to the main document tree in the left side bar of the Neos UI.
The Document Link Type can be configured as follows:
RTE Configuration:
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
# ...
properties:
text:
type: string
ui:
inlineEditable: true
inline:
editorOptions:
# ..
linking:
#
# Sitegeist.Archaeopteryx will consider the
# startingPoint option in the linking
# section of the RTE configuration.
#
# However, the startingPoint option of the
# extra key 'Sitegeist.Archaeopteryx' from
# below takes precedence.
#
startingPoint: '/sites/vendor-site/node-2ohiwg6ardhhf'
'Sitegeist.Archaeopteryx':
linkTypes:
'Sitegeist.Archaeopteryx:Node':
startingPoint: '/sites/vendor-site/node-40up2e13w4fd9' # Default: current site node
baseNodeType: 'Vendor.Site' # default: Neos.Neos:Document
loadingDepth: 8 # default: 4
allowedNodeTypes: ['Vendor.Site:Mixin.ReferenceableDocument'] # a list of allowed linkable node types or super typesInspector Editor Configuration:
'Vendor.Site:MyAwesomeNodeTypeWithALinkProperty':
# ...
properties:
link:
type: string
ui:
inspector:
# ...
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:Node':
startingPoint: '/sites/vendor-site/node-40up2e13w4fd9' # Default: current site node
baseNodeType: 'Vendor.Site' # default: Neos.Neos:Document
loadingDepth: 8 # default: 4
allowedNodeTypes: ['Vendor.Site:Mixin.ReferenceableDocument',] # a list of allowed linkable node types or super types
The Asset Link Type handles links to files from the Media Module. The editor will offer you a media browser from which you can select any asset from within your site.
The MailTo Link Type handles e-mail links, so links that start with mailto:. Links with the mailto: protocol allow not only to specify a recipient, but also to configure a subject, a message body, carbon copy (CC) recipients and blind carbon copy (BCC) recipients for the outgoing e-mail.
The editor for the MailTo Link Type will offer all of those fields. Each field can be deactivated via configuration.
The MailTo Link Type can be configured as follows:
RTE Configuration:
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
# ...
properties:
text:
type: string
ui:
inlineEditable: true
inline:
editorOptions:
# ..
linking:
'Sitegeist.Archaeopteryx':
linkTypes:
'Sitegeist.Archaeopteryx:MailTo':
enabledFields:
subject: true
cc: true
bcc: true
body: trueInspector Editor Configuration:
'Vendor.Site:MyAwesomeNodeTypeWithALinkProperty':
# ...
properties:
link:
type: string
ui:
inspector:
# ...
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:MailTo':
enabledFields:
subject: true
cc: true
bcc: true
body: true
The PhoneNumber link type handles phone links, which start with tel: and allow to start a call. In the editor one selects the country calling code and add the rest of the phone number via an input field. To make it easier to check the added phone number, it is auto formatted in the preview according to the selected country. Via the the node type configuration you can define a defaultCountry and an array of favoredCountries. The defaultCountry is used to prefill the country calling code for new links. The values from the favoredCountries array are used to define a list of preferred countries, which will be placed at the top of the selectable country calling codes in the editor. The used values are ISO 3166-1 alpha-2 (wikipedia) country codes. Both configuration settings are placed in the linking respectively linkTypes section of the editorOptions:
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
# ...
properties:
text:
type: string
ui:
inlineEditable: true
inline:
editorOptions:
# ..
linking:
'Sitegeist.Archaeopteryx':
linkTypes:
'Sitegeist.Archaeopteryx:PhoneNumber':
defaultCountry: FR
favoredCountries:
- DE
- AT
- CH
- FR'Vendor.Site:MyAwesomeNodeTypeWithALinkProperty':
# ...
properties:
link:
type: string
ui:
inspector:
# ...
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:PhoneNumber':
defaultCountry: FR
favoredCountries:
- DE
- AT
- CH
- FR
The CustomLink link type allows the editor to add a link in any format. With this you give the editor an escape hatch if the other link types are insufficient for the desired use case. As any other link type the CustomLink can be deactivated via the configuration. If you want to deactivate the CustomLink link type globally you can use a preset and a mixin, which is than used as a supertype in all link generating node types:
Define the preset:
Neos:
Neos:
nodeTypes:
presets:
properties:
myVendor:
noCustomLinkEditor:
ui:
inspector:
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:CustomLink':
enabled: falseUse the preset in your link property, mixin or node type
'MyVendor.Base:Mixin.Link':
abstract: true
properties:
link:
options:
preset: 'myVendor.noCustomLinkEditor'
In RTE context, Sitegeist.Archaeopteryx allows you to set some additional link options. These are:
- Anchor: This will add a string to the hash-section of the URL (the part after
#) - Title: This will set the
titleattribute of the resulting<a>-Tag - Open in new window: This will set the
targetattribute of the resulting<a>-Tag to_blank - rel="nofollow": This will set the
relattribute of the resulting<a>-Tag tonofollow
Not all Link Types support all of these options however. Here's an overview of what Link Type supports which options:
| Link Type | Supported Link Options |
|---|---|
| Web | Anchor, Title, Open in new window, rel="nofollow" |
| Document | Anchor, Title, Open in new window, rel="nofollow" |
| Asset | Title, Open in new window, rel="nofollow" |
| Mail To | - none - |
To enable or disable certain Link Options generally, you can use the linking section of your RTE configuration:
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
# ...
properties:
text:
type: string
ui:
inlineEditable: true
inline:
editorOptions:
# ..
linking:
anchor: true
title: true
relNofollow: true
targetBlank: trueIt is possible to disable one or more link type editors via the configuration for the inspector as well as for inline editable content elements. To achieve this, you use the enabled key for the specific link type editor in the linkTypes section. The default for this key is true.
'Vendor.Site:MyAwesomeNodeTypeWithSomeRichText':
# ...
properties:
text:
type: string
ui:
inlineEditable: true
inline:
editorOptions:
# ..
linking:
'Sitegeist.Archaeopteryx':
linkTypes:
'Sitegeist.Archaeopteryx:MailTo':
enabled: false'Vendor.Site:MyAwesomeNodeTypeWithALinkProperty':
# ...
properties:
link:
type: string
ui:
inspector:
# ...
editor: 'Sitegeist.Archaeopteryx/Inspector/Editors/LinkEditor'
editorOptions:
linkTypes:
'Sitegeist.Archaeopteryx:MailTo':
enabled: falseWe will gladly accept contributions. Please send us pull requests.
see LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent