前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Qt官方示例-Markdown编辑器

Qt官方示例-Markdown编辑器

作者头像
Qt君
发布2019-10-30 15:11:51
2.4K0
发布2019-10-30 15:11:51
举报
文章被收录于专栏:跟Qt君学编程

基于QWebEngineView与QWebChannel实现的Markdown编辑器。

0x00 原理

Markdown编辑器演示了如何使用QWebChannel和JavaScript库为自定义标记语言提供富文本预览工具。

Markdown是一种轻量级的标记语言,具有纯文本格式语法。可以在浏览器中查看时将内容呈现为富文本格式。

  Markdown编辑器主窗口分为编辑区域和预览区域。

  • 编辑区域(左栏): 该编辑器区域使用QPlainTextEdit实现。
  • 预览区域(右栏): 预览区域使用QWebEngineView实现的。为了呈现文本,借助Web引擎内部的JavaScript库,将Markdown文本转换为HTML格式。预览是通过QWebChannel发送编辑区域的文本内容到QWebEngineView渲染(支持边编辑边渲染更新)。
0x01 实现
  • 为编辑区域加载markdown格式文件。
代码语言:javascript
复制
QFile defaultTextFile(":/default.md");
defaultTextFile.open(QIODevice::ReadOnly);
ui->editor->setPlainText(defaultTextFile.readAll());
  • 使用QWebChannel绑定page(QWebEngineView)对文本进行更新。
代码语言:javascript
复制
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)的内容。
代码语言:javascript
复制
ui->preview->setUrl(QUrl("qrc:/index.html"));
  • 在index.html中,我们加载一个自定义样式表和两个JavaScript库。markdown.css是由Kevin Burke创建的markdown友好样式表。marked.js是Markdown解析器和编译器,由Christopher Jeffrey编写,旨在提高速度,而qwebchannel.js是QWebChannel模块的一部分(用于数据交互)。
代码语言:javascript
复制
<!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安装目录找到
代码语言:javascript
复制
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\webenginewidgets\markdowneditor
  • 相关链接
代码语言:javascript
复制
https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-example.html
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 0x00 原理
  • 0x01 实现
  • 0x02 关于更多
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档