Bagaimana untuk membina editor Markdown dalam Python

Pertama, pastikan anda memasang Python 3 dan Tkinter.

Perkara lain yang kami perlukan ialah tkhtmlview dan markdown2. Anda boleh memasangnya dengan menjalankan pip install tkhtmlview markdown2 atau pip3 install tkhtmlview markdown2 (jika anda mempunyai berbilang versi Python).

Sekarang lancarkan editor atau IDE kegemaran anda dan buat fail baharu (cth. www.linuxidc.com.py (saya namakannya editor linuxidc.com)).

Kami akan bermula dengan mengimport perpustakaan yang diperlukan.

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

Di baris pertama, kami mengimport (hampir) segala-galanya dari pakej tkinter.

Dalam baris kedua, kami mengimport dialog fon dan fail. Fon diperlukan untuk menggayakan medan input (cth. Fon, Saiz Fon) dan dialog fail yang diimport untuk membuka fail penurunan nilai untuk diedit (dan/atau menyimpan fail penurunan harga kami).

Dalam baris ketiga, Markdown diimport untuk membantu kami menukar sumber Markdown kepada html dan memaparkannya dalam medan output menggunakan HTMLLabel (diimport dalam baris keempat).

Selepas itu, kami akan mencipta kelas bingkai yang dipanggil Window, yang akan diwarisi daripada kelas Frame tkinters. Ia akan memegang medan input dan output kami.

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()      def init_window(self):          self.master.title("linuxidc.com编辑器")          self.pack(fill=BOTH, expand=1)

Dalam blok kod ini, kami mula-mula menentukan kelas yang dipanggil Window, yang mewarisi kelas widget Frame tkinter.

Sekarang, dalam fungsi permulaan, kami lulus induk sebagai parameter untuk digunakan sebagai induk bingkai. Dalam baris seterusnya, kami memulakan Bingkai.

Seterusnya, kami mengisytiharkan objek fon tersuai yang dipanggil self.myfont dengan keluarga fon Helvetica (anda boleh memilih mana-mana keluarga fon) dan saiz 15 yang akan digunakan dalam medan input turun harga kami.

Akhir sekali, kami memanggil fungsi init_window, meletakkan aplikasi kami sebagai teras.

Dalam fungsi init_window, kami mula-mula menetapkan tajuk tetingkap kepada editor linuxidc.com. Dalam baris seterusnya, self.pack(fill=BOTH, expand=1), kami memberitahu Frame untuk mengambil ruang penuh tetingkap.

Kami menetapkan argumen kata kunci isian kepada KEDUANYA, yang sebenarnya diimport daripada perpustakaan tkinter. Ia memberitahu bingkai untuk mengisi tetingkap secara mendatar dan menegak, dan hujah kata kunci kembangkan ditetapkan kepada 1 (bermaksud Benar), yang memberitahu kita bahawa bingkai itu boleh dikembangkan. Pendek kata, tidak kira bagaimana kita meregangkan saiz tingkap atau memaksimumkan saiz tetingkap, bingkai itu akan memenuhi tingkap.

Kini jika anda menjalankan skrip www.linuxidc.com.py, anda tidak akan melihat apa-apa kerana kami hanya mentakrifkan kelas tetapi tidak pernah memanggilnya.

Untuk menyelesaikan masalah ini, kami meletakkan kod berikut di penghujung skrip:

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

Seterusnya, tetapkan geometri tetingkap kepada kuboid 800x600, 800 ialah ketinggian tetingkap dan 600 ialah Lebar tetingkap. Dalam baris seterusnya anda boleh melihat kami sedang mencipta objek Window. Kami menolak pembolehubah akar ke dalam akar rangka kerja dan menyimpannya dalam pembolehubah yang dipanggil aplikasi.

Perkara seterusnya yang perlu dilakukan ialah memanggil fungsi gelung utama, yang memberitahu aplikasi kami untuk dijalankan!

Sekarang jalankan skrip www.linuxidc.com.py. Jika anda telah melakukan semuanya dengan betul, anda akan melihat tetingkap kosong yang kelihatan seperti ini:

Tetapi ia hanyalah tetingkap kosong. Untuk menulis kandungan dalam tetingkap, kami perlu menambah medan teks untuk menulis penurunan harga kami. Untuk ini kami akan menggunakan widget Teks dari tkinter.

...  def init_window(self):      self.master.title("linuxidc.com编辑器")      self.pack(fill=BOTH, expand=1)      self.inputeditor = Text(self, width="1")      self.inputeditor.pack(fill=BOTH, expand=1, side=LEFT)

Tidak perlu dikelirukan dengan (tiga titik), saya meletakkannya di sana hanya untuk menunjukkan bilangan baris kod mendahului blok kod ini.

Di sini kami mencipta widget Teks dengan lebar 1. Jangan tersilap idea - saiz di sini dilakukan menggunakan perkadaran. Anda akan mendapat idea yang lebih baik mengenainya dalam beberapa saat akan datang apabila kami memasukkannya ke dalam kotak output.

Kami kemudian membalutnya ke dalam bingkai dan menjadikannya boleh diregangkan secara mendatar dan menegak.

Apabila anda menjalankan skrip, anda akan melihat bahawa keseluruhan "tetingkap" telah diambil alih. Jika anda mula menulisnya, anda mungkin perasan bahawa aksaranya terlalu kecil.

Saya sudah sedia maklum tentang masalah ini. Inilah sebabnya saya memberitahu anda sebelum ini untuk mencipta objek fon tersuai (self.myfont). Sekarang, jika anda melakukan perkara berikut:

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

(Di sini, kami memberitahu widget Teks untuk menggunakan fon tersuai, bukan fon kecil lalai!)

... saiz fon bagi medan input akan ditambah kepada 15. Jalankan skrip untuk menyemak sama ada semuanya OK.

Sekarang, saya rasa sudah tiba masanya untuk menambah kotak keluaran, kita akan melihat output html kod sumber penurunan nilai semasa kita menulis.

Untuk melakukan ini, kita perlu menambah HTMLLabel, yang kelihatan seperti ini dalam fungsi init_window:

self.outputbox = HTMLLabel(self, width="1", background="white", html="<h2 id="linuxidc-com">linuxidc.com</h2>")  self.outputbox.pack(fill=BOTH, expand=1, side=RIGHT)  self.outputbox.fit_height()

Kami menggunakan HTMLLabel dalam tkhtmlview, dan lebarnya masih 1. Kami menetapkan lebar kepada 1 kerana tetingkap akan dikongsi 1:1 antara medan input dan kotak output (anda akan melihat apa yang saya maksudkan apabila anda menjalankan skrip).

hujah kata kunci html menyimpan nilai yang akan dipaparkan pada kali pertama.

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

现在运行代码，如下所示：

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

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

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

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

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

...  def onInputChange(self , event):      self.inputeditor.edit_modified(0)      md2html = Markdown()      self.outputbox.set_html(md2html.convert(self.inputeditor.get("1.0" , END)))

在第一行中，我们使用edit_modified(0)重置修改后的标志，以便重用它。否则，在第一次事件调用之后，它将不再工作。

接下来，我们创建一个名为md2html的Markdown对象。最后一行(上面标红那行)，首先我们…等等!最后一行可能会让一些读者感到困惑。我把它分成三行。

markdownText = self.inputeditor.get("1.0" , END)  html = md2html.convert(markdownText)  self.outputbox.set_html(html)

在第一行中，我们从输入字段的顶部到底部获取markdown文本。第一个参数，self.inputeditor.get，告诉它从第一行的第0个字符开始扫描(1.0 => [LINE_NUMBER].[CHARACTER_NUMBER])，最后一个参数告诉它在到达末尾时停止扫描。

然后，我们使用md2html.convert()函数将扫描的markdown文本转换为html，并将其存储在html变量中。

最后，我们告诉outputbox使用.set_html()函数来显示输出!

运行脚本。您将看到一个功能几乎正常的markdown编辑器。当您输入输入字段时，输出也将被更新。

但是…我们的工作还没有完成。用户至少需要能够打开和保存他们的文本。

为此，我们要在菜单栏中添加一个文件菜单。在这里，用户可以打开和保存文件，也可以退出应用程序。

在init_window函数中，我们将添加以下行：

self.mainmenu = Menu(self)  self.filemenu = Menu(self.mainmenu)  self.filemenu.add_command(label="打开", command=self.openfile)  self.filemenu.add_command(label="另存为", command=self.savefile)  self.filemenu.add_separator()  self.filemenu.add_command(label="退出", command=self.quit)  self.mainmenu.add_cascade(label="文件", menu=self.filemenu)  self.master.config(menu=self.mainmenu)

简单说一下：

在这里，我们定义了一个新菜单，框架作为它的父菜单。

接下来，我们定义另一个菜单和上一个菜单作为其父菜单。它将作为我们的文件菜单。

然后使用add_command()和add_separator()函数添加3个子菜单(打开、另存为和退出)和分隔符。打开子菜单将执行openfile函数，另存为子菜单将执行savefile函数。最后，Exit将执行一个内建函数quit，该函数将关闭程序。

然后使用add_cascade()函数告诉第一个菜单对象包含filemenu变量。这包括标签文件中的所有子菜单。

最后，我们使用self.master.config()来告诉窗口使用主菜单作为窗口的菜单栏。

它看起来是这样的，但是现在还不要运行它。你会提示错误，openfile和savefile函数没有定义。

正如您现在看到的，我们必须在Window类中定义两个函数，我们将在其中使用tkinter的filedialog。

首先让我们定义打开文件的函数：

def openfile(self):      openfilename = filedialog.askopenfilename(filetypes=(("Markdown File", "*.md , *.mdown , *.markdown"),                                                                    ("Text File", "*.txt"),                                                                    ("All Files", "*.*")))      if openfilename:          try:              self.inputeditor.delete(1.0, END)              self.inputeditor.insert(END , open(openfilename).read())          except:              print("无法打开文件！")

在这里，首先我们向用户显示一个文件浏览器对话框，允许他们使用filedialog.askopenfilename()选择要打开的文件。与filetypes关键字参数，我们告诉对话框只打开这些类型的文件通过传递一个元组与支持的文件(基本上所有类型的文件)：

•  带 .md , .mdown , .markdown扩展名的文件

•  扩展名为.txt的文本文件

•  在使用通配符扩展的下一行中，我们告诉对话框打开任何扩展名的文件。

然后我们检查用户是否选择了一个文件。如果是，我们尝试打开文件。然后删除输入字段中从第一行的第0个字符到字段末尾的所有文本。

接下来，我们打开并读取所选文件的内容，并在输入字段中插入内容。

如果我们的程序不能打开一个文件，它将打印出错误。但是等等，这不是处理错误的好方法。我们在这里可以做的是向用户显示一个类似这样的错误消息：

为此，我们首先要从tkinter包中导入消息框messagebox。

from tkinter import messagebox as mbox

然后，不像上面那样只是打印一个错误消息，我们将用下面的行替换那一行，以便向用户显示正确的错误消息。

mbox.showerror(“打开选定文件时出错 " , "哎呀！，您选择的文件：{}无法打开!".format(openfilename))

这将创建一个错误消息，就像我上面显示的文件无法打开时的屏幕截图一样。

mbox.showerror函数，第一个参数是消息框的标题。第二个是要显示的消息。

现在，我们需要编写一个savefile函数来保存markdown输入。

def savefile(self):          filedata = self.inputeditor.get("1.0" , END)          savefilename = filedialog.asksaveasfilename(filetypes = (("Markdown File", "*.md"),                                                                    ("Text File", "*.txt")) , title="保存 Markdown 文件")          if savefilename:              try:                  f = open(savefilename , "w")                  f.write(filedata)              except:                  mbox.showerror("保存文件错误" , "哎呀！, 文件: {} 保存错误！".format(savefilename))

在这里，首先我们扫描输入字段的所有内容并将其存储在一个变量中。然后，我们通过为两种类型的文件类型(.md和.txt)。

如果用户选择一个文件名，我们将尝试保存存储在变量filedata中的输入字段的内容。如果发生异常，我们将向用户显示一条错误消息，说明程序无法保存文件。

Atas ialah kandungan terperinci Bagaimana untuk membina editor Markdown dalam Python. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!