Python Tkinter Editor + Examples

In this Python Tkinter tutorial, we will learn about Python Tkinter Editor with help of some examples. And we will also cover the following topics.

  • Python Tkinter Editor
  • Python Tkinter text editor
  • Python Tkinter online editor
  • Python Tkinter code editor
  • Python tkinter GUI editor
  • Python Tkinter JSON editor
  • Python Tkinter image editor

Python Tkinter Editor

In the section, we will learn how to create an editor using Python Tkinter. But before learning about Python Tkinter editor, we should have a piece of knowledge about an “Editor“.

An Editor is a space where a user can write a code, text, information, or any useful text. It also contains the process of selecting, preparing, and writing any text for an article, newspaper, etc.

Code:

In the following code, we have to make a frame and inside that frame, there is an editor where a user can insert a text inside a box.

from tkinter import *

ws = Tk()

ws.geometry('500x500')
ws.title("Python Guides")

def call():
    text = text_edit.get(0.3,END)
    print(text)

text_edit = Text(ws, width=56, height=25)

text_edit.pack()

ws.mainloop()

Output:

In the below output, we can see how our code is working as in output it is showing a frame and inside that frame, there is an editor.

Python Tkinter Editor Example
Python Tkinter Editor

Read: Python Tkinter Table Tutorial

Python Tkinter text editor

In this section, we will learn about how to edit the text in python Tkinter text editor.

Before moving forward, we should have a piece of knowledge about what is a text editor?

From the beginning of computer learning or computer programing, we might have worked on the different workspaces where different editors are there. And we use them in our daily life some of which are Wordpad, Notepad, etc.

This example can easily make us understand and makes a clear image about the text editor.

Code:

In the following code, we have to make a frame and inside that frame, there is a text box where we can exit a text. And at the bottom, there is a button where it shows text on a console that we write inside a text box.

from tkinter import *

ws = Tk()

ws.geometry('500x500')
ws.title("Python Guides")

def call():
    text = text_edit.get(0.3,END)
    print(text)


text_edit = Text(ws, width=56, height=25)

text_edit.pack()

text_button = Button(ws,text="Show Text", command= call)
text_button.pack(pady =10)

ws.mainloop()

Output:

The following code gives us a below output where a user can input a text inside a text editor field. And by clicking on the “Show Text” button, it shows a text to the console.

Python Tkinter text editor
Python Tkinter text editor example

In the below output, we can see a user has entered some text and it is visible on a text editor where a user can write and make corrections in the text.

Python Tkinter text 1 Editor
Text Editor in Python Tkinter

Read: Python Tkinter Quiz

Python Tkinter online editor

In this section, we will learn how the Python Tkinter online editor works.

The online editor is a workspace where programmers write or edit their code in online mode.

Code:

from tkinter import *
from tkinter.filedialog import askopenfilename, asksaveasfilename
import subprocess

ws = Tk()
ws.title('Python Guides')

Cpath = ''

def Runthiscode():
    global Cpath
    if Cpath == '':
        SaveMessage = Toplevel()
        message = Label(SaveMessage, text="Save this File")
        message.pack()
        return
    Command = f'python {Cpath}'
    process = subprocess.Popen(Command, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)
    result, Error = process.communicate()
    Result.insert('1.0',result)
    Result.insert('1.0',Error)
     

def Openthisfile():
    path = askopenfilename(filetypes=[('Python Files','*.py')])
    with open(path, 'r') as file:
        code = file.read()
        editor.delete('1.0', END)
        editor.insert('1.0', code)
        global Cpath
        Cpath = path

def SavethisfileAs():
    global gpath
    if Cpath =='':
        path = asksaveasfilename(filetypes=[('Python Files','*.py')])
    else:
        path = Cpath    
    with open(path, 'w') as file:
        code = editor.get('1.0', END)
        file.write(code)

editor = Text()
editor.config(bg='white', fg='blue', insertbackground='black')
editor.pack()

Result = Text(height=7)
Result.config(bg='black', fg='green')
Result.pack()
 
Menu_option = Menu(ws)

File_option = Menu(Menu_option, tearoff=0)
File_option.add_command(label='Open', command = Openthisfile)
File_option.add_command(label='Save', command = SavethisfileAs)
File_option.add_command(label='SaveAs', command = SavethisfileAs)
File_option.add_command(label='Exit', command = exit)
Menu_option.add_cascade(label='File', menu = File_option)

Compile_option = Menu(Menu_option, tearoff=0)
Compile_option.add_command(label='compile', command = Runthiscode)
Menu_option.add_cascade(label='compile', menu = Compile_option)

ws.config(menu=Menu_option)
ws.mainloop()

These are the main highlights from the code.

  • Cpath = ‘ ‘ is used to give the path to the file.
  • Result.insert() is used to insert the values.
  • editor.delete() is used to delete the values.
  • Menu_option.add_cascade() is used to setup the hierarchical menu to parent cell.

Output:

In the below output, we use the online editor to run the code. And, we write the code, and then we will save it.

Python Tkinter Online editor
Python tkinter online editor

After saving the code, we click on the compile option as we see in the output.

Python Tkinter Online editor example
Python tkinter onlinee editor example

After compiling, the following final output will be generated.

Python Online Compiler Editor
online editor Python tkinter

Read: Python QR code generator using pyqrcode in Tkinter

Python Tkinter code editor

In this section, we will learn how to create a code editor using Python Tkinter.

Before Moving to code, we need to know what is a code editor and why we use it?

The code editor is a workspace where a programmer or a developer writes their code to run the following problem statement that is required to fulfill.

We use a code editor to write different codes of different languages like Python, C++, Java, R, Ruby, etc. following their grammar of syntaxes that helps to run that code as per requirement.

Code:

In the following code editor, we have to make an editor box where we can write a program, and also it shows the syntax error of that code.

from tkinter import *
from tkinter.filedialog import askopenfilename, asksaveasfilename
import subprocess

ws = Tk()
ws.title('Python Guides')

Cpath = ''

def Runthiscode():
    global Cpath
    if Cpath == '':
        SaveMessage = Toplevel()
        message = Label(SaveMessage, text="Save this File")
        message.pack()
        return
    Command = f'python {Cpath}'
    process = subprocess.Popen(Command, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)
    result, Error = process.communicate()
    Result.insert('1.0',result)
    Result.insert('1.0',Error)
     

def Openthisfile():
    path = askopenfilename(filetypes=[('Python Files','*.py')])
    with open(path, 'r') as file:
        code = file.read()
        editor.delete('1.0', END)
        editor.insert('1.0', code)
        global Cpath
        Cpath = path

def SavethisfileAs():
    global gpath
    if Cpath =='':
        path = asksaveasfilename(filetypes=[('Python Files','*.py')])
    else:
        path = Cpath    
    with open(path, 'w') as file:
        code = editor.get('1.0', END)
        file.write(code)

editor = Text()
editor.config(bg='white', fg='blue', insertbackground='black')
editor.pack()

Result = Text(height=7)
Result.config(bg='black', fg='green')
Result.pack()
 
Menu_option = Menu(ws)

File_option = Menu(Menu_option, tearoff=0)
File_option.add_command(label='Open', command = Openthisfile)
File_option.add_command(label='Save', command = SavethisfileAs)
File_option.add_command(label='SaveAs', command = SavethisfileAs)
File_option.add_command(label='Exit', command = exit)
Menu_option.add_cascade(label='File', menu = File_option)

Compile_option = Menu(Menu_option, tearoff=0)
Compile_option.add_command(label='compile', command = Runthiscode)
Menu_option.add_cascade(label='compile', menu = Compile_option)

ws.config(menu=Menu_option)
ws.mainloop()

Output:

Hereafter running this code, we got a workspace where we can write our code and at the bottom, we can see our compiled program where it runs the code. And if any error is there, it will show that as in the below code there was a syntax error which is visible to us on a console.

python tkinter code editor
Syntax error Output

After checking the error and making it correct, we got the final output of a code.

python tkinter code editor example
Python tkinter code editor

The final output shows us a table in which rows and columns are there and the grid line helps to divide that inside a table.

Python tkinter code editor example
Python tkinter code editor example

Read: How to Create a Snake Game in Python Tkinter

Python tkinter GUI editor

In this section, we are learning about a Python Tkinter GUI Editor. But what is a GUI Editor?

GUI stands for Graphical User Interface and a “GUI Editor” is a workspace where a normal user uses it to write, edit or prepare content over a text box.

Code:

In the following code, we have to make a workspace and a file inside a menu bar which is helping to save, save as, open, and exit from a python guides notepad.

from tkinter import *
from tkinter.filedialog import askopenfilename, asksaveasfilename
import subprocess

ws = Tk()
ws.title('Python Guides')

Cpath = ''

def Openthisfile():
    path = askopenfilename(filetypes=[('Python Files','*.py')])
    with open(path, 'r') as file:
        code = file.read()
        editor.delete('1.5', END)
        editor.insert('1.5', code)
        global Cpath
        Cpath = path

def SavethisfileAs():
    global gpath
    if Cpath =='':
        path = asksaveasfilename(filetypes=[('Python Files','*.py')])
    else:
        path = Cpath    
    with open(path, 'w') as file:
        code = editor.get('1.5', END)
        file.write(code)

editor = Text()
editor.config(bg='white', fg='blue', insertbackground='black')
editor.pack()

Result = Text(height=7)
Result.config(bg='black', fg='green')
Result.pack()
 
Menu_option = Menu(ws)

File_option = Menu(Menu_option, tearoff=0)
File_option.add_command(label='Open', command = Openthisfile)

Output:

After running the following code, we got this output, where we can create a workspace and add some context.

Python Tkinter GUI editor
Python tkinter GUI editor

After adding context, we are now saving this file by using steps

  • Click on “File” option.
  • Look for the “Save” button.
  • Click on Save inside a file menu bar button
Python Tkinter GUI Example
Python tkinter GUI editor example
  • After clicking on save button, it will ask for location where we want to save a file.
  • Give a file name by which we want to save a file.
  • Click on “Save” button.
  • Our file will be saved.
GUI editor Python tkinter
GUI editor Python tkinter

To check whether our text is saved or not we can open a file from that location where we save and we can get this as an output.

GUI editor using Python tkinter
GUI editor using Python Tkinter

Read: Python Tkinter Image

Python Tkinter JSON editor

In this section, we are learning about the Python Tkinter JSON editor.

What is JSON Editor?

JSON editor is an editor where we can view, edit, open, and print ‘.json‘ files. JSON stands for JavaScript Object Notation.

In the following code, we make a form from where a user can give input, and that input data is converted into a JSON file. And we can use the generated file to edit, view, open, and print.

from tkinter import *
import json
from tkinter.filedialog import asksaveasfile
 
ws = Tk()
ws.geometry('640x300')
ws.title('Python Guides')
 

 
test = 1
def jSONfile(path, fileName, data):
        json.dump(data, path)
 
path = './'
 
 
def check():
    x= int(ID.get())
    y = test * Name.get()
    z = Batch.get()
    print(x)
    print(y)
    print(z)
    data = {}
    data['ID'] = x
    data['Name'] = y
    data['Batch'] = z
    File = [('JSON_File', '*.json')]
    File_Name='IOTEDU'
    File_position = asksaveasfile(filetypes = File,defaultextension = json,initialfile='IOTEDU')
    jSONfile(File_position, File_Name, data)

id = Label(ws, text="ID:")
ID = Entry(ws)
name = Label(ws, text="Name:")
Name = Entry(ws)
batch = Label(ws, text="Batch:")
Batch = Entry(ws)

 
 
id.grid(row=0, column=0)
ID.grid(row=0,column=1)
name.grid(row=4,column=0)
Name.grid(row=4, column=1)
batch.grid(row=6, column=0)
Batch.grid(row=6, column=1)

submit = Button(ws,text='Submit',command = check).grid(row=8, column=1)
 
 
 
ws.mainloop()

After running the following code, we got a form that asks for an Id, name, and batch. And after submitting, we got the following data in JSON format and which we can later edit view, and print.

Python tkinter Json editor
Python Tkinter JSON editor

Now in the below image, we can see we have entered an ID, Name, and Batch, and submitting that for JSON output.

Python tkinter Json examp editor
JSON editor using Python Tkinter

After Submitting, we got this output which is in JSON format.

JSON editor using Python Tkinter
JSON editor using Python Tkinter

Read: Python Tkinter Colors

Python Tkinter image editor

In this section, we will learn How to create an image editor using Python Tkinter.

An image editor is used to editing images like rotating, adding borders, adding contrast, increasing brightness, add borders, and make the image blur. With help of image editing, we can improve image visibility.

Code:

In the following code, we have made an image editor where we can select an image from a local location. And add it here and other functions are to make image blur, adding contrast, increasing brightness, rotate, flip left to right, or top to bottom, and to add the border.

from tkinter import *
from tkinter import ttk
from tkinter import filedialog
from tkinter.filedialog import askopenfilename,asksaveasfilename
from PIL import Image, ImageTk, ImageFilter, ImageEnhance, ImageOps
import os
# contrast border thumbnail 
ws = Tk()
ws.title("Simple Photo Editor")
ws.geometry("640x640")
# create functions
def selected():
    global image_path, image
    image_path = filedialog.askopenfilename(initialdir=os.getcwd()) 
    image = Image.open(image_path)
    image.thumbnail((350, 350))
    #imgg = img.filter(ImageFilter.BoxBlur(0))
    image1 = ImageTk.PhotoImage(image)
    canvas2.create_image(300, 210, image=image1)
    canvas2.image=image1                                                                                                                                                                                                                
def blur(event):
    global image_path, image1, imgg
    for m in range(0, v1.get()+1):
            image = Image.open(image_path)
            image.thumbnail((350, 350))
            imgg = image.filter(ImageFilter.BoxBlur(m))
            image1 = ImageTk.PhotoImage(imgg) 
            canvas2.create_image(300, 210, image=image1)
            canvas2.image=image1
def brightness(event):
    global image_path, image2, image3
    for m in range(0, v2.get()+1):
            image = Image.open(image_path)
            image.thumbnail((350, 350))
            imgg = ImageEnhance.Brightness(image)
            image2 = imgg.enhance(m)
            image3 = ImageTk.PhotoImage(image2)
            canvas2.create_image(300, 210, image=image3)
            canvas2.image=image3
def contrast(event):
    global image_path, image4, image5
    for m in range(0, v3.get()+1):
            image = Image.open(image_path)
            image.thumbnail((350, 350))
            imgg = ImageEnhance.Contrast(image)
            image4 = imgg.enhance(m)
            image5 = ImageTk.PhotoImage(image4)
            canvas2.create_image(300, 210, image=image5)
            canvas2.image=image5
def rotate_image(event):
        global image_path, image6, image7
        image = Image.open(image_path)
        image.thumbnail((350, 350))
        image6 = image.rotate(int(Rotate_combo.get()))
        image7 = ImageTk.PhotoImage(image6)
        canvas2.create_image(300, 210, image=image7)
        canvas2.image=image7
        
def flip_image(event):
        global image_path, image8, image9
        image = Image.open(image_path)
        image.thumbnail((350, 350))
        if Flip_combo.get() == "FLIP LEFT TO RIGHT":
            image8 = image.transpose(Image.FLIP_LEFT_RIGHT)
        elif Flip_combo.get() == "FLIP TOP TO BOTTOM":
            image8 = image.transpose(Image.FLIP_TOP_BOTTOM)
        image9 = ImageTk.PhotoImage(image8)
        canvas2.create_image(300, 210, image=image9)
        canvas2.image=image9   
def image_border(event):
    global image_path, image10, image11
    image = Image.open(image_path)
    image.thumbnail((350, 350))
    image10 = ImageOps.expand(image, border=int(Border_combo.get()), fill=95)
    image11 = ImageTk.PhotoImage(image10)
    canvas2.create_image(300, 210, image=image11)
    canvas2.image=image11    
image1 = None
image3 = None
image5 = None
image7 = None
image9 = None
image11 = None
def save():
    global image_path, imgg, image1, image2, image3, image4, image5, image6, image7, image8, image9, image10, image11
    #file=None
    ext = image_path.split(".")[-1]
    file=asksaveasfilename(defaultextension =f".{ext}",filetypes=[("All Files","*.*"),("PNG file","*.png"),("jpg file","*.jpg")])
    if file: 
            if canvas2.image==image1:
                imgg.save(file)
            elif canvas2.image==image3:
                image2.save(file)
            elif canvas2.image==image5:
                image4.save(file)
            elif canvas2.image==image7:
                image6.save(file)
            elif canvas2.image==image9:
                image8.save(file)
            elif canvas2.image==image11:
                image10.save(file)        
# create labels, scales and comboboxes
blurr = Label(ws, text="Blur:", font=("ariel 17 bold"), width=9, anchor='e')
blurr.place(x=15, y=8)
v1 = IntVar()
scale = ttk.Scale(ws, from_=0, to=10, variable=v1, orient=HORIZONTAL, command=blur) 
scale.place(x=150, y=10)
bright = Label(ws, text="Brightness:", font=("ariel 17 bold"))
bright.place(x=8, y=50)
v2 = IntVar()   
Scale1 = ttk.Scale(ws, from_=0, to=10, variable=v2, orient=HORIZONTAL, command=brightness) 
Scale1.place(x=150, y=55)
contrast = Label(ws, text="Contrast:", font=("ariel 17 bold"))
contrast.place(x=35, y=92)
v3 = IntVar()   
Scale2 = ttk.Scale(ws, from_=0, to=10, variable=v3, orient=HORIZONTAL, command=contrast) 
Scale2.place(x=150, y=100)
Rotate = Label(ws, text="Rotate:", font=("ariel 17 bold"))
Rotate.place(x=370, y=8)
values = [0, 90, 180, 270, 360]
Rotate_combo = ttk.Combobox(ws, values=values, font=('ariel 10 bold'))
Rotate_combo.place(x=460, y=15)
Rotate_combo.bind("<<ComboboxSelected>>", rotate_image)
Flip = Label(ws, text="Flip:", font=("ariel 17 bold"))
Flip.place(x=400, y=50)
values1 = ["FLIP LEFT TO RIGHT", "FLIP TOP TO BOTTOM"]
Flip_combo = ttk.Combobox(ws, values=values1, font=('ariel 10 bold'))
Flip_combo.place(x=460, y=57)
Flip_combo.bind("<<ComboboxSelected>>", flip_image)
border = Label(ws, text="Add border:", font=("ariel 17 bold"))
border.place(x=320, y=92)
values2 = [i for i in range(10, 45, 5)]
Border_combo = ttk.Combobox(ws, values=values2, font=("ariel 10 bold"))
Border_combo.place(x=460, y=99)
Border_combo.bind("<<ComboboxSelected>>", image_border)
# create canvas to display image
canvas2 = Canvas(ws, width="600", height="420", relief=RIDGE, bd=2)
canvas2.place(x=15, y=150)
# create buttons
button1 = Button(ws, text="Select Image", bg='black', fg='gold', font=('ariel 15 bold'), relief=GROOVE, command=selected)
button1.place(x=100, y=595)
button2 = Button(ws, text="Save", width=12, bg='black', fg='gold', font=('ariel 15 bold'), relief=GROOVE, command=save)
button2.place(x=280, y=595)
button3 = Button(ws, text="Exit", width=12, bg='black', fg='gold', font=('ariel 15 bold'), relief=GROOVE, command=ws.destroy)
button3.place(x=460, y=595)
ws.mainloop()

Output:

After running the following code, we came up with an output where we can select an image from a local location and edit it inside a box.

Python Tkinter Image editor
Python Tkinter image editor

We can see there is a border added inside this image with “20” and flip an image from Left to Right.

Python Tkinter Image editor Example
Python Tkinter image editor example

You may also like reading the following articles.

In this tutorial, we learned about Python Tkinter Editor and we have also covered the following topics.

  • Python Tkinter editor
  • Python Tkinter text editor
  • Python Tkinter online editor
  • Python Tkinter code editor
  • Python tkinter GUI editor
  • Python Tkinter JSON editor
  • Python Tkinter image editor