Notepad doesn't need much introduction. It's a plaintext editor that's been part of Windows since the beginning, and similar applications exist in every GUI desktop ever created.
In this tutorial, we'll build a Notepad clone in Python using PyQt5, a task that is made particularly easy by Qt's built-in QPlainTextEdit text editor widget. A few signal-hookups is all that is needed to implement a fully working text editor app.
Getting Started with No2Pads
The full source code for No2Pads is available in the 15 minute apps repository. You can download/clone to get a working copy, then install requirements using:
pip3 install -r requirements.txt
You can then run No2Pads with:
python3 notepad.py
Read on for a walkthrough of how the code works.
Setting Up the QPlainTextEdit Widget
Qt provides a complete plain text editor component widget in the form of QPlainTextEdit. This widget displays an editing area in which you can type, click around and select text. It's the foundation of our Python text editor.
To add the widget to our QMainWindow, we create it as normal and then set it as the central widget. We don't need a layout, since we won't be adding any other widgets.
We also configure the editor to use the system fixed-width font (QFontDatabase.FixedFont) at point size 12, which is ideal for a plain text editor.
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtPrintSupport import *
import os
import sys
class MainWindow(QMainWindow):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.editor = QPlainTextEdit() # Could also use a QTextEdit and set self.editor.setAcceptRichText(False)
self.setCentralWidget(self.editor)
# Setup the QTextEdit editor configuration
fixedfont = QFontDatabase.systemFont(QFontDatabase.FixedFont)
fixedfont.setPointSize(12)
self.editor.setFont(fixedfont)
# self.path holds the path of the currently open file.
# If none, we haven't got a file open yet (or creating new).
self.path = None
Adding Cut, Copy, Paste, and Undo with QPlainTextEdit Slots
To be useful, a text editor needs to perform standard operations — copy, paste, cut, insert, and clear. Implementing all these operations on the text buffer directly would take some work. However, the QPlainTextEdit widget provides built-in support for all of this through Qt slots.
Triggering any of these operations is simply a case of calling the slot at the appropriate time. Below we add a set of toolbar buttons for editing, each defined as a QAction. Connecting the .triggered signal from the QAction to the relevant slot enables the behaviour.
cut_action = QAction(QIcon(os.path.join('images', 'scissors.png')), "Cut", self)
cut_action.setStatusTip("Cut selected text")
cut_action.triggered.connect(self.editor.cut)
edit_toolbar.addAction(cut_action)
edit_menu.addAction(cut_action)
copy_action = QAction(QIcon(os.path.join('images', 'document-copy.png')), "Copy", self)
copy_action.setStatusTip("Copy selected text")
copy_action.triggered.connect(self.editor.copy)
edit_toolbar.addAction(copy_action)
edit_menu.addAction(copy_action)
paste_action = QAction(QIcon(os.path.join('images', 'clipboard-paste-document-text.png')), "Paste", self)
paste_action.setStatusTip("Paste from clipboard")
paste_action.triggered.connect(self.editor.paste)
edit_toolbar.addAction(paste_action)
edit_menu.addAction(paste_action)
select_action = QAction(QIcon(os.path.join('images', 'selection-input.png')), "Select all", self)
select_action.setStatusTip("Select all text")
select_action.triggered.connect(self.editor.selectAll)
edit_menu.addAction(select_action)
The complete list of built-in editing slots available on a QPlainTextEdit are —
| Slot | Operation |
|---|---|
.clear() |
Clear selected text |
.cut() |
Cut selected text to clipboard |
.copy() |
Copy selected text to clipboard |
.paste() |
Paste clipboard at cursor |
.undo() |
Undo last action |
.redo() |
Redo last undo'd action |
.insertPlainText(text) |
Insert plain text at cursor |
.selectAll() |
Select all text in document |
There are also a set of signals available, such as `.copyAvailable` to update the UI when these operations are possible. You can use these to enable and disable buttons when they can't be used.
Implementing File Open, Save, and Print Operations
To complete a working text editor we need to be able to open and save files. There are no built-in handlers for doing this, but we can construct simple slots ourselves, and trigger them using menubar actions as before.
First we define the file_open method. When called, it uses QFileDialog.getOpenFileName to display a platform-native file open dialog. The selected path is then used to open the file using a Python file context manager.
If that completes without throwing any errors, we set the contents to the text editor widget. Finally, we store the file path (so Save writes to the correct place) and update the window title.
def file_open(self):
path, _ = QFileDialog.getOpenFileName(self, "Open file", "", "Text documents (*.txt);All files (*.*)")
if path:
try:
with open(path, 'rU') as f:
text = f.read()
except Exception as e:
self.dialog_critical(str(e))
else:
self.path = path
self.editor.setPlainText(text)
self.update_title()
There are two methods for saving files — file_save and file_saveas — the former for saving an open file which already has a filename, the latter for saving a new file.
The file_save method checks whether we have a known path stored in self.path. If not, it calls file_saveas to show a dialog to get a path. Choosing "Save As" from the menu follows this same path.
In either case, the save itself is handled by _save_to_path() which accepts a target path. It gets the current plain text content of the editor, then opens a file and writes it to disk.
Errors are displayed using a dialog box callback. If we saved successfully we store the path for future Save calls and update the window title.
def file_save(self):
if self.path is None:
# If we do not have a path, we need to use Save As.
return self.file_saveas()
self._save_to_path(self.path)
def file_saveas(self):
path, _ = QFileDialog.getSaveFileName(self, "Save file", "", "Text documents (*.txt);All files (*.*)")
if not path:
# If dialog is cancelled, will return ''
return
self._save_to_path(self.path)
def _save_to_path(self, path):
text = self.editor.toPlainText()
try:
with open(path, 'w') as f:
f.write(text)
except Exception as e:
self.dialog_critical(str(e))
else:
self.path = path
self.update_title()
Printing from QPlainTextEdit
Adding print support is straightforward with QPlainTextEdit. First we show a QPrintDialog to allow the user to select the printer and options. If they click OK on this dialog, it exits with a True state and the selected printer is available via dlg.printer(). Pass this to the editor's print_() method to trigger the print.
def file_print(self):
dlg = QPrintDialog()
if dlg.exec_():
self.editor.print_(dlg.printer())
Connecting File Actions to the Toolbar and Menu
The final step is to hook these all up to QAction.triggered signals in our toolbar and menubar.
file_toolbar = QToolBar("File")
file_toolbar.setIconSize(QSize(14, 14))
self.addToolBar(file_toolbar)
file_menu = self.menuBar().addMenu("&File")
open_file_action = QAction(QIcon(os.path.join('images', 'blue-folder-open-document.png')), "Open file...", self)
open_file_action.setStatusTip("Open file")
open_file_action.triggered.connect(self.file_open)
file_menu.addAction(open_file_action)
file_toolbar.addAction(open_file_action)
save_file_action = QAction(QIcon(os.path.join('images', 'disk.png')), "Save", self)
save_file_action.setStatusTip("Save current page")
save_file_action.triggered.connect(self.file_save)
file_menu.addAction(save_file_action)
file_toolbar.addAction(save_file_action)
saveas_file_action = QAction(QIcon(os.path.join('images', 'disk--pencil.png')), "Save As...", self)
saveas_file_action.setStatusTip("Save current page to specified file")
saveas_file_action.triggered.connect(self.file_saveas)
file_menu.addAction(saveas_file_action)
file_toolbar.addAction(saveas_file_action)
print_action = QAction(QIcon(os.path.join('images', 'printer.png')), "Print...", self)
print_action.setStatusTip("Print current page")
print_action.triggered.connect(self.file_print)
file_menu.addAction(print_action)
file_toolbar.addAction(print_action)
Ideas to Extend Your Python Text Editor
That's a basic functional text editor implemented in Python with PyQt5. You could extend No2Pads further to support —
- Implement clear and clear all from the edit slots.
- Add support for configurable display colours, styles, etc. Take a look at the Qt styles framework.
- Add support for syntax highlighting or Markdown formatting.
For an example of a Rich Text Editor, check out Megasolid Idiom, a Rich Text Editor
Create GUI Applications with Python & Qt6 by Martin Fitzpatrick
(PyQt6 Edition) The hands-on guide to making apps with Python — Over 15,000 copies sold!
