主窗口背景色 变成了工具栏背景色_使用wxPython打造印象笔记（12）优化编辑器工具栏...

上一篇文章中我们使用wxPython实现了编辑器工具栏，不过还存在一些不足，接下来将对工具栏进行优化。

编辑器工具栏能够显示当前格式

工具栏的格式化按钮需要动态变换，能够显示出当前光标所在位置的格式。最终实现的效果如下图所示。

基本思路是：获取光标所在位置的文本格式，然后将对应的格式化参数显示在工具栏上面。

为了能够实时的获取当前格式，我们需要借助Quill编辑器提供的 selection-change 事件和 getFormat 方法，然后将获取到的格式传递给编辑器，如何传递呢？只需要在JavaScript方法里调用对应的Python方法即可。

获取文本格式

编辑 assets / text_editor / core.js，添加以下代码：

quill

当光标移动时，就会触发 selection-change 事件，并且用户连续输入文字时不会触发这个事件，十分方便。

quill.getFormat() 方法返回的是当前文本格式，例如上图中最后面的 World 文本，对应的格式如下：

{'background': '#fefe0a', 'color': '#2f00fe', 'size': '36px'}

pyOnFormatChanged 方法即对应的Python方法，实际上借助了 cefpython 提供的JavaScript 绑定功能。

编辑 views / text_editor.py 文件，在 __init__ 方法里面添加js绑定。

self

并定义相应的方法：

def 

再次运行 main.py ，然后输入任意文本并进行格式化操作（例如文字加粗，设置背景颜色等），移动光标时可以发现Python控制台显示了对应的文本格式。

显示文本格式

已经获取到了文本格式，接下来要做的就是让工具栏显示当前格式。

假设现在获取到的格式如下。

{'background': '#fb0106', 'bold': True, 'color': '#21fe06', 'font': 'sans-serif', 'size': '36px'}

则对应的工具栏界面变化如下：

• 字体下拉框需要选中对应的 font 数据
• 字体大小下拉框需要选中对应的 size 数据
• 字体加粗按钮根据 bold 来切换相应的图片，如果为 True，则显示高亮图片
• 文本颜色按钮（由位图按钮和分割线组合而成）根据 color 来设置下方分割线的背景色
• 背景颜色按钮根据 background 来设置自身的背景色

完整实现

显然编辑器需要保留当前的文本格式，编辑 views / text_editor.py 文件：

class 

定义了一个 content_format 字段来保存当前的文本格式，所有的格式化元素初始值为 False，表示编辑器默认没有格式化。

然后修改 _on_format_changed 方法：

def 

当文本格式发生变化的时候，我们将当前的格式和编辑器上一次保存的格式进行比较，将发生变化的格式提取出来，保存到 changed_format 变量里面，交给编辑器工具栏来显示。

编辑 views / text_editor_toolbar.py 文件，定义 display_format 方法：

def 

可以看到这里定义了很多的 _display_**_format 方法，这些方法的作用是显示文本格式，以 _display_bold_format 方法为例：

def 

如果当前光标移动到了字体加粗的文本中，则整个流程如下：

1. Quill编辑器的 selection-change 事件触发，于是调用了 pyOnFormatChanged 方法
2. 因为 pyOnFormatChanged 实际上绑定的是 _on_format_changed 方法，所以后者会调用
3. 经过比较之后，changed_format 的值为 { 'bold': True }，作为参数传递给工具栏的 display_format 方法
4. 最终调用了 _display_bold_format 方法，而且此方法的参数为 True，因此 bitmap 的值为 images.tool_bold_active
5. 工具栏的字体加粗按钮因此高亮了

views / text_editor_toolbar.py 的完整代码如下：

import 

注意：上述代码使用了一些图片资源，需要将图片添加到 assets / images 目录下并运行 encode_bitmap_util.py 文件，详细的流程请参考：

ac2190：使用wxPython打造印象笔记（7）笔记列表之HeaderPanel​zhuanlan.zhihu.com

views / text_editor.py 的完整代码如下：

import 

运行 main.py，可以发现工具栏可以随着文本格式做出相应的调整了！

代码块和语法高亮

有时候我们需要在笔记中写代码，这时候就需要用到代码块功能了。Quill编辑器中，代码块对应的格式化参数为 code-block，所以我们首先要添加这个格式，修改 views / text_editor.py 文件，在初始化的时候，对 current_format 进行如下修改：

self

接下来编辑 views / text_editor_toolbar.py 将代码块按钮添加进来，并参照 tool_bold 添加相应的事件绑定。

# 修改_init_ui

再次运行 main.py，可以使用代码块功能了！

代码块已经添加了，语法高亮由该如何实现呢？

实际上Quill编辑器内置了 syntax 模块，我们需要启用它。编辑 assets / text_editor / core.js 文件：

var 

设置好了之后，还需要引入 highlight.js 这个语法高亮插件，下载地址是：https://highlightjs.org/download/，下载好了之后将压缩包解压，将其中的 highlight.pack.js 拷贝到 assets / text_editor 目录里面。

不同的语法高亮配色是通过css实现的，所以我们还需要一个css文件，我们在这里使用 monokai 配色，可以在 styles 文件夹中找到。我们将其也拷贝到 assets / text_editor 目录里面。（使用其他配色也可以，配色demo的地址为：https://highlightjs.org/static/demo/）

修改 assets / text_editor / index.html 文件，引入 highlight.pack.js 和 monokai.css。再次运行 main.py，语法高亮已经生效了！

总结

借助Quill编辑器提供的接口和相关模块，我们对编辑器工具栏进行了一些优化，现在工具栏能够实时的显示当前文本格式，并且具备了代码块高亮功能。

后面的文章中我们将连接数据库，处理真实的笔记数据，专注于笔记本的核心业务逻辑。