3.5Preview Text Editing

3.5Preview Text Editing

« previous chapternext chapter »

The Preview editing allows the Editor to edit Texts from String or Text fields directly within the preview HTML page.

When an editor is checking the preview he may be tempted to correct a spelling error directly in the text or even rewrite individual text passages. This feature enables this action. With the shortcut Shift + Control not only UILinks but also Edit buttons appear if the programming supports it.

The following example shows how the article headline and the text are marked Preview editable.

<%@page import="
                app.cmsworks.cms.document.ErrorView,
                app.cmsworks.cms.document.HTMLErrorView,
                app.cmsworks.util.uilink.UILink,
                app.cmsworks.util.uilink.PreviewEditable,
                app.cmsworks.cms.document.ContentInclude
               "
        session="false"
        contentType="text/html;charset=UTF-8"
%><%@include file="includes/documentmodel.jsf"
%><%@include file="includes/util-texthandler.jsf" 
%><%

ErrorView errors = new HTMLErrorView();
DocumentModel dmPage = null;
UILink uiLink = new UILink(request);
PreviewEditable previewEditable = new PreviewEditable(request);

String htmlHeadlineEditable = "";
String htmlHeadline = "";

String htmlText = "";
String htmlTextEditable = "";

// fetch the sensible data
try {
  // get the DocumentModel from request
  dmPage = new DocumentModel(request, new Types());
  // init the errorview
  errors.setPreview(dmPage);

  // use previewEditable to create the marker for headline text to be editable  
  htmlHeadlineEditable = previewEditable.createEditableMarker(dmPage, Types.PT_ARTICLE_HEADLINE);
  htmlHeadline = dmPage.getString(Types.PT_ARTICLE_HEADLINE, errors);

  // use the created MyTinyRichtextParts with the text to render
  MyTinyRichtextParts textPartsText = new MyTinyRichtextParts(dmPage.getString(Types.PT_TEXT));
  htmlTextEditable = previewEditable.createEditableMarkerForText(dmPage, Types.PT_TEXT, textPartsText);

  // transform the links 
  textPartsText.handleLinks(dmPage);

  // remove empty lines
  textPartsText.deleteEmptyP();

  // fill components
  for (TinyRichtextComponentPart compPart : textPartsText.getComponentParts()) {
    DocumentModel mrComponent = new DocumentModel(compPart.getDocumentId(), dmPage);
    ContentInclude include = null;
    if (mrComponent.isType(Types.RT_MEDIUM)) {
      include = new ContentInclude(dmPage, mrComponent, "cmp-medium.jsp", errors);
    }
    else if (mrComponent.isType(Types.RT_INFOBOX)) {
      include = new ContentInclude(dmPage, mrComponent, "cmp-infobox.jsp", errors);
    }
    ...
    String htmlComponent = null;
    if (include != null) {
      htmlComponent = include.getIncludeContent();
    }
    // if the include has errors or was not assigned by the conditions before the compPart will simply
    // be deactivated
    if (htmlComponent != null) {
      htmlComponent = "<span class=\"txtcomp " + compPart.getPosition() + "\">" + htmlComponent + "</span>";
      compPart.setText(htmlComponent);
    }
    else {
      compPart.setDoProduce(false);
      errors.add(errors.asUILink(mrComponent) + "This document is not usable as text component.");
    }
  }
  
  htmlText = textPartsText.build();
}
catch (Throwable t) {
  if (errors.exit(response, t, dmPage, this.getClass().getName())) {
    return;
  }
}
//now start the HTML-Output
%><!DOCTYPE html>
<html>
<head>
...
  <%= uiLink.getIncludes() %>
</head>
<body>
...
  <%= uiLink.getPageLink() %>
...
  <%= htmlHeadlineEditable %><h1><%= htmlHeadline %></h1>
...
  <!-- placing the text and editable markers into the html code -->
  <div class="richtext"><%= htmlTextEditable %><%= htmlText %></div>
...
  <%= errors.render() %>
</body>
</html>

Using MyRichtextParts to render richtext into the HTML page, also create editable markers for headline and text.

With the following code the Preview editing feature is initialized:

PreviewEditable previewEditable = new PreviewEditable(request);

The PreviewEditable reads the Generator service from the request and only creates code if the Generator is in preview mode.

Using the feature for the article headline is prepared as follows:

htmlHeadlineEditable = previewEditable.createEditableMarker(dmPage, Types.PT_ARTICLE_HEADLINE);

The method reads the property from the given document and the property name and creates a marker code. This code has to be placed before the HTML element containing the article headline. This is how string property editor markers have to be placed.

<%= htmlHeadlineEditable %><h1><%= htmlHeadline %></h1>

Do not place the marker into the h1 element except if the headline text is additionally surrounded by another tag (i.e. span)

<!-- this will work -->    <h1><%= htmlHeadlineEditable %><span><%= htmlHeadline %><span></h1>
<!-- this will NOT work --><h1><%= htmlHeadlineEditable %><%= htmlHeadline %></h1>

For properties of type text the marker has to be placed right at the beginning of the text:

<div class="text"><%= htmlTextEditable %><%= htmlText %></div>

When editing

When starting the property editing in the preview website the document is locked for the CMS user just like it would be if the document is edited in the document window of the CMS editors desktop. Only after aborting or storing the change the document will be unlocked. So it's necessary to be logged in into the editors desktop (in the same cookie context - meaning same browser, same incognito or normal mode).

Editing is split at components

The rendered version of the text in the website may be transformed and filled with included component renderings. To avoid editing those component renderings the preview editing is split into the section before the component and after. The text to be edited is not the transformed Text but the original Text from the document content. This splitting may also be happening if the transformation of the text handles tables by surrounding them with a scrollable container working mostly in mobile presentation where tables are larger than the page with.

Links are editable too

An internal link to another document can be placed in the editors desktop by copy and paste of a document into the Linklist property of the link dialog. This cannot be performed within the website preview. But. Use the preview link of the link target or an online link or simply the document ID. After editing the link the server tries to find the targeted document from the id or the path and rewrites the link to an internal link (if you allow this). Also the presentation of the existing internal link to another document is transformed into the generated relative URL.

« previous chapternext chapter »