QT學習小demo之LightMD（MarkDown編輯器）

Asche發表於2019-05-08
QT

很早之前就有了寫一個類似Windows記事本的想法，加上最近也剛好在學編譯原理，所以就想把兩者結合起來，於是就打算結合MarkDown，開發一款MarkDown編輯器。
不過由於我之前一直使用的是Java語言居多，對c++並不熟悉，所以一些糟糕的程式碼風格和規範還望各位大佬諒解！

LightMD 即一款基於QT實現的markdown編輯器，當然也可以作為程式碼編輯器，由於時間與個人能力等原因，目前實現的功能非常有限！

主要包括：

  • 支援語法高亮（目前支援C/C++）

  • 支援MarkDown預覽

  • 程式碼行數、文字資訊統計等

  • 其它一些基本的檔案處理相關功能

好了直接上圖吧

image

image

本專案主要目的在於學習qt相關的windows開發，其中主要有以下幾個模組：

  • 整體佈局
  • 程式碼編輯器
  • markdown編輯器

整體佈局

最外面當然是_QMainWindow_， 然後從上到下依次是

  • menuBar
  • QSplitter
  • statusBar

menubar的簡單示例如下：

    QMenu *menuFile = menuBar()->addMenu(tr("&File"));
    QAction *itemNew = new QAction(tr("&New"), this);
    itemNew->setStatusTip(tr("Create a new file"));
    connect(itemNew, &QAction::triggered, this, &Home::newFile);
    menuFile->addAction(itemNew);

其中QMenu就是最外面顯示的menu，即滑鼠不點選就可以看見的那個menu；QAction則是QMenu上眾多選項之一；然後是呼叫connect函式為QAction設定點選事件。

中間主體則是QSplitter，


    QSplitter *centralSplitter = new QSplitter(this);

    setCentralWidget(centralSplitter);

    centralSplitter->addWidget(codeEditor);
    centralSplitter->addWidget(preview);

首先new一個QSplitter，然後將其設定為中間元件，然後在QSplitter上再新增兩個元件，分別為程式碼編輯區域和markdown預覽區域的元件。
這兩個區域在文章下面將有具體講解。

底部則是statusBar：

    label = new QLabel("LightMD is ready!");
    textType = new QLabel("Plain Text");
    codeLength = new QLabel("Length:652");
    codeLines = new QLabel("Lines:54");

    statusBar()->addWidget(label, 1);
    statusBar()->addPermanentWidget(textType);
    statusBar()->addPermanentWidget(codeLength);
    statusBar()->addPermanentWidget(codeLines);

label用來顯示正常的提示訊息；textType用來顯示當前的文字型別，如markdown或c++等；codeLength和codeLines就不用過多解釋了吧。

程式碼編輯器

其中程式碼編輯框我糾結了半天，用QPlainTextEdit好呢，還是QTextEdit好？？？其中StackOverflow上一高贊回答如下：

QPlainTextEdit is an advanced viewer/editor supporting plain text. It is optimized to handle large documents and to respond quickly to user input.

QPlainText uses very much the same technology and concepts as QTextEdit, but is optimized for plain text handling.

QPlainTextEdit works on paragraphs and characters. A paragraph is a formatted string which is word-wrapped to fit into the width of the widget. By default when reading plain text, > one newline signifies a paragraph. A document consists of zero or more paragraphs. Paragraphs are separated by hard line breaks. Each character within a paragraph has its
own attributes, for example, font and color.

簡單點說，就是QPlainTextEdit對普通文字的支援度特別高，也就是很方便，不過一些複雜功能卻不能實現；而QTextEdit是一個更加重量級的元件，支援各種複雜功能，不過一些簡單的功能可能沒有QPlainTextEdit使用的那麼方便。

兩者我都簡單試用後，發現還是QPlainTextEdit用著比較方便，於是就決定採用QPlainTextEdit了。

然後關於程式碼框和程式碼行數的實現，QT的官方demo裡面好像有現成的（不得不說，qt的demo是真的多！）。

image

所以，這裡的實現我就不解釋啥了。

markdown編輯器

這裡官方也有個markdown的demo，下載就行了。不過要注意的是，這裡由於用到了web引擎，所以這裡必須使用vs來編譯執行，安裝vs環境這裡不懂的還是自行百度吧。

官方demo中好像實現的都挺全的，我只是做了個小修改，然後就轉移到LightMD來了。
其中markdown預覽流程是先將markdown內容轉換為對應的html內容，然後web引擎來顯示HTML頁面。
其中轉換官方也全部為我們做好了。
image
由於時間關係，當然是直接套用了。不過以後有空的話，自己再去實現一下吧。

最後，LightMd專案地址：LightMD

相關文章