轻松记录您
灵感和创意

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

0x00 原理

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

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());
  • 1
  • 2
  • 3
  • 使用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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 加载网页文件用于接收ui->editor(QPlainTextEdit)的内容。
ui->preview->setUrl(QUrl("qrc:/index.html"));
  • 1
  • index.html中,我们加载一个自定义样式表和两个JavaScript库。markdown.css是由Kevin Burke创建的markdown友好样式表。marked.js是Markdown解析器和编译器,由Christopher Jeffrey编写,旨在提高速度,而qwebchannel.js是QWebChannel模块的一部分(用于数据交互)。
未经允许不得转载:坚果云Markdown编辑器 » 基于QWebEngineView与QWebChannel实现的Markdown编辑器
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍