Qt官方示例Markdown编辑器

jiezi

5 年前

基于 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 模块的一部分(用于数据交互)。

<!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 简图

在 QtCreator 软件 可以找到：

C:\Qt\{你的 Qt 版本}\Examples\{你的 Qt 版本}\webenginewidgets\markdowneditor

相关链接

https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-markdowneditor-example.html

Qt 君公众号回复『Qt 示例』获取更多内容。

Qt官方示例Markdown编辑器

0x00 原理

0x01 实现

0x02 关于更多