基于QWebEngineView与QWebChannel实现的Markdown编辑器。
0x00 原理
Markdown编辑器演示了如何使用QWebChannel和JavaScript库为自定义标记语言提供富文本预览工具。
Markdown是一种轻量级的标记语言，具有纯文本格式语法。可以在浏览器中查看时将内容呈现为富文本格式。
Markdown编辑器主窗口分为编辑区域和预览区域。
编辑区域(左栏)：
该编辑器区域使用QPlainTextEdit实现。
预览区域(右栏)：
预览区域使用QWebEngineView实现的。为了呈现文本，借助Web引擎内部的JavaScript库，将Markdown文本转换为HTML格式。预览是通过QWebChannel发送编辑区域的文本内容到QWebEngineView渲染(支持边编辑边渲染更新)。
0x01 实现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 =newQWebChannel(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>
<htmllang="en">
<metacharset="utf-8">
<head>
<linkrel="stylesheet"type="text/css"href="3rdparty/markdown.css">
<scriptsrc="3rdparty/marked.js"></script>
<scriptsrc="qrc:/qtwebchannel/qwebchannel.js"></script>
</head>
<body>
<divid="placeholder"></div>
<script>
'use strict';
var placeholder = document.getElementById('placeholder');
varupdateText=function(text){
placeholder.innerHTML =marked(text);
}
newQWebChannel(qt.webChannelTransport,
function(channel){
var content = channel.objects.content;
updateText(content.text);
content.textChanged.connect(updateText);
}
);
</script>
</body>
</html>
0x02 关于更多
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\webenginewidgets\markdowneditor
https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-example.html
----------------------------------------------------------------------------------------------------------------------
我们尊重原创，也注重分享，文章来源于微信公众号：Qt君，建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------
|
