Learn more about this course.

Making a text editor using Python

In this article, we will go through each of the steps required to create a text editor using Python and guizero.

Getting started

First, we need to plan our text editor by thinking about what it needs to do and which widgets are best suited to the task. Look at an existing text editor for inspiration (open WordPad, Notepad++ or similar, and click on the file icon (or equivalent) to see some options that the text editor gives you).

You’re going to build a very basic text editor in this step. For this you will need:

A TextBox to write into
A TextBox to specify a filename
A PushButton to save our file
A PushButton to open saved files

Take a moment to design the layout of your text editor, incorporating all four elements. Will you put the save button at the top or bottom of your GUI? Will it be positioned next to the open button? How big do you want your TextBox to be?

I’m going to work through adding each component. Try to modify the code as we go so that your text editor looks like your design. Remember that guizero adds widgets in the order they are created, starting from the top. This means you might have to reorder the following code to recreate your design.

I’ll begin by designing each widget that our text editor is comprised of, before writing functions to make them work as a text editor.

My text editor will have all of the controls at the top and a TextBox filling the rest of the screen. From left to right, there will be a box for a file name, a button to open files, and a button to save them.

A sketch of a text editor design. Under the windows title bar is a long horizontal box labelled "filename" and two smaller boxes labelled "OPEN" and "SAVE", all in one row across the width of the window. Another box labelled "my editor" fills up most of the rest of the space in the window below that row.

The easiest way to arrange these controls and keep them together is to put them in a Box. It’s named file_controls because it houses the controls for creating and saving a file, but you could name yours something else as long as it clearly describes what the box contains.

from guizero import App, TextBox, PushButton, Box

app = App(title="texteditor")

# create a box to house the controls, we want the box to span the entire width of the app
file_controls = Box(app, align="top", width="fill")

# create a TextBox for the file name
file_name = TextBox(file_controls, text="text_file.txt", width=50, align="left")

# create a save button which uses the save_file function
save_button = PushButton(file_controls, text="Save", align="right")

# create an open button which uses the open_file function
open_button = PushButton(file_controls, text="Open", align="right")

# create a TextBox which is not in the box and fills the rest of the GUI
editor = TextBox(app, multiline=True, height="fill", width="fill")

app.display()

A guizero app with a layout matching that above. Below the window title bar is a textbox and "Open" and "Save" buttons in a row. Below this is a large empty textbox.

Currently, the save and open buttons don’t do anything. In order to instruct them to open or save a file, we need to create two functions.

# function for reading files
def open_file():
 with open(file_name.value, "r") as f:
 editor.value = f.read()

# function for writing files
def save_file():
 with open(file_name.value, "w") as f:
 f.write(editor.value)

These functions use the Python function open. If you are unfamiliar with it, you can read more here.

Before reading further, try to work out what the parameters file_name.value and editor.value are and determine what each function will do when called.

The open_file() function opens a file where the name of the file matches the value property of the TextBox file_name. It then sets the value property of the editor TextBox to be the contents of the file, i.e. it loads the text contents of the file into the editor TextBox.

The save_file() function performs the reverse. Can you deduce what file_name.value and editor.value are in this case?

Finally, I need to instruct the open and save PushButtons to call their respective functions when they are activated. This is done by setting the command parameter of each to the correct function, i.e. by replacing line 11 above with

save_button = PushButton(file_controls, text="Save", command=save_file, align="right")

Can you make the equivalent edit to the open_button widget?

When your text editor is functioning, you can work on making it more interesting by giving its users more style options. We’ll do this in the next step so remember to save your code.