mfc使用cef源代码实现_使用wxPython打造印象笔记（11）实现编辑器工具栏

前面的文章中，我们使用CEFPython实现了web渲染组件，Quill编辑器因此可以在Windows系统上正常运行了，接下来我们将实现编辑器的工具栏。

目前的编辑器工具栏是由web页面提供的，如果我们希望使用wxPython实现工具栏，就需要通过调用命令来实现文本格式化效果。例如设置字体加粗需要点击工具栏的字体加粗按钮，而实际上可以通过Quill编辑器的API来实现：

quill

详细的Quill format方法可参考这里。

实现思路

首先隐藏Quill提供的工具栏，然后使用wxPython构建编辑器工具栏，点击工具栏上面的按钮之后，实际上调用的是Quill编辑器的format方法。

编辑 text_editor / core.js 文件，新增以下代码，允许改变字体和字体大小。

var 

并隐藏Quill默认的工具栏（绿色表示新增，灰色表示删除）：

在 views 目录下新建一个 text_editor_toolbar.py 文件，作为编辑器工具栏。

首先添加字体和字体大小按钮，然后添加事件绑定，代码如下：

import 

可以看到，编辑器上面的按钮点击的时候实际上调用的是 format_content 方法，我们编辑 views / text_editor.py 文件，引入上面的 TextEditorToolbar 并实现 format_content 方法。

这里的 format_content 方法实际上调用的是 quill 对象的 format 方法，quill 对象在 core.js文件里面已经初始化了。

这里的 run_js 方法需要在 views / webview.py 中定义，完整代码如下：

import 

run_js 方法可以让 webview 执行 JavaScript 代码，set_js_bindings 方法则可以在webview的浏览器环境中调用 Python 方法。set_js_bindings 方法在后面会使用到。

运行main.py 文件，编辑器的工具栏已经显示了。

工具栏

而且工具栏能够正常使用：

根据这样的思路，我们再添加几个格式化按钮，分别是字体加粗，文字颜色和背景颜色调整。编辑 views / text_editor_toolbar.py 文件，完整代码如下：

import 

注意：上述代码中使用了相关图片，使用图片资源的方法请参考：

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

再次运行，测试一下。

总结

cefpython提供了执行JavaScript函数的方法，利用此方法我们可以很方便的对Quill编辑器的文本进行格式化。但我们的编辑器依然有几点不足：

1. 不可以移除格式，例如点击了字体加粗按钮，再点击一次应该要移除加粗效果
2. 格式化按钮不能动态的显示当前文本的格式，例如光标在字体大小为48px的文本中时，字体大小下拉框应该显示为48px
3. 没有代码高亮功能

接下来的文章中我们将解决这些问题。