關(guān)注、星標(biāo)公眾號，直達(dá)精彩內(nèi)容

ID：技術(shù)讓夢想更偉大

作者：李肖遙

編輯器" style="font-weight: bold;padding-top: 30px;padding-bottom: 30px;color: rgb(19, 92, 224);font-size: 20px;">Markdown編輯器

Markdown 是一種具有純文本格式語法的輕量級標(biāo)記語言，Markdown Editor 演示了如何使用 QWebChannel 和 JavaScript 庫為自定義標(biāo)記語言提供富文本預(yù)覽工具。

Markdown 編輯器主窗口分為編輯器和預(yù)覽區(qū)，編輯器支持 Markdown 語法，使用 QPlainTextEdit 實現(xiàn)；文檔在預(yù)覽區(qū)渲染為富文本，通過QWebEngineView實現(xiàn)。

為了呈現(xiàn)文本，Markdown 文本在 Web 引擎內(nèi)的 JavaScript 庫的幫助下轉(zhuǎn)換為 HTML 格式，預(yù)覽是通過 QWebChannel 從編輯器更新的。

下圖演示如何將 Web 引擎集成到混合桌面應(yīng)用程序中。

我們使用例子，左側(cè)輸入Markdown語法的文本，右側(cè)就是其預(yù)覽的樣式了。

編輯器" style="font-weight: bold;padding-top: 30px;padding-bottom: 30px;color: rgb(19, 92, 224);font-size: 20px;">實現(xiàn)原理以及步驟

公開文檔文本

通過 QWebChannel 將要渲染的當(dāng)前 Markdown 文本暴露給 Web 引擎，所以我們需要以某種方式通過 Qt 元類型系統(tǒng)使當(dāng)前文本可用，這是通過使用將文檔文本公開為 Q_PROPERTY 的專用 Document 類來完成的：

通過 QWebChannel 將要渲染的當(dāng)前 Markdown 文本暴露給 Web 引擎，將文檔文本公開為 Q_PROPERTY 的專用 Document 類，然后通過 Qt 元類型系統(tǒng)使當(dāng)前文本可用。

Document 類使用setText()方法包裝要在C 端設(shè)置的 QString，并在運行時將其作為帶有 textChanged 信號的文本屬性公開。

定義 setText 方法如下：

void?Document::setText(const?QString?