用Qt寫(xiě)一個(gè)簡(jiǎn)單的Markdown編輯器

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

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

作者：李肖遙

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

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

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

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

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

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

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

公開(kāi)文檔文本

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

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

Document 類(lèi)使用setText()方法包裝要在C 端設(shè)置的 QString，并在運(yùn)行時(shí)將其作為帶有 textChanged 信號(hào)的文本屬性公開(kāi)。

定義 setText 方法如下：

void?Document::setText(const?QString?