Qt官方示例-Markdown编辑器
- 2019 年 10 月 30 日
- 筆記
基于QWebEngineView与QWebChannel实现的Markdown编辑器。
0x00 原理
Markdown编辑器演示了如何使用QWebChannel和JavaScript库为自定义标记语言提供富文本预览工具。
Markdown是一种轻量级的标记语言，具有纯文本格式语法。可以在浏览器中查看时将内容呈现为富文本格式。
Markdown编辑器主窗口分为编辑区域和预览区域。
- 编辑区域(左栏)： 该编辑器区域使用QPlainTextEdit实现。
- 预览区域(右栏)： 预览区域使用QWebEngineView实现的。为了呈现文本，借助Web引擎内部的JavaScript库，将Markdown文本转换为HTML格式。预览是通过QWebChannel发送编辑区域的文本内容到QWebEngineView渲染(支持边编辑边渲染更新)。
0x01 实现
- 为编辑区域加载markdown格式文件。
QFile defaultTextFile(":/default.md"); defaultTextFile.open(QIODevice::ReadOnly); ui->editor->setPlainText(defaultTextFile.readAll());
- 使用QWebChannel绑定page(QWebEngineView)对文本进行更新。
connect(ui->editor, &QPlainTextEdit::textChanged, [this]() { m_content.setText(ui->editor->toPlainText()); }); QWebChannel *channel = new QWebChannel(this); channel->registerObject(QStringLiteral("content"), &m_content); page->setWebChannel(channel);
- 加载网页文件用于接收ui->editor(QPlainTextEdit)的内容。
ui->preview->setUrl(QUrl("qrc:/index.html"));
- 在index.html中，我们加载一个自定义样式表和两个JavaScript库。markdown.css是由Kevin Burke创建的markdown友好样式表。marked.js是Markdown解析器和编译器，由Christopher Jeffrey编写，旨在提高速度，而qwebchannel.js是QWebChannel模块的一部分(用于数据交互)。
<!doctype html> <html lang="en"> <meta charset="utf-8"> <head> <link rel="stylesheet" type="text/css" href="3rdparty/markdown.css"> <script src="3rdparty/marked.js"></script> <script src="qrc:/qtwebchannel/qwebchannel.js"></script> </head> <body> <div id="placeholder"></div> <script> 'use strict'; var placeholder = document.getElementById('placeholder'); var updateText = function(text) { placeholder.innerHTML = marked(text); } new QWebChannel(qt.webChannelTransport, function(channel) { var content = channel.objects.content; updateText(content.text); content.textChanged.connect(updateText); } ); </script> </body> </html>
- uml简图
0x02 关于更多
- 在QtCreator软件可以找到：
- 或在以下Qt安装目录找到
C:Qt{你的Qt版本}Examples{你的Qt版本}webenginewidgetsmarkdowneditor
- 相关链接
https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-example.html
