WebEngine Markdown 編輯器範例

演示如何在混閤桌麵應用程序中集成 Web 引擎。

Markdown 編輯器 演示如何使用 QWebChannel 和 JavaScript 庫以提供用於自定義標記語言的富文本預覽工具。

Markdown 是采用純文本格式句法的輕量標記語言。某些服務，譬如 github ，承認格式，並將內容渲染成富文本當在瀏覽器中查看時。

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 QWebEngineView . To render the text, the Markdown text is converted to HTML format with the help of a JavaScript library inside the web engine. The preview is updated from the editor through QWebChannel .

運行範例

要運行範例從 Qt Creator ，打開歡迎模式，然後選擇範例從範例。更多信息，拜訪構建和運行範例 .

曝光文檔文本

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 Q_PROPERTY :

class Document : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString text MEMBER m_text NOTIFY textChanged FINAL)
public:
    explicit Document(QObject *parent = nullptr) : QObject(parent) {}
    void setText(const QString &text);
signals:
    void textChanged(const QString &text);
private:
    QString m_text;
};

The 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 textChanged 信號。

定義 setText method as follows:

void Document::setText(const QString &text)
{
    if (text == m_text)
        return;
    m_text = text;
    emit textChanged(m_text);
}

預覽文本

We implement our own PreviewPage class that publicly inherits from QWebEnginePage :

class PreviewPage : public QWebEnginePage
{
    Q_OBJECT
public:
    explicit PreviewPage(QObject *parent = nullptr) : QWebEnginePage(parent) {}
protected:
    bool acceptNavigationRequest(const QUrl &url, NavigationType type, bool isMainFrame);
};

重實現虛擬 acceptNavigationRequest method to stop the page from navigating away from the current document. Instead, we redirect external links to the system browser:

bool PreviewPage::acceptNavigationRequest(const QUrl &url,
                                          QWebEnginePage::NavigationType /*type*/,
                                          bool /*isMainFrame*/)
{
    // Only allow qrc:/index.html.
    if (url.scheme() == QString("qrc"))
        return true;
    QDesktopServices::openUrl(url);
    return false;
}

創建主窗口

The MainWindow 類繼承 QMainWindow 類：

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void openFile(const QString &path);
private slots:
    void onFileNew();
    void onFileOpen();
    void onFileSave();
    void onFileSaveAs();
    void onExit();
private:
    bool isModified() const;
    Ui::MainWindow *ui;
    QString m_filePath;
    Document m_content;
};

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 Document 類。

The actual setup of the different objects is done in the MainWindow 構造函數：

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->editor->setFont(QFontDatabase::systemFont(QFontDatabase::FixedFont));
    ui->preview->setContextMenuPolicy(Qt::NoContextMenu);

構造函數首先調用 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.

    PreviewPage *page = new PreviewPage(this);
    ui->preview->setPage(page);

Here the constructor makes sure our custom PreviewPage is used by the QWebEngineView instance in ui->preview .

    connect(ui->editor, &QPlainTextEdit::textChanged,
            [this]() { m_content.setText(ui->editor->toPlainText()); });
    QWebChannel *channel = new QWebChannel(this);
    channel->registerObject(QStringLiteral("content"), &m_content);
    page->setWebChannel(channel);

Here the 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 content .

    ui->preview->setUrl(QUrl("qrc:/index.html"));

Now we can actually load the index.html file from the resources. For more information about the file, see 創建索引文件 .

    connect(ui->actionNew, &QAction::triggered, this, &MainWindow::onFileNew);
    connect(ui->actionOpen, &QAction::triggered, this, &MainWindow::onFileOpen);
    connect(ui->actionSave, &QAction::triggered, this, &MainWindow::onFileSave);
    connect(ui->actionSaveAs, &QAction::triggered, this, &MainWindow::onFileSaveAs);
    connect(ui->actionExit, &QAction::triggered, this, &MainWindow::onExit);
    connect(ui->editor->document(), &QTextDocument::modificationChanged,
            ui->actionSave, &QAction::setEnabled);

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.

    QFile defaultTextFile(":/default.md");
    defaultTextFile.open(QIODevice::ReadOnly);
    ui->editor->setPlainText(defaultTextFile.readAll());
}

Finally, we load a default document default.md from the resources.

創建索引文件

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<head>
  <link rel="stylesheet" type="text/css" href="3rdparty/markdown.css">
  <script src="3rdparty/marked.js"></script>
  <script src="qrc:/qtwebchannel/qwebchannel.js"></script>
</head>
<body>
  <div id="placeholder"></div>
  <script>
  'use strict';
  var placeholder = document.getElementById('placeholder');
  var updateText = function(text) {
      placeholder.innerHTML = marked(text);
  }
  new QWebChannel(qt.webChannelTransport,
    function(channel) {
      var content = channel.objects.content;
      updateText(content.text);
      content.textChanged.connect(updateText);
    }
  );
  </script>
</body>
</html>

在 index.html , we load a custom stylesheet and two JavaScript libraries. markdown.css is a markdown-friendly stylesheet created by Kevin Burke. marked.js is a markdown parser and compiler designed for speed written by Christopher Jeffrey and qwebchannel.js 屬於 QWebChannel 模塊。

在 <body> element we first define a placeholder element, and make it available as a JavaScript variable. We then define the updateText helper method that updates the content of placeholder with the HTML that the JavaScript method marked() returns.

Finally, we set up the web channel to access the content proxy object and make sure that updateText() is called whenever content.text 改變。

文件和歸屬

範例綁定采用第三方許可的以下代碼：

Marked	MIT 許可
Markdown.css	Apache 許可 2.0

範例工程 @ code.qt.io