PyQt5系列教程（34）：書寫我要Markdown（QTextEdit的使用）

04-19

到目前為止，我們介紹了QLineEdit、QPlainTextEdit，今天仍是她們的姐妹篇，關於QTextEdit的使用。

在進行微信公眾號文章編輯的時候，我特別喜歡使用Markdown進行書寫，因為對於一些通過它能夠快速實現一些常用的格式，比起用一些編輯器方便很多。

Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式。Markdown的語法簡潔明了、學習容易，而且功能比純文本更強，因此有很多人用它寫博客。（來源：百度百科）

今天我們就藉助QLineEdit支持富文本的特性，實現簡單的Markdown效果。

總體介紹

QTextEdit類提供了一個用於編輯和顯示純文本和富文本的小部件。

介紹和概念

QTextEdit是一款先進的WYSIWYG查看器/編輯器，支持使用HTML樣式標籤的豐富文本格式。它經過優化處理大型文檔並對用戶輸入做出快速響應。

QTextEdit適用於段落和字元。段落是一個格式化的字元串，它被字元包裝以適應窗口小部件的寬度。默認情況下，當閱讀純文本時，一個換行符表示一個段落。文檔由零個或多個段落組成。該段中的文字按照該段的對齊方式進行調整。段落以硬換行符分隔。段落中的每個字元都有其自己的屬性，例如字體和顏色。

QTextEdit可以顯示圖像，列表和表格。如果文本太大而無法在文本編輯的視口中查看，則會出現滾動條。文本編輯可以載入純文本和富文本文件。富文本使用HTML 4標記的子集進行描述，在文本小部件中使用HTML標記。小部件自動檢測HTML標記並相應地顯示豐富的文本。例如，使用字元串」<b>Hello </ b> <i>xdbcb8！</ i>」設置標籤的文本屬性將導致標籤顯示如下所示的文本：Helloxdbcb8！

http://doc.qt.io/qt-5/richtext-html-subset.html

如果您只需要顯示一小段富文本，請使用QLabel。

Qt中豐富的文本支持旨在為應用程序添加合理的在線幫助功能提供快速，便攜和高效的方式，並為富文本編輯器提供基礎。如果您發現HTML支持不足以滿足您的需求，您可以考慮使用Qt WebKit，它提供了一個全功能的Web瀏覽器小部件。

QTextEdit上滑鼠游標的形狀默認為Qt.IBeamCursor。它可以通過viewport()的游標屬性進行更改。

使用QTextEdit作為顯示小部件

QTextEdit可以顯示一個大的HTML子集，包括表格和圖像。

使用setHtml()設置或替換文本，刪除任何現有文本並將其替換為在setHtml()調用中傳遞的文本。如果使用傳統HTML調用setHtml()，然後調用toHtml()，則返回的文本可能具有不同的標記，但呈現相同。整個文本可以用clear()刪除。

可以使用QTextCursor類或使用函數insertHtml()，insertPlainText()，append()或paste()來插入文本本身。 QTextCursor還能夠將表格或列表等複雜對象插入到文檔中，並處理創建選擇和對選定文本應用更改。

setLineWrapMode()函數用於指定您想要的換行類型，或者如果您不想要換行，則使用NoWrap。調用setLineWrapMode()以設置固定像素寬度FixedPixelWidth或字元列（例如80列）FixedColumnWidth，並使用setLineWrapColumnOrWidth()指定像素或列。如果使用WrapgetWidth WidgetWidth的自動換行，則可以使用setWordWrapMode()指定是否在空白處或任何地方斷開。

find()函數可用於查找和選擇文本中的給定字元串。

如果您想限制QTextEdit中段落的總數，例如在日誌查看器中它通常很有用，那麼您可以使用QTextDocument的maximumBlockCount屬性。

只讀型鍵盤組合

當使用QPlainTextEdit時，只讀鍵綁定僅限於導航，並且文本只能用滑鼠選擇：

文本編輯可能能夠提供一些元信息。例如，documentTitle()函數將從HTML<title>標籤內返迴文本。

注意：只有當font-size未設置為固定大小時，才能放大到HTML文檔。

使用QTextEdit作為編輯器

關於使用QTextEdit作為顯示小部件的所有信息也適用於此處。

通過setFontItalic()，setFontWeight()，setFontUnderline()，setFontFamily()，setFontPointSize()，setTextColor()和setCurrentFont()設置當前字元格式的屬性。當前段落的對齊方式使用setAlignment()進行設置。

文本的選擇由QTextCursor類處理，該類提供創建選擇，檢索文本內容或刪除選擇的功能。您可以使用textCursor()方法檢索與用戶可見游標對應的對象。如果要在QTextEdit中設置選擇，只需在QTextCursor對象上創建一個選擇，然後使用setTextCursor()將該游標設置為可見游標。選擇可以通過copy()複製到剪貼板，也可以用cut()剪切到剪貼板。整個文本可以使用selectAll()來選擇。

當游標移動並且底層格式屬性發生變化時，會發出currentCharFormatChanged()信號以反映新游標位置處的新屬性。

textChanged()信號在文本更改時發出（哪怕是由setText()設置的）。

QTextEdit包含一個可以使用document()方法檢索的QTextDocument對象。您也可以使用setDocument()設置自己的文檔對象。

QTextDocument提供了一個isModified()函數，如果文本在被載入後或者自從上次調用setModified以False作為參數後被修改，則該函數將返回True。另外它提供了撤銷和重做的方法。

下面給大家演示一下如何在QTextEdit中顯示網路圖片：

簡單的代碼解析：

@pyqtSlot()def on_pushButton_clicked(self): response = requests.get(self.lineEdit.text())#使用requests庫進行網路請求獲取內容 image1 = Image.open(BytesIO(response.content))#對得到的二進位數據進行操作 image1.save(xxx.png)#保存網路圖片到本地 del image1#刪除圖片對象(雖說會自己釋放)，沒有這個，會出現各種問題 image = QImage(xxx.png) cursor = self.textEdit.textCursor() document = self.textEdit.document() document.addResource(QTextDocument.ImageResource, QUrl("image"), image) cursor.insertImage("image")

總體思路就行讀取網路圖片並保存在本地，然後再讀取放到QTextDocument.ImageResource。把圖片放入QTextEdit的方法很多，這是其中之一，也不一定是最好的方法。

在

學點編程吧：基於pytesseract的簡單驗證碼識別?

zhuanlan.zhihu.com

裡面有關於網路獲取圖片內容更加詳細的介紹，有興趣的可以看看。

image = QImage(xxx.png)cursor = self.textEdit.textCursor()document = self.textEdit.document()

新建一個QImage
返回表示當前可見游標的QTextCursor的副本。
返回編輯器的文檔對象。

document.addResource(QTextDocument.ImageResource, QUrl("image"), image)

將資源資源添加到資源緩存，使用類型和名稱作為標識符。類型應該是QTextDocument.ResourceType中的一個值，例如這裡的QTextDocument.ImageResource。當然還包括：

cursor.insertImage("image")

游標處插入圖片。

當然還有更簡單的插入方式：

self.textEdit.append("<img src="xxx.png" />")

編輯型鍵盤組合

用於編輯的鍵綁定列表：

要選擇（標記）文本，按住Shift鍵的同時按下其中一個移動鍵，例如，Shift +右箭頭將選擇右側的字元，Shift + Ctrl +右箭頭將選擇右側的單詞等。

類歸屬

PyQt5->QtWidgets->QTextEdit

繼承關係

繼承：QAbstractScrollArea

被繼承：QTextBrowser

http://doc.qt.io/qt-5/QtextEdit.html

小例子

本期我們來實現一個簡單的Markdown編輯器，像插入表格、加粗、標題等等都沒有問題，當然和真正意義上的Markdown編輯器還是有差距的，就當測試吧。先來看看效果圖：

常用的Markdown語句基本還是實現的了。

其實這個程序非常的簡單！o((⊙﹏⊙))o

是的，這裡就不得不提到Python這個語言了。之所以Python這麼深入人心，很大程度上就是第三方庫比較多，能夠簡化編程的難度，實現程序的快速實現。

這裡我們使用markdown2庫用來解析markdown的語法。markdown2這個庫的安裝推薦使用pip方式。

pip install markdown2

我們使用markdown2用來解析markdown語法，然後將其轉換成Html。然後你懂得，我們使用QTextEdit這個富文本編輯器用來顯示這些Html。具體的顏色樣式我們使用CSS進行標記。

核心代碼如下：

class Dialog_main(QMainWindow, Ui_MainWindow): def __init__(self, parent=None): super(Dialog_main, self).__init__(parent) self.setupUi(self) def md2html(self, mdstr): extras = [code-friendly, fenced-code-blocks, footnotes,tables,code-color,pyshell,nofollow,cuddled-lists,header ids,nofollow] html = """ <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <style> .hll { background-color: #ffffcc } .c { color: #0099FF; font-style: italic } /* Comment */ .err { color: #AA0000; background-color: #FFAAAA } /* Error */ .k { color: #006699; font-weight: bold } /* Keyword */ .o { color: #555555 } /* Operator */ .ch { color: #0099FF; font-style: italic } /* Comment.Hashbang */  </style> </head> <body> %s </body> </html> """ ret = markdown2.markdown(mdstr, extras=extras) return html % ret @pyqtSlot() def on_plainTextEdit_textChanged(self): md = self.plainTextEdit.toPlainText() newhtml = self.md2html(md) self.textEdit.setHtml(newhtml)

通過上面的代碼我們已經看出，解析markdown語法的就一句話：

markdown2.markdown(mdstr, extras=extras)

通過這句話我們就實現了markdown向html的解析了。extras是幹嘛的呢？

https://github.com/trentm/python-markdown2/wiki/Extras

然後我們通過QTextEdit實現Html語言的展示。

QTextEdit.toHtml()以HTML格式返迴文本編輯的文本。

QTextEdit.setHtml()更改文本編輯的文本。任何以前的文本都會被刪除，輸入文本被解釋為HTML格式的富文本。這裡我們用的是這種。這個有個前提，就是在QPlainTextEdit文本內容的發生變化的時候才會執行這些操作，因為我們響應了on_plainTextEdit_textChanged這個信號。

最後

ok，今天的介紹就到這裡吧，QTextEdit就結束了，它的很多屬性都和QPlainTextEdit相同，有興趣的話可以自己看一下。如果你喜歡本篇文章，請給我點贊

讚賞（推薦）

分享給你的好友們吧！

關注微信公眾號：學點編程吧，發送：pyqt534，可以獲得相應的源碼。加油！

(? ??_??)? (*?????)