共计 1854 个字符，预计需要花费 5 分钟才能阅读完成。
基于 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 版本}\webenginewidgets\markdowneditor- 相关链接
https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-example.html- Qt 君公众号回复『Qt 示例』获取更多内容。
正文完
