Qt官方示例---Markdown使用

官方示例

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

原理

官网示例演示了如何使用QWebChannel和JavaScript库为自定义标记语言提供富文本预览工具。
Markdown是一种轻量级的标记语言，具有纯文本格式语法。可以在浏览器中查看时将内容呈现为超文本标记语言。
Markdown编辑器主窗口分为编辑区域和预览区域。

实现步骤

1、修改pro文件

在pro文件内添加以下内容

QT += webenginewidgets webchannel

问题

Project ERROR: Unknown module(s) in QT: webenginewidgets

解决办法

1、你可能没有安装相关组件（WebEngine库）

没有即添加

2、Qt版本与MSVC版本不匹配

我电脑配置了msvc2015和msvc2017,已经验证Qt5.9和2015，2017皆可；Qt5.14与msvc2017可行，与2015就出现这个问题。

2、编辑区域加载markdown格式文件

QFile defaultTextFile(":/default.md");
defaultTextFile.open(QIODevice::ReadOnly);
ui->editor->setPlainText(defaultTextFile.readAll());

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);

4、加载网页文件用于接收ui->editor(QPlainTextEdit)的内容

ui->preview->setUrl(QUrl("qrc:/index.html"));

学习链接
代码示例