Viewing and Printing

A compact editor without rulers or an editor that shows formatting marks: how the Document Editor displays documents is up to your code. It controls the view mode, the zoom factor, the ribbon bar, the rulers and the status bar, control characters, marker lines, colors and printing.

The examples extend the view of the ASP.NET Core tutorial. Changing the ribbon itself, the context menus and the language of the user interface is described in Ribbon and UI.

View Mode and Zoom

setViewMode sets one of the two values of ViewMode:

The page collection of the API, TXTextControl.pages, is only available in the page view.

Users switch these settings on the View tab of the ribbon: Draft and Print Layout in the Document Views group, the zoom in the Zoom group, the rulers and the status bar in the Toolbars group, and the marker lines, control characters and frame anchors in the Show group:

zoom sets the zoom factor in percent, or to a value of SpecialZoomFactor: PageWidth fits the width of a page, WholePage the whole current page and TextWidth the complete text of a line. The editor raises zoomFactorChanged with the new factor when the zoom changes. The zoomFactor property is obsolete.

Ribbon Bar, Rulers and Status Bar

showRibbonBar, showHorizontalRuler, showVerticalRuler and showStatusBar show a bar with true and hide it with false. They have no callbacks, and there are no methods that return whether a bar is visible, so your code keeps track of the state itself.

The following code switches the view mode, zooms, shows control characters and shows or hides all bars. Add it below the editor in Views/Home/Index.cshtml:

<input type="button" onclick="toggleViewMode()" value="Page View / Normal" />
<input type="button" onclick="TXTextControl.zoom(TXTextControl.SpecialZoomFactor.PageWidth)" value="Page Width" />
<input type="button" onclick="TXTextControl.zoom(100)" value="100%" />
<input type="button" onclick="toggleControlChars()" value="Control Characters" />
<input type="button" onclick="toggleBars()" value="Show/Hide Bars" />

<script>
    TXTextControl.addEventListener("textControlLoaded", function () {
        TXTextControl.addEventListener("zoomFactorChanged", function (e) {
            console.log("Zoom factor: " + e.zoomFactor + "%");
        });
    });

    function toggleViewMode() {
        TXTextControl.getViewMode(function (viewMode) {
            if (viewMode === TXTextControl.ViewMode.PageView) {
                TXTextControl.setViewMode(TXTextControl.ViewMode.Normal);
            } else {
                TXTextControl.setViewMode(TXTextControl.ViewMode.PageView);
            }
        });
    }

    function toggleControlChars() {
        TXTextControl.getControlChars(function (visible) {
            TXTextControl.setControlChars(!visible);
        });
    }

    // There are no getters for the bars, so the page keeps the state
    var barsVisible = true;

    function toggleBars() {
        barsVisible = !barsVisible;
        TXTextControl.showRibbonBar(barsVisible);
        TXTextControl.showHorizontalRuler(barsVisible);
        TXTextControl.showVerticalRuler(barsVisible);
        TXTextControl.showStatusBar(barsVisible);
    }
</script>

• getViewMode passes the current view mode, which toggleViewMode switches.
• getControlChars and setControlChars read and set whether control characters, such as paragraph marks and tabs, are visible.
• The show methods take the visibility as their only parameter.

Customize the Rulers and the Status Bar

TXTextControl.rulerBar and verticalRulerBar return RulerBarViewGenerator objects, and TXTextControl.statusBar a StatusBarViewGenerator. Among other things, they set:

• the unit of a ruler, Millimeter, Centimeter, Inch or Auto for the unit of the culture (setScaleUnit)
• whether users can change formatting and page margins with the ruler (setReadOnly, setEnablePageMargins)
• the areas of the status bar, such as the page, line, column, section, language and zoom (setShowPage, setShowZoom)
• a zoom slider in the status bar (setShowZoomTrackBar) and the insert or overwrite state (setShowKeyStates)
• the colors, through their displayColors properties

Since version 33.0, the border style, the frame color and the gradient back color of the status bar can't be changed; their methods are obsolete.

Show Areas and Change Labels of the Status Bar

Each area of the status bar has a setShow method that takes true or false, and a getShow method that passes the current value to a callback:

Six methods replace the text of an area. setPageText, setLineText, setColumnText, setSectionText, setPageCounterText and setSectionCounterText set the text of the page, line, column, section, page counter and section counter areas; the get methods of the same names pass the current text. The following lines show a shorter status bar with its own labels:

TXTextControl.addEventListener("textControlLoaded", function () {
    var statusBar = TXTextControl.statusBar;

    // Show the page, line and page count only
    statusBar.setShowColumn(false);
    statusBar.setShowSection(false);
    statusBar.setShowSectionCounter(false);
    statusBar.setShowLanguage(false);

    // Labels of the remaining areas
    statusBar.setPageText("Pg");
    statusBar.setLineText("Ln");
});

Change the Colors of the Rulers and the Status Bar

By default, the rulers and the status bar take their colors from the system colors of the server. displayColors of a ruler returns a RulerBarViewGeneratorColors object, and displayColors of the status bar a StatusBarViewGeneratorColors object. Their set methods take a CSS color string, each get method passes the color to a callback, and each reset method restores the default:

StatusBarViewGeneratorColors.reset and StatusBarViewGenerator.resetDisplayColors restore all colors of the status bar at once. The frame color, the gradient back color and the dark and light separator colors of the status bar are obsolete since version 33.0, when setSeparatorColor was added; they are listed on Deprecated APIs.

TXTextControl.addEventListener("textControlLoaded", function () {
    // A light gray horizontal ruler with dark blue numbers
    TXTextControl.rulerBar.displayColors.setBackColor("#F2F2F2");
    TXTextControl.rulerBar.displayColors.setGradientBackColor("#F2F2F2");
    TXTextControl.rulerBar.displayColors.setForeColor("#1F4E79");

    // The same colors for the status bar
    TXTextControl.statusBar.displayColors.setBackColor("#F2F2F2");
    TXTextControl.statusBar.displayColors.setForeColor("#1F4E79");
});

Control Characters, Marker Lines and Grid Lines

• Permanent control characters. setPermanentControlChars sets control characters that are always shown, with values of PermanentControlChar such as ParagraphEnd, Tab, SectionBreak or ObjectAnchor.
• Marker lines. setTextFrameMarkerLines shows text frames without a border, setDrawingMarkerLines drawings, and setDocumentTargetMarkers the targets of links in the document.
• Table grid lines. tableGridLines sets whether grid lines are shown for tables.

Settings in the ASP.NET Core View

Some display settings can be passed to the editor when the view is rendered, as properties of TextControlSettings:

There are no view settings for the view mode, the zoom factor or the visibility of the bars; set these from JavaScript. The following view turns on grid lines and marker lines. When the editor is loaded, it sets the rulers to centimeters, adds a zoom slider to the status bar and changes the color around the pages:

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl(settings => {
    settings.TableGridLines = true;
    settings.TextFrameMarkerLines = true;
}).Render()

<script>
    TXTextControl.addEventListener("textControlLoaded", function () {
        // Rulers in centimeters
        TXTextControl.rulerBar.setScaleUnit(TXTextControl.RulerBarScaleUnit.Centimeter);
        TXTextControl.verticalRulerBar.setScaleUnit(TXTextControl.RulerBarScaleUnit.Centimeter);

        // Zoom slider and insert/overwrite state in the status bar
        TXTextControl.statusBar.setShowZoomTrackBar(true);
        TXTextControl.statusBar.setShowKeyStates(true);

        // Color of the area around the pages
        TXTextControl.displayColors.setDesktopColor("#D9D9D9");
    });
</script>

TXTextControl.displayColors returns TextViewGeneratorColors, which also sets the colors of the page shadows, the header and footer labels and the highlighting of form fields. The blog article New Sample: Implementing a Dark Mode for the Document Editor combines these colors into a dark theme.

If the editor doesn't adapt to a change of your page layout by itself, refreshLayout forces it to recalculate its layout.

Render Mode

The Document Editor backend of TX Text Control .NET Server renders the pages as SVG; see Architecture. setRenderMode only works with the Windows-based backend of earlier versions. With the current cross-platform backend, it throws an error, because SVG is the only render mode.

Print the Document

printDocument tries to print the document in the browser. Not all browsers support it, and it has no callback. getCanPrint passes whether the document may be printed, which depends on the edit mode and on the allowPrinting permission of the document; see Document Protection.

function printFromEditor() {
  TXTextControl.getCanPrint(function (canPrint) {
    if (canPrint) {
      // Not all browsers support printing from the editor
      TXTextControl.printDocument();
    } else {
      console.log("The document can't be printed.");
    }
  });
}

To give users a file they can print in any browser, save the document as PDF, as described in Loading and Saving Documents.

setFormattingPrinter formats the document with the text dimensions of a printer. It is only relevant for the Windows-based synchronization service of earlier versions: the current cross-platform backend doesn't support printer-specific formatting.

Next Steps

• Ribbon and UI: customize the ribbon, context menus and language.
• Editing Text: the overwrite mode shown in the status bar.
• Printing in Document Viewer: print documents that users only view.