The editor settings are sent to the editor and control the behavior of your editor, in particular:
user menu
main navigation
dashboards
start page
media library
text formatting
An example:
// projectConfig.editorSettings: {...}{userMenu: [{label: 'What is new',data: {lastUpdate: '2020-06-16T13:19:38.560Z'},icon: 'plus',id: 'release_notes',group: 'string:required',// Use either 'href' (external link) or 'route' (internal link)href: 'https://github.com/livingdocsIO/livingdocs-release-notes',route: {name: 'app.state'}}],mainNavigation: [{liItem: 'articles'},// liItem is a shortcut, one can also define it's own config{label: 'My Custom Articles',route: {name: 'app.articles'},icon: 'file-document',scope: 'readArticles',group: 'dashboards' // one of 'dashboards', 'preferences', 'admin'},{liItem: 'pages'},{ // custom task dashboardlabel: 'Proofreading',dashboard: 'kanban-proofreading',icon: 'clipboard-check'},{ // custom document dashboardlabel: 'Authors',dashboard: 'authors-dashboard',icon: 'account'},{liItem: 'mediaLibrary'},{liItem: 'lists'},{liItem: 'menus'},{liItem: 'contentSetup'},{ // external linklabel: 'Livingdocs Website',icon: 'rocket',href: 'https://www.livingdocs.io',group: 'preferences'},{liItem: 'projectSettings'},{liItem: 'serverAdmin'}],dashboards: [{handle: 'kanban-proofreading',type: 'taskBoard',pageTitle: 'Proofreading',taskName: 'proofreading',throttleTime: 2000, // msdisplayFilters: ['documentState', 'timeRange']}, {handle: 'authors-dashboard',type: 'dashboard',pageTitle: 'Author Management',entityLabel: 'Author',baseFilters: [{type: 'documentType', value: 'data-record'},{type: 'sortBy', value: '-updated_at'}],displayFilters: ['documentState', 'timeRange'],sort: '-updated_at',fields: ['metadata.*'],componentName: 'bluewinDashboardListItem'}],startPage: {path: '/articles'},mediaLibrary: {showUi: true, // default truealtTextPrefilling: {metadataPropertyName: 'caption'}dashboard: {displayFilters: ['timeRange']},editorSelection: {displayFilters: ['timeRange']},textFormatting: {bold: {enabled: true},italic: {enabled: true},superscript: {enabled: false},subscript: {enabled: false},quotes: {enabled: true, open: '„', close: '“'},singleQuotes: {enabled: true, open: '‚', close: '‘'},link: {enabled: true},specialChars: {enabled: true}}}}
Makes it possible to configure custom entries within the Livingdocs user menu. If given a userMenu.data.lastUpdate
property, it will visually indicate changes to the user. While you can add additional menu items, it is not possible to remove or alter the default Livingdocs menu items.
Configures the main navigation in Livingdocs. You can either configure a predefined liItem
, link a custom dashboard or link an external page.
The possible values for liItem
are: 'articles', 'pages', 'dataRecords', 'mediaLibrary', 'proofreading', 'lists', 'menus', 'tags' (imatrics), 'contentSetup', 'projectSettings', 'serverAdmin' (enterprise only)
For custom dashboards you configure the handle of your custom dashboard (see below) in the dashboard
key. For external links you set the href
property. For both you can define: icon
(visual icon in the main nav), group
(any of 'preferences', 'dashboards', 'custom', 'top') and label
(visual title).
The dashboards
entry allows you to configure custom dashboards, e.g. for authors (data-records) or proofreading (tasks).
There are 3 types
of custom dashboards (type
property):
dashboard
kanbanBoard
taskBoard
(predefined kanbanBoard
for a task)
Kanban Boards are very similar to dashboards, except for having multiple result columns. Each result column shows a list of documents just as a single column dashboard does. The documents cannot be manually sorted or moved between columns, instead each column typically has its own filter settings.
For example a task board will show all tasks in the requested
state in one column and tasks with the state inProgress
and done
in the other columns. In order to move a card into another column you simply have to open the document and move the task into another state.
Custom dashboards have some basic properties in common which are described in more detail below.
Identifier for a custom dashboard. Is also used as a reference for the main navigation
Type of the dashboard, one of these: dashboard
, kanbanBoard
, taskBoard
Display Filters are shown to the user below the search input
Base Filters are invisible filters and applied to every search (including the default result list)
Sort the result, possible values are:
relevance
(default),
-created_at
/ created_at
,
-updated_at
/ updated_at
a metadata property e.g. metadata.proofreading.priority
dashboards: [{handle: 'gallery-dashboard',type: 'dashboard',pageTitle: 'Gallery Board',// Label used to describe the documents in this DashboardentityLabel: 'Article',// Invisible base filters applied to every search (including the default result list)baseFilters: [{type: 'documentType', value: 'article'}],// Filters shown to the user below the search inputdisplayFilters: ['documentState', 'timeRange'],sort: '-updated_at',// fields to be returned from the server (not all metadata fields are returned by default)fields: ['metadata.*'],// Enterprise only: This is the name of the vue component used in the result listcomponentName: 'liHeroCard',// Enterprise only: The componentOptions are injected into the component// `liHeroCard` (in this example)componentOptions: {teaserImage: 'teaserImage'},// Enterprise only: CSS class set as a wrapper around the result listcssWrapper: 'li-result-columns'}]
dashboards: [{handle: 'kanban-proofreading',type: 'taskBoard',pageTitle: 'Proofreading',// This is the name of a metadataProperty of `type: 'li-task-v2'`taskName: 'proofreading',displayFilters: ['documentState', 'timeRange']}]
dashboards: [{handle: 'kanban-proofreading',type: 'kanbanBoard',pageTitle: 'Proofreading',// Label used to describe the documents in this KanbanBoardentityLabel: 'Article',displayFilters: [],// Base filters are applied to all columnsbaseFilters: [{type: 'documentType', value: 'article'}],// This is the name of the angular component to use in all columns// (can also be defined for each columns separately)componentName: 'liTaskCard',// include all metadata properties in the search response datafields: ['metadata.*'],// Set the target when clicking on a card. Currently supported:// - 'article' (default setting)// - 'tasks'openState: 'tasks',showFooter: true,columns: [{handle: 'requested',label: 'Needs Proofreading',// Filter applied for this column on top of the `baseFilter`columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'requested'}],sort: [`metadata.proofreading.priority`, `metadata.proofreading.deadline`]// The componentOptions are injected into the component `liTaskCard` (in this example)componentOptions: {column: 'todo', taskName: 'proofreading'}}, {handle: 'in-progress',label: 'In Progress',columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'accepted'}],sort: [`metadata.proofreading.priority`, `-metadata.proofreading.accepted.date`],componentOptions: {column: 'doing', taskName: 'proofreading'}}, {handle: 'done',label: 'Finished Proofreading',columnFilter: [{type: 'metadata', key: 'proofreading.state', value: 'completed'}],sort: [`-metadata.proofreading.completed.date`],componentOptions: {column: 'done', taskName: 'proofreading'}}]}]
Set custom startPage: {path: '/my-custom-path'}}
to set the path used to render on login or when switching projects.
After linking the media library on the mainNavigation
(see above), one can also define displayFilters
to customise the media library dashboard (see example on top of the page).
The media library settings only take effect if you link it with the mediaLibrary
item in the mainNavigation
. You can apply 3 customized settings for the default media library dashbaord:
filters on the main dashboard: dashboard: {displayFilters: []}
filters on the editor inline dashboard: editorSelection: {displayFilters: []}
a metadata property handle from which the alt
attribute on an image tag is filled: altTextPrefilling: {metadataPropertyName: ''}
The text formatting toolbar can be customized globally here. You can also overwrite this settings for each content type. Enable or disable the existing elements for text formatting:
textFormatting: {bold: {enabled: true},italic: {enabled: true},superscript: {enabled: false},subscript: {enabled: false},singleQuotes: ['`', '`'],quotes: ['"', '"'],link: {enabled: true},specialChars: {enabled: false}}
Extend the text formatting toolbar with custom configured elements. The elements will be shown after the default elements. Add this configuration to the textFormatting configuration above.
customElements: [{label: 'blue color',handle: 'bluecolor',// the tag which is set around the selectiontagName: 'span',// the icon which will be displayed. Only existing icons in the editor can be used.icon: 'format-color-highlight',// the attributes which are set on the tagattributes: [{name: 'class', value: 'blue'}]}]
Add placeholder config to a custom elements. This enables the possibility for the user to add a value to the defined placeholder attribute. The existing value can be removed and after a change applied. This can be used when the user should have the possibility to add some information to a selection. The information can be used for example in the delivery.
customElements: [{label: 'icon',handle: 'customIcon',tagName: 'span',icon: 'format-color-highlight',attributes: [{name: 'class', value: 'custom-icon'}],// the placeholder attribute which will be filled with the inserted valueplaceholder: {name: 'ld-placeholder'}}]