Qt实现文本编辑器(二)

目录
  • 功能实现
    • 功能:
    • 功能1:动作消息
    • 功能2:动作事件实现
    • 功能3:文本编辑
  • 总结

上一章节讲述了如何制作文本编辑页面,以及应该有哪些功能需要实现,只是做了展示效果,实际的点击事件并没有处理。今天来具体讲解下是如何实现菜单栏以及工具栏上对应的需求吧~

功能实现

功能:

1、动作消息触发

2、具体功能:打开文件、新建文件、复制、剪切、粘贴

3、文本编辑功能:字体设置

今天只讲述以上三大功能,至于:旋转、缩放等功能都是针对于图片来说的,等下一章节,具体的讲解方式就不在是文本编辑器的功能了,静待后续更文吧!

功能1:动作消息

上一章节的动作已经创建完成了,那么该如何触发这些动作呢?

在Qt中动作触发方式与控件触发方式是一致的,例如:想要让一个按钮控件响应操作,需要响应QPushButton::clicked消息,这里也是同样的道理。

想要响应动作事件用到的是QAction::triggered。

各个动作对应的槽函数如下

打开文件

connect(m_pActionOpenFile, &QAction::triggered, this, &QtTextEditor::OnTriggeredOpenFile);

新建文件

connect(m_pActionOpenFile, &QAction::triggered, this, &QtTextEditor::OnTriggeredNewFile);

复制、剪切、粘贴

connect(m_pActionOpenFile, &QAction::triggered, m_editContent, &QTextEdit::copy);
connect(m_pActionOpenFile, &QAction::triggered, m_editContent, &QTextEdit::cut);
connect(m_pActionOpenFile, &QAction::triggered, m_editContent, &QTextEdit::paste);

看到槽函数,大家可以发现,对于复制、剪切、粘贴功能都是采用QTextEdit控件实现的,在这里不需要做新的处理,直接使用父类消息就可以了。

为了对编辑文本类的功能处理,最好的方式继承自QTextEdit进行功能封装,假设叫做:QMyTextEdit,后续都用该类作为编辑文本类

功能2:动作事件实现

针对上述两个需要自己实现的槽函数响应,接下来就进行详细的讲述吧~

2.1:打开文件

打开文件,代表的是打开一个已经存在的文件,这里需要用到QFileDialog类,使用QFileDialog::getOpenFileName()静态函数,返回选择文件的带路径的完整路径名。

void QtTextEditor::OnTriggeredOpenFile()
{
	QString qsFileName = QFileDialog::getOpenFileName(this);
	if (qsFileName.isEmpty())
	{
		return;
	}
	if (m_editContent->document()->isEmpty())
	{
		this->LoadFileContent(m_editContent, qsFileName);
	}
	else
	{
		QMyTextEdit *editContent = new QMyTextEdit;
		editContent->show();
		this->LoadFileContent(editContent, qsFileName);
		m_vetEditCtrls.push_back(editContent);
	}
}

代码思路:

获取打开的文件路径,如果返回的字符串是空,说明未打开有效文件,不进行处理;

在展示内容之前,判断当前edit控件是否有数据?如果没有直接在当前文本编辑控件中展示;

如果当前文本编辑控件存在数据,则重新创建一个QMyTextEdit自定义类,用来展示新内容。

其中,LoadFileContent函数的具体内容:

void QtTextEditor::LoadFileContent(QMyTextEdit* editCtrls, QString qsFileName)
{
	QFile file(qsFileName);
	if (file.open(QIODevice::ReadOnly | QIODevice::Text))
	{
		QTextStream textStream(&file);
		while (!textStream.atEnd())
		{
			editCtrls->append(textStream.readLine());
		}
	}
}

代码说明:

采用了QTextStream方式读取文件流数据,可以方便的读写单词、行和数字,甚至还提供了填充、对齐和数字格式化的选项操作。

为什么第一个参数会传入类指针呢?

因为在这里有个功能,叫做新建,在读取文件的时候,假设当前展示的文本编辑器类QMyEdit中存在了内容时,是需要重新创建的,为了统一起见,将第一个参数设置为类指针,方便函数调用。

无论是新创建的页面还是已经存在的页面都可以进行写入文本。

2.2:新建文件

在这里所谓的新建就是建立一个空白的编辑文本,功能简单,这里就不再过多说明了。

void QtTextEditor::OnTriggeredNewFile()
{
	QMyTextEdit *editCtrls = new QMyTextEdit;
	editCtrls->show();
	m_vetEditCtrls.push_back(editCtrls);
}

唯一需要提一句的就是:创建了新的文本类之后,一定要记得存储类指针,为了防止在后续使用的过程中查询不到以及在销毁的过程中,防止内存泄漏。

2.3:复制、剪贴、粘贴

这三个功能都沿用的QTextEdit自带功能,这里不用再过多说明,直接响应父类消息就可以了。

功能3:文本编辑

大家都用过文本编辑器,主要的功能还是对文字的操作,那么在这里主要讲述了文字工具栏以及文字的展示风格

3.1 文字工具栏

正如上一章节讲述那般,工具条的使用大家都不陌生了吧,这里需要创建一个字体工具栏,并包含了如下几个功能:

功能 名称 类名
字体样式 m_ComboFontStyle QFontComboBox
字体选择框 m_ComboFontSize QComboBox
字体加粗 m_btnFontBold QToolButton
字体倾斜 m_btnFontItalic QToolButton
字体颜色值 m_btnFontColor QToolButton

实际做出来的效果,如下:

对于字体的设置,与其它工具条上展示的内容不一致,不再采用动作,而是使用了控件的方式

具体每个功能对应的类名上面的表格已经说明了,重点要说的是:获取字体风格以及字体的大小

字体风格

QFontCombobox是QComboBox的一个子类,是不能被编辑的,只能用来选择字体。

m_ComboFontStyle = new QFontComboBox;
m_ComboFontStyle->setFontFilters(QFontComboBox::ScalableFonts);

字体字号

采用的是:QFontDatabase,提供了有关底层窗口系统中可用的字体信息,当前主要用来查询字体大小的。

m_ComboFontSize = new QComboBox;
QFontDatabase dbFont;
foreach(int size, dbFont.standardSizes())
{
	m_ComboFontSize->addItem(QString::number(size));
}

代码解析:

这里使用了foreach的方式,代替了for循环,要是有不懂得小伙伴可以详细查询,这里只是做了解释说明~

standarSizes函数,返回了可用的标准字号的列表,并将列表内容插入到QCombobox中。

另外说明:QToolButton与QPushButton的用法一致,只是换了类名,创建方法以及消息绑定都不再过多说明了。

最后,将创建的这些控件绑定到字体工具条上

m_pToolFont = addToolBar("Font");
m_pToolFont->setAllowedAreas(Qt::BottomToolBarArea );
m_pToolFont->addWidget(m_labFontStyle);
m_pToolFont->addWidget(m_ComboFontStyle);
m_pToolFont->addWidget(m_labFontSize);
m_pToolFont->addWidget(m_ComboFontSize);
m_pToolFont->addSeparator();
m_pToolFont->addWidget(m_btnFontBold);
m_pToolFont->addWidget(m_btnFontItalic);
m_pToolFont->addSeparator();
m_pToolFont->addWidget(m_btnFontColor);

看到这里,大家可以尝试下自己写的代码,看看是不是可以运行起来。

在这里需要注意的是:为什么运行起来是下面这个样子?

有没有人有这种情况?为什么和第一张效果图不一样呢?不是另起一行,而是什么都看不到了呢?

在ToolBar中,如果一行展示不全的情况下,需要告诉QToolBar另起一行,则,需要在addToolBar之前添加如下代码:

this->addToolBarBreak(Qt::TopToolBarArea);

再次运行,就变成了两行的工具栏了,踩坑记录,希望大家也不要犯这个错误啦~

3.2:字体风格

在这里,说到的字体风格无外乎就是工具栏上所展示的内容啦!

文字风格这部分都采用了QTextCharFormat对象进行实现的

字体风格

void QtTextEditor::OnComboFontStyle(QString& qsText)
{
	QTextCharFormat fmt;
	fmt.setFontFamily(qsText);

	QTextCursor cursor = m_editContent->textCursor();
	if (!cursor.hasSelection())
	{
		cursor.select(QTextCursor::WordUnderCursor);
	}
	cursor.mergeCharFormat(fmt);
	m_editContent->mergeCurrentCharFormat(fmt);
}

代码解析:

获取控件的焦点,假设当前控件上的文本并没有被选中,就指定光标区域所在的词为高亮选定词,从而设置字体风格样式

字号

fmt.setFontPointSize(qsText.toInt());

加粗

fmt.setFontWeight(bCheck);

斜体

fmt.setFontItalic(bchecked);

以上几个功能,用法都很类似,正如我前面提到的,都是采用QTextCharFormat类,只是设置的函数不同,具体的功能不在做过多说明,下面,与上述几个功能相比较,需要说明的是:颜色设置。

字体颜色

在这时颜色的时候,用到了系统文件类:QColorDialog,与打开文件的方式类似,只是类名不一致

void QtTextEditor::OnToolFontColor(bool bchecked)
{
	QColor color = QColorDialog::getColor(Qt::red, this);
	if (color.isValid())
	{
		QTextCharFormat fmt;
		fmt.setForeground(color);
		m_editContent->mergeCurrentCharFormat(fmt);
	}
}

根据以上功能,具体的显示效果如下:

总结

到这里,具体的文本风格就讲解完成了,在整个设置过程中,最最重要的类就是:QTextCharFormat。

在代码使用过程中,大家会发现,我一直是对m_editContent进行操作的,是滴!

其实是存在新建功能的,这里的新建空白文本的文字处理功能就交给大家啦,这是只是做一个示范例子而已,提前说明下,不是很难,只要掌握了当前处于活跃的QMyEdit类指针就可以了。

以上就是Qt实现文本编辑器(二)的详细内容,更多关于Qt文本编辑器的资料请关注我们其它相关文章!

(0)

相关推荐

  • Qt5实现文本编辑器(附详细代码)

    目录 1. 功能介绍 2. 功能演示 3. 代码 4. 改进 1. 功能介绍 老规矩,我们直接上截图 这是主界面 文件菜单界面 编辑菜单界面 设置菜单界面 关于菜单界面 2. 功能演示 设置字体颜色 设置字体大小 点击关于菜单 点击关于Qt菜单 会自动跳转到Qt的官网 点击图片转PDF 打开文件等对话框 3. 代码 我们直接上代码 aboutwidget.h #ifndef ABOUTWIDGET_H #define ABOUTWIDGET_H #include <QWidget> names

  • Qt实现文本编辑器(一)

    目录 功能实现 动作(QAction)实现 菜单(Menus)实现 工具栏(ToolBars)实现 展示区域 小结(一) 在Qt中QMainWindow是一个为用户提供主窗口程序的类,包含了:菜单栏.工具栏.锚接部件.状态栏以及一个中部件.今天我就来通过实现一个简单的文本编辑器讲解下对QMainWindow的各种功能讲解. 想要完整的实现一个编辑器,所需要的功能还是比较全面的.今天主要来讲解如何构建文本编辑器,包括了:菜单栏.工具栏以及文本编辑区域. 功能实现 在QMainWindow中,菜单与

  • Qt实现文本编辑器(二)

    目录 功能实现 功能: 功能1:动作消息 功能2:动作事件实现 功能3:文本编辑 总结 上一章节讲述了如何制作文本编辑页面,以及应该有哪些功能需要实现,只是做了展示效果,实际的点击事件并没有处理.今天来具体讲解下是如何实现菜单栏以及工具栏上对应的需求吧~ 功能实现 功能: 1.动作消息触发 2.具体功能:打开文件.新建文件.复制.剪切.粘贴 3.文本编辑功能:字体设置 今天只讲述以上三大功能,至于:旋转.缩放等功能都是针对于图片来说的,等下一章节,具体的讲解方式就不在是文本编辑器的功能了,静待后

  • 教你用JAVA写文本编辑器(二)

    目录 这是编辑器第一章 JAVA写文本编辑器(一) ,需要的同学了解一下. 这一章我们来处理一下JMenuBar里的item的事件响应,首先从最简单的item关于开始. 为什么说这个简单,因为它需要完成的功能很少,只是出来一个对话框或者窗口,然后显示一个文字. 首先,我们按照执行软件的顺序来写代码,我们点击menu,会弹出里面的子项item.然后当我们点击item的时候,会弹出新的窗口.注意:弹出item是menu自己做好的,但是当我们点击item是没有响应的,因为这里需要我们给他设置监听器来执

  • 详解Linux常用命令的用法(二)————文本编辑器命令vi/vim

    vi/vim介绍 它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面. 1.vi和vim的区别: 就是在进入一般命令模式后,当按下(i.I.o.O.a.A.r.R)等任何一个字母,之后就会今入编辑模式.此时就可以进行文本编辑了. 在一般命令模式中,输入(:/ ?)三个中任何一按键就进入了指令命令模式.在这个模式中,可以进行读取.存盘.大量取代字符.离开vi.显示行号等功能. vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当

  • ASP.NET配置KindEditor文本编辑器图文教程

    1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor 使用 JavaScript 编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 2.前期准备 到官网下载最新版的KindEditor 4.11

  • 使用富文本编辑器上传图片实例详解

    富文本编辑器上传图片 一.导入kindeditor的js <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> <script type="text/javascript" charset="utf-8" src=&qu

  • Linux使用文本编辑器vi常用命令

    vi/vim是什么? Linux世界几乎所有的配置文件都是以纯文本形式存在的,而在所有的Linux发行版系统上都有vi编辑器,因此利用简单的文字编辑软件就能够轻松地修改系统的各种配置了,非常方便.vi就是一种功能强大的文本编辑器,而vim则是高级版的vi,不但可以用不同颜色显示文字内容,还能进行诸如shell脚本.C语言程序编辑等功能,可以作为程序编辑器. vi的三种模式及各个模式之间的转换关系 一:翻页 ctrl+u向上翻半页 ctrl+f向上翻一页 ctrl+d   向下翻半页 ctrl+b

  • 超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",

  • 不到200行 JavaScript 代码实现富文本编辑器的方法

    前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小.而项目最核心的文件 pell.js 只有130行,即使加上其它部分,总的 js 数量也不到200行.这引起了我的兴趣,决定看看它的源码是如何做到这一点的. 项目的主要代码在 pell.js文件中,其结构很简单,主要功能的实现依赖于以下的几个部分 actions 对象 exec() 函数 init() 函数 Do

  • django富文本编辑器的实现示例

    最近一段时间都在学django,现在的网站基本都要使用到富文本编辑器,今天就记录下使用django的管理后台的一个富文本编辑器的第三方库 DjangoUeditor 使用方法 1.安装 方法一:将github整个源码包下载回家,在命令行运行: python setup.py install 方法二:使用pip工具在命令行运行(推荐): pip install DjangoUeditor 2.在 settings.py的INSTALL_APPS里面增加DjangoUeditor app INSTA

随机推荐