Qt官方示例-Markdown编辑器
小编:啊南 479阅读 2021.01.18
0x00 原理基于QWebEngineView与QWebChannel实现的Markdown编辑器。
Markdown编辑器演示了如何使用QWebChannel和JavaScript库为自定义标记语言提供富文本预览工具。
Markdown是一种轻量级的标记语言,具有纯文本格式语法。可以在浏览器中查看时将内容呈现为富文本格式。
Markdown编辑器主窗口分为编辑区域和预览区域。
- 编辑区域(左栏): 该编辑器区域使用QPlainTextEdit实现。
- 预览区域(右栏): 预览区域使用QWebEngineView实现的。为了呈现文本,借助Web引擎内部的JavaScript库,将Markdown文本转换为HTML格式。预览是通过QWebChannel发送编辑区域的文本内容到QWebEngineView渲染(支持边编辑边渲染更新)。
- 为编辑区域加载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模块的一部分(用于数据交互)。
- uml简图
- 在QtCreator软件可以找到:
- 或在以下Qt安装目录找到
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\webenginewidgets\markdowneditor
相关推荐
- Qt加载XPM图像 XPM是一种基于ASCII编码的图像格式,一般用于创建图标。由于它是ASCII编码,很方便地在代码中使用。 Qt的QPixmap类支持XPM格式,原型如下:QPixmap::QPixmap(const char *const [] xpm)摘取Qt源码中的"严重警告"XPM图标:static const char* const c…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…