WebEngine Markdown Editor Example¶
Demonstrates how to integrate a web engine in a hybrid desktop application.
Markdown Editor demonstrates how to use
The Markdown Editor main window is split into an editor and a preview area. The editor supports the Markdown syntax and is implemented by using
QPlainTextEdit . The document is rendered as rich text in the preview area, which is implemented by using
Running the Example¶
To run the example from Qt Creator , open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.
Exposing Document Text¶
Because we expose the current Markdown text to be rendered to the web engine through
QWebChannel , we need to somehow make the current text available through the Qt metatype system. This is done by using a dedicated
Document class that exposes the document text as a
Document class wraps a
QString to be set on the C++ side with the
setText() method and exposes it at runtime as a
text property with a
We define the
setText method as follows:
We implement our own
PreviewPage class that publicly inherits from
We reimplement the virtual
acceptNavigationRequest method to stop the page from navigating away from the current document. Instead, we redirect external links to the system browser:
Creating the Main Window¶
MainWindow class inherits the
The class declares private slots that match the actions in the menu, as well as the
isModified() helper method.
The actual layout of the main window is specified in a
.ui file. The widgets and actions are available at runtime in the
ui member variable.
m_filePath holds the file path to the currently loaded document.
m_content is an instance of the
The actual setup of the different objects is done in the
The constructor first calls
setupUi to construct the widgets and menu actions according to the UI file. The text editor font is set to one with a fixed character width, and the
QWebEngineView widget is told not to show a context menu.
Here the constructor makes sure our custom
PreviewPage is used by the
QWebEngineView instance in
textChanged signal of the editor is connected to a lambda that updates the text in
m_content. This object is then exposed to the JS side by
QWebChannel under the name
Now we can actually load the index.html file from the resources. For more information about the file, see Creating an Index File .
The menu items are connected to the corresponding member slots. The Save item is activated or deactivated depending on whether the user has edited the content.
Finally, we load a default document default.md from the resources.
Creating an Index File¶
<Code snippet "/tmp/snapshot-qt5full-6.2/qt5/qtbase/webenginewidgets/markdowneditor/resources/index.html" not found>
<body> element we first define a
updateText helper method that updates the content of
Finally, we set up the web channel to access the
content proxy object and make sure that
updateText() is called whenever
Files and Attributions¶
The example bundles the following code with third-party licenses:
Apache License 2.0
© 2022 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.