设为首页 加入收藏

TOP

使用Python和Tkinter构建简单的Markdown编辑器(一)
2023-07-26 08:18:25 】 浏览:367
Tags:使用 Python Tkinter 简单的 Markdown

Markdown编辑器大家应该都知道,很受程序员喜欢。许多人都在创建一个Markdown编辑器,有些很有创意,有些则很无聊。


在我们开始之前,来解释一下为什么人们不想用tkinter来构建Markdown编辑器。这是因为没有默认的简单方法来显示markdown输入的html数据。甚至没有一个默认的tkinter组件来显示html数据。您可以简单地编写/编辑markdown,但是没有简单的方法在应用程序中显示输出。


但是,现在有了tk_html_widgets,它可以帮助我们显示html输出。


但它当然也有一些问题:字体太小,不支持附加远程照片。


现在让我们能开始构建吧。


开始构建:


首先,请确保您已安装Python 3和Tkinter。 如果没有,您可以从这里下载:
python.org/downloads(Tkinter已包含Python中)。


我们需要的其他东西是tkhtmlview和markdown2。 您可以通过运行pip install tkhtmlview markdown2或pip3 install tkhtmlview markdown2来安装它们(如果您有多个Python版本)。


我们将从导入必要的库开始。


from tkinter import *
from tkinter import font , filedialog
from markdown2 import Markdown
from tkhtmlview import HTMLLabel


在第一行中,我们从tkinter包中导入(几乎)所有内容。


在第二行中,我们导入字体和文件对话框。 需要使用font来设置输入字段的样式(例如Font,Font Size),并导入filedialog以打开markdown文件以进行编辑(和/或保存我们的markdown文件)。


在第三行中,导入了Markdown,以帮助我们将Markdown源转换为html,并使用HTMLLabel(在第四行中导入)将其显示在输出字段中。


之后,我们将创建一个名为Window的框架类,该框架类将从tkinters的Frame类继承。 它将保存我们的输入和输出字段。


class Window(Frame):
    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.master = master
        self.myfont = font.Font(family="Helvetica", size=14)
        self.init_window()


在此代码块中,我们首先定义一个称为Window的类,该类继承tkinter的Frame小部件类。


现在,在初始化函数中,我们将master作为参数,用作框架的父级。在下一行中,我们初始化一个Frame。


接下来,我们声明一个名为self.myfont的自定义字体对象,其字体家族为Helvetica(您可以选择任何字体家族),大小为15,将在我们的markdown输入字段中使用。


最后,我们调用init_window函数,将我们的应用程序置于核心位置。


我们将fill关键字参数设置为BOTH,这实际上是从tkinter库导入的。它告诉框架在水平和垂直方向上都填充窗口,并且expand关键字参数设置为1(表示True),这告诉我们框架是可扩展的。简而言之,无论我们如何拉伸窗口大小或最大化窗口大小,框架都将填充窗口。


为了解决这个问题,我们将以下代码放在脚本的末尾:


root = Tk()
root.geometry("800x600")
app = Window(root)
app.mainloop()


接下来,将窗口的几何形状设置为800x600的长方体,800是窗口的高度,600是窗口的宽度。 在下一行中,您可以看到我们正在创建一个Window对象。 我们将root变量推入框架的root,并将其存储在名为app的变量中。


接下来要做的就是调用mainloop函数,该函数告诉我们的应用程序运行!


如何使用Python和Tkinter构建简单的Markdown编辑器


但这只是一个空白窗口。 要在窗口中写入内容,我们需要添加一个文本字段,在其中写入我们的markdown。 为此,我们将使用tkinter中的Text小部件。


    self.inputeditor = Text(self, width="1")
    self.inputeditor.pack(fill=BOTH, expand=1, side=LEFT)


不要与...混淆(三个点),我把它们放在那里只是为了表示在此代码块之前有多行代码。


在这里,我们创建了一个宽度为1的Text小部件。不要误会,以为错了-这里的大小是使用比例来完成的。 当我们将其放入输出框中时,您将在接下来的几秒钟内更清楚地了解它。


然后,我们将其包装到框架中,并使其在水平和垂直方向上均可拉伸。


运行脚本时,您会看到“Multiline Input Field”已接管了整个“窗口”。 如果您开始写它,您可能会注意到字符太小了。


使用Python和Tkinter构建简单的Markdown编辑器


我已经知道会出现这个问题。 这就是为什么我之前告诉过您创建自定义字体对象(self.myfont)的原因。 现在,如果您执行以下操作:


self.inputeditor = Text(self, width="1" , font=self.myfont)


(这里,我们告诉Text小部件使用自定义字体,而不是默认的小字体!)


...输入字段的字体大小将增加到15。运行脚本以检查是否一切正常。


使用Python和Tkinter构建简单的Markdown编辑器


现在,我认为是时候添加outputbox了,我们在编写时将看到markdown源代码的html输出。


为此,我们要添加一个HTMLLabel,在init_window函数中是这样的:


我们使用tkhtmlview中的HTMLLabel,宽度仍旧为1。 我们将宽度设置为1,因为窗口将在输入字段和输出框之间以1:1的比例共享(运行脚本时您会明白我的意思)。


html关键字参数存储将在第一次显示的值。


然后,将其打包在窗口中,将side作为RIGHT置于输入字段的右侧。fit_height()使文本适合小部件。


现在运行代码,如下所示:


使用Python和Tkinter构建简单的Markdown编辑器 


现在,如果您开始在输入字段中书写,输入时输出不会得到更新。 那是因为我们还没有告诉我们的程序这样做。


为此,我们首先要与编辑器绑定一个事件。 然后,你进行修改文本,输出都会得到更新,如下所示:


self.inputeditor.bind("<<Modified>>", self.onInputChange)


将这一行放到init_window()函数中。


这一行告诉inputeditor在文本改变时调用onInputChange函数。但是因为我们还没有那个函数,我们需要把它写出来。


...
def onInputChange(self , event):
    self.inputeditor.edit_modified(0)
    md2html = Markdown()

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇跟我学Python GUI编程系列 - Tkin.. 下一篇跟我学Python GUI编程系列 - Tkin..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目