在前面的文章中，我们已经实现了导航栏和笔记列表面板，这篇文章将实现富文本编辑器面板。在后面的文章中，当所有界面实现好了之后，我们将连接数据库并添加实际的业务逻辑代码。
实现思路
最终的编辑器界面如下图所示。
可以看到，编辑器面板由三部分组成：最上方的标题输入框，中间的工具栏和最下方的富文本编辑区域。
如何实现富文本编辑功能呢？wxPython有对应的 wx.richtext.RichTextCtrl 控件，但不方便自定义编辑器功能，例如上面的引用功能，就没有提供，更不用说代码块等更为复杂的编辑功能了。
既然默认的 RichTextCtrl 控件并不理想，我们不妨将视线转移到web领域，web端的编辑器组件非常多。但如何应用到wxPython中呢？使用webview即可做到：wxPython中的webview组件可以加载网页，并提供了Python和网页通信的方法。
因此，要想实现富文本编辑器，我们可以先创建一个富文本编辑器网页，然后通过webview组件来加载这个网页，并能够相互通信。
web端富文本编辑器非常多，我们这里使用的富文本编辑器是 Quill，接下来是它的一些简介。
Quill简介
Quill编辑器的浏览器兼容性和可扩展性非常好，功能强大并且使用简便。
具体来说，兼容性体现在支持主流的桌面浏览器和移动端浏览器（不过IE10以下不支持）。可扩展性是指通过Quill提供的API，我们可以很方便的自定义编辑命令，例如超链接、图片裁剪、视频播放等等。
Quill默认提供了五个模块，分别是工具栏，键盘，历史记录，剪贴板和语法高亮，这些模块可以按需加载。
现在我们来使用Quill，看看效果如何。首先在 assets 目录下新建一个 text_editor 文件夹，用于存放编辑器网页代码。接下来去 https://github.com/quilljs/quill/releases/tag/v1.3.7 下载最新的 quill.tar.gz 文件。解压并将其中的 quill.min.js 和 quill.snow.css 放到 text_editor 目录下。
quill.min.js 是必须的js库，quill.snow.css是编辑器主题。接下来新建一个 index.html 文件，用于显示编辑器页面，输入以下代码。
<!DOCTYPE HTML>
我们引入quill编辑器相关的js和css文件，并定义了一个 editor 节点。然后引入 core.js，用于存放编辑器页面的业务逻辑代码。我们接着创建 core.js，开始初始化 Quill编辑器，输入以下代码。
var 上面的代码构造了一个Quill实例，并引入了工具栏模块，使用了snow主题，这个主题就是由之前提到的 quill.snow.css 来定义的。
我们用浏览器打开 index.html 页面，界面如下图所示。
Quill编辑器出现了，并且工具栏可以正常使用。
使用webview加载网页
编辑器页面已经初步实现了，我们接下来把这个页面加载到编辑器面板里。编辑 views / text_editor.py 文件，引入 wx.html2，这个模块提供了webview组件，代码如下。
import 在 _init_ui 方法中，我们首先初始化了一个 wx.html2.WebView 实例，然后调用其 LoadURL 加载编辑器页面。
接下来运行 main.py 文件，发现文本编辑器已经显示了。
注意，此版本wxPython中的webview在Windows下默认使用的是IE7渲染引擎，因此可能无法正常显示。我们将在下文介绍一种全平台兼容的webview实现。
优化编辑器面板
上面的编辑器面板，还缺少了一个标题输入框，我们给加上，编辑 text_editor.py 文件，定义一个 _init_title 方法，做如下修改。
class 并移除 quill 编辑器的边框，编辑 assets / text_editor / index.html，在head和body之间添加如下css代码。
<再次运行 main.py 文件，如下图所示。
富文本编辑器已经初步实现了。
总结
通过使用webview引入前端网页，并借助Quill编辑器让我们很容易就实现了富文本编辑功能，但和最终的编辑器比较起来，依然有一些不足，例如编辑器工具栏没有使用系统原生控件，缺少语法高亮，并且跨平台效果不佳。
我们将在后面的文章中逐渐完善编辑器面板，并实现具体的业务逻辑，处理真实数据。
扫一扫
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
