dbxapp Knowledge CMS Editor
Search Reference

CMS Editor

The CMS editor edits the actual page content. This tutorial explains each editor bar button and all available submenus. It also shows a secure flow for text, links, media, modules, Bootstrap components, range markers and HTML source text.

Creating space: Select the page first. Then close the content tree on the left. For longer texts, you can also fold the right media and settings column or use the full screen mode of the editor.

Open Content CMSCMS fields and header

1. Prepare the editor

  1. Open the Content Tree, select the desired page and control ID and title.
  2. Close the Content Tree again.
  3. Click on the exact place in the text where you want to write or paste something.
  4. Select text if you want to apply a formatting, color, or link to existing text.
  5. Keep an eye on the storage status of the page.
CMS editor with closed sidebars and full editor bar
Content Tree and right column are closed. As a result, the complete editor bar and the content are broadly visible.

2. All editor buttons from left to right

Menu pointFunctionProper use
Modification modeAlternates between WYSIWYG visual representation and HTML source text.Edit source code only if tags, attributes and dbx markers are understood. Then switch back to the visual view and check.
Save allApplies the editor content to the page form and saves the current CMS page.Upon feedback Stored wait. This is more than just local editor caching.
Text formattingOpens bold, italic, underlined, crossed out, left, middle, right and block set.Mark text and select the desired format. Use blockset sparingly, especially on narrow devices.
Unsorted listCreates an enumeration. The submenu offers standard, circle, points and squares.For points of equal rank without a fixed order.
Numbered listCreates a numbered list. The submenu offers Standard, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha and Upper Roman.For steps, priorities and defined orders.
Reduced intakeMoves an indented paragraph or list point one level outwards.Is deactivated if no indentation can be reduced at the cursor position.
Increase the size of the intakeMoves paragraph or list point one level inside.For lists, click on the relevant list point first.
Format blockSelect paragraph, heading 1 to 4, citation or code.Use headings hierarchically: H2 for main sections, H3/H4 below. Not just because of the font size.
Fill color or text colourSelect between background and text in the submenu and offer a color palette.Mark text. Check contrast and legibility; Informational classes and components are often more robust than freely chosen colors.
Insert linkOpens fields for URL, text, CSS class, new tab, and nofollow.Use internal permalinks if possible without a fixed domain. Set new tab only explicitly.
Insert medium from media browserOpens the CMS media browser and uses the selected medium at the current cursor position.Control alternative text, position, orientation and size. After saving, reload and check if the layout and size are maintained.
Insert the call moduleOpens the selection of available module calls and sets the selected call to the content.Only use modules whose parameters and rights match the desired frontend context.
Bootstrap Content ComponentInsert a prepared component such as Alert, Card, Accordion, Tabs or Table.After inserting placeholder texts, links and unique content completely replace.
YouTube/Vimeo VideoOpens the video dialog and creates an embed for a supported video URL.Use only permitted sources; Control data protection, consent and responsive presentation.
Horizontal lineInsert a visible horizontal separator at the cursor position.For simple optical separation. For template areas, use the dbx markers.
separator/MarkerAdds dbx-specific markers for Hero text, header, footer, columns or print page break.Markers do not overwrite like normal text. Move or delete only explicitly.
ReversibleTakes back the last editor change in the current session.After reloading, the editor history is not reliably available.
RepeatRestore a previously undone editor change.Is deactivated if there is no suitable change.
Full screenEnlarges the editor to the available interface and hides disturbing areas.Click again to leave full screen mode. Then save before switching pages.

3. Text formatting and alignment

Submenu Text formatting with bold, italic, underlined, crossed out and alignments
The combined text menu contains character formatting and paragraph alignment.
  1. Mark the exact text you want to format.
  2. Open the arrow on the menu Text formatting.
  3. Select Fat fat for strong importance, Italics for emphasis, Underlined only if there is a clear delineation of links and Crossed-out for deliberately marked as omitted content.
  4. Select for paragraphs Left-handed, Centred, Right aligned or Block set.
  5. Check the result on desktop and narrow view.

4. Lists, indents and list formats

For the two list buttons, a click on the main icon applies the default type; The small arrow opens the variants. With indentation increase and decrease create or remove sub-levels.

Format block menu with paragraph, headings, citation and code
Format block: Paragraph, heading 1–4, citation and code are semantic HTML structures.

Format block in detail

  • Paragraph: normal text.
  • Heading 1: top document heading; on normal CMS pages usually already occupied by page titles or templates and therefore rarely necessary in the content.
  • Heading 2: Main section within the page.
  • Heading 3: Subsection of an H2 range.
  • Title 4: further subdivision under H3.
  • Quote: denotes a real quote or highlighted statement semantically.
  • Code: identifies technical inputs, commands or source code.

5. Colours

Color selection of the editor with background and text colors
The color selection distinguishes background and text. Both values can be set or removed independently.
  1. Mark text.
  2. Open the color symbol.
  3. Riders Background or Text Select.
  4. Select color or remove existing color.
  5. Check contrast, dark mode or design variants and mobile readability.

6. Completely configure links

Link dialogue with URL, text, CSS class, new tab and nofollow
The link dialog contains URL, visible text, optional CSS class, and destination and nofollow switches.
  • URL: internal goal such as tutorials-dbxapp, external full HTTPS address, email or telephone link.
  • Text: visible link name. It should describe the objective in an understandable way.
  • Class name: optional CSS class, for example for a shared button display. Use only known classes.
  • Open in new tab: Sets a new browser target. For normal internal navigation usually not necessary.
  • Nofollow attribute: identifies links that search engines should not follow normally; Use only for technical reasons.

Edit link: Set cursor in the existing link and reopen the link dialog. Remove link: Select the link and use the offered link cancellation or specifically remove the link in the source text.

7. Insert media – position and size must be maintained

  1. Put the cursor in the desired place.
  2. Click on Insert medium from media browser.
  3. Search or download the medium and control title and alternative text.
  4. Select the medium. It is assigned to the page as an inline medium and used at the cursor position.
  5. Set the desired position, for example image left and text right.
  6. Set the desired image width or size.
  7. Save the page completely.
  8. Reload the page in the CMS. Position, orientation and size must remain unchanged.
  9. Open the preview and compare the rendered presentation with the editor.
Not only visually check: If text after saving is under instead of right next to the image or the size bounces back, the change is not received correctly. Check inline mapping, image attributes, classes, saved HTML content, and frontend CSS.

8. Module calls

The menu item Insert the call module opens a selection of the available dbx modules. The selected call is inserted as a technical content component and processed by the responsible module during rendering.

  1. Put cursors in their own paragraph.
  2. Open the module browser and select the desired module.
  3. Completely set envisaged parameters.
  4. Do not rewrite the technical call in the editor like normal text.
  5. Save and check both preview and frontend with the required user rights.

9. Bootstrap content components

Bootstrap Component Menu with Alert, Cards, List Group, CTA, openWin, Accordion, Tabs and Table
Prepared Bootstrap components are inserted at the cursor position.
ComponentDeploymentAfter insertion
Note / AlertHighlighted information or warning.Adjust the title, text and appropriate alert variant.
CardA single structured block of content with title, text and link.wildcards; and #Replace the link.
3 CardsThree responsive cards in a row.Fully maintain all three cards; Check the presentation on a narrow view.
List GroupList of selectable or linked points.Replace active status, texts and goals.
CTA buttonTwo calls for action.Adjust link texts, goals and priority.
OpenWin LinkOpens the target in a dbx window.kontaktChange window titles and parameters to the real goal.
acordioneFoldable content areas.Replace headlines and content; Do not unify automatically generated IDs.
TabsMultiple content areas as a register.Replace tab titles and content; Verify usability with keyboard.
TableResponsive, striped data table.Replace column headings and all sample values.

10. Video and horizontal line

YouTube/Vimeo

  1. Set the cursor to the target position.
  2. Open the video button.
  3. Enter supported YouTube or Vimeo URL.
  4. Create, save and responsive presentation.
  5. Check data protection and necessary consent separately.

Horizontal line

The horizontal line adds a normal <hr> as optical separation. It does not define a hero, header, footer or column area.

11. dbx range marker

dbx range markers for Hero, Header, Footer, Columns and Print Page Break
Markers separate technical content areas and are displayed in the editor as separate, protected elements.
MarkersTechnical keyMeaning
Hero textdbx:heroSeparates or identifies text for the Hero area.
Headersdbx:headerMarks the start of the header content.
Footweardbx:footerMarks the beginning of the footer content.
col-2 separatordbx:col2Divides an intended area into two columns.
col-3a separatordbx:col3aFirst separator for a three-column structure.
col-3b separatordbx:col3bSecond separator for a three-column structure.
Pressure page changedbx:pagebreakProduces an intended side change in the print output.
Markers are structure: Don’t label, intersect, or accidentally drag into a link. A marker is moved or deleted as a whole. The selected content template must support the relevant areas.

12. HTML source text mode

HTML source text mode of the CMS editor with formatted page content
In source text mode, HTML tags, classes, media references, module calls and dbx markers become directly visible.

What you can change there

  • Correct faulty, clearly understood HTML structure.
  • Known Bootstrap classes or released attributes specifically supplement.
  • Adjust links and text in a controlled manner.

What you must not unthinkingly change

  • data-cms-media-id, media URL and slot allocation pull apart.
  • Remove width, size and orientation specifications of inline images.
  • data-dbx-marker Delete technical marker attributes.
  • Duplicate IDs from Accordion or Tabs.
  • Treat module calls, placeholders or technical data attributes like normal text.

13. Undo, Repeat and Full Screen

  • Undoing: Step-by-step changes within the current editor session.
  • Repeat: Reapply a reversed change.
  • Full screen: Enlarge the editor; Click the icon again to return.

These functions do not replace saved versioning. Save the current status before major source text or structure changes and document the preview.

14. Saving and controlling the result

  1. Control visual representation in the editor.
  2. For images, check position, orientation and size.
  3. On Save all Click.
  4. On the page status Stored wait.
  5. Via the CMS header Reloading Select. The stored content is thus read again.
  6. Check if text, structure, links, marker and image layout are present unchanged.
  7. Preview and compare the rendered page with the editor.
  8. Test at least a narrow screen width.

15. Typical errors

ErrorSolution
Formatting affects too much textUndo → Reset selection → Reapply format.
Headline looks right, but is only fatOpen format block and select H2/H3/H4 semantically.
List has wrong levelsReduce or increase the cursor to the affected list point → move.
Internal link opens the wrong domainSet Permalink relatively and remove fixed test/localhost domain.
Image layout jumps after savingCheck position, width, size, classes and media attributes → save → reload → compare frontend CSS.
Component does not workCheck source code for unique IDs and complete structure; Do not delete any parts of Accordion/Tabs.
Marker appears as normal text or area missingReset markers via the menu and check the appropriate content template.
Preview shows old standCheck page status → fully save → reload preview → check guest/cache output.

CMS fields and headerUse of CMS mediaAll tutorials

Text walkthrough

The slideshow remains the visual tutorial. These steps provide a complete text fallback.

Prerequisite: Sign in with an account that has access to the area shown in the tutorial.
  1. Prepare the editor
  2. All editor buttons from left to right
  3. Text formatting and alignment
  4. Lists, indents and list formats
    For the two list buttons, a click on the main icon applies the default type; The small arrow opens the variants. With indentation increase and decrease create or remove sub-levels.
  5. Format block in detail
  6. Colours
  7. Completely configure links
    Edit link: Set cursor in the existing link and reopen the link dialog. Remove link: Select the link and use the offered link cancellation or specifically remove the link in the source text.
  8. Insert media – position and size must be maintained
  9. Module calls
    The menu item Insert the call module opens a selection of the available dbx modules. The selected call is inserted as a technical content component and processed by the responsible module during rendering.
  10. Bootstrap content components
  11. Video and horizontal line
  12. YouTube/Vimeo

Checkpoint: After the final step, reload the target page and confirm that the expected state remains active.

Common errors: If a control or record is missing, first check permissions, the active language, filters and whether the preceding step was saved.