Qt实现文本编辑器(一)

目录
  • 功能实现
    • 动作（QAction）实现
    • 菜单（Menus）实现
    • 工具栏（ToolBars）实现
    • 展示区域
  • 小结（一）

在Qt中QMainWindow是一个为用户提供主窗口程序的类，包含了：菜单栏、工具栏、锚接部件、状态栏以及一个中部件。今天我就来通过实现一个简单的文本编辑器讲解下对QMainWindow的各种功能讲解。

想要完整的实现一个编辑器，所需要的功能还是比较全面的。今天主要来讲解如何构建文本编辑器，包括了：菜单栏、工具栏以及文本编辑区域。

功能实现

在QMainWindow中，菜单与工具栏都与QAction类有密切的关系，实现菜单和工具栏主要是对动作的实现。

QAction类为用户提供了一个统一的命令接口，无论是从菜单触发还是从工具栏触发，甚至是通过快捷键触发都调用同样的操作接口，达到同样的目的。

动作（QAction）实现

设计到的动画包括了以下几个功能：

打开、新建、退出、复制、剪切、粘贴

对应的动作类，如下面表格中介绍，后续都是用类指针的方式说明：

动作 类名 功能 组合键
打开 m_pActionOpenFile 打开一个指定的文件，从本地程序中打开 Ctrl+O
新建 m_pActionNewFile 弹出新的文件编辑窗口 Ctrl+N
退出 m_pActionExit 退出 Ctrl+Q
复制 m_pActionCopy 复制 Ctrl+C
剪切 m_pActionCut 剪切 Ctrl+X
粘贴 m_pActionPaste 粘贴 Ctrl+V

在文本编辑器中一般会用到这几项功能，我们可以对每个动作功能进行快捷键绑定，接下来就以“打开文件动作”做详细说明吧~

"打开"动作

创建一个打开动作

m_pActionOpenFile = new QAction(QIcon(":/QtTextEditor/image/open.jpg"), QStringLiteral("打开"), this);

在创建“打开”动作的同时也指定了当前动作使用的图标、名称以及父窗口

设置快捷键

m_pActionOpenFile->setShortcut(tr("Ctrl+O"));

当前“打开”动作的组合键是Ctrl+O

设置提示信息

m_pActionOpenFile->setStatusTip(QStringLiteral("打开一个文件"));

类似于控件的setToolTips功能。

当鼠标光标移动到此动作对应的菜单条目或工具栏按钮上时，在状态栏上会显示“打开一个文件”的提示。

有的人会问道：在创建打开动作实例的时候，不传入图片可以吗？

当然没问题啦，在创建动作时，不传入图标时，这类动作通常只在菜单中出现，而不在工具栏上面使用。这是唯一的区别

剩下的其他动作我们可以也按照同样的方式进行设置，具体的组合键可以参照我的，也可以随意发挥。

菜单（Menus）实现

在实现了各个动作之后，直接展示能被我们看到吗？

如果不清楚的可以运行下，结果发现是不可以被看到的。是需要将它们通过菜单、工具栏或者快捷键的方式体现出来。

什么是菜单呢？

就拿Notepad++文本编辑器来说明下

红色框标注的区域是菜单栏，蓝色框标注的区域是工具栏

接下来，我们就来实现菜单栏上的功能，这里只是简单的列举了几项，包括：文件、缩放、旋转、镜像

功能对应表如下：

名称 类名 功能
文件 m_pMenuFile 打开一个新文件;创建一个新文件;退出
缩放 m_pMenuZoom 复制文件;剪切文件;粘贴文件;放大;缩小
旋转 m_pMenuRotate 90°旋转;180°旋转;270°旋转
镜像 m_pMenuMirror 垂直镜像;水平镜像

菜单创建

m_pMenuFile = menuBar()->addMenu(QStringLiteral("文件"));
m_pMenuFile->addAction(m_pActionOpenFile);
m_pMenuFile->addAction(m_pActionNewFile);
m_pMenuFile->addSeparator();

就以文件菜单为例，不采用new的方式，直接调用QMainWindow的menuBar()函数就可以得到主窗口的菜单栏指针，然后，再调用QMenuBar::addMenu()函数，就可以在菜单栏中插入一个新菜单fileMenu。

其中，fileMenu就是一个QMenu类对象。

addAction：可以在菜单条目中添加“打开”、“新建”的动作，如下图所示：

像：缩放菜单、旋转菜单、镜像菜单实现方法类似，这里就不一一说明了。

工具栏（ToolBars）实现

在主窗口的工具栏上可以存在多个工具条，一般情况下一个菜单对应一个工具条，在实际应用中也可以根据项目需求进行分配。

在这里我为了简单起见，按照菜单的数量划分了工具条：文件工具条、编辑工具条、旋转工具条、镜像工具条

红色框区域就是创建的四个工具条，其中还标注了两个蓝色框，这两个蓝色框中的内容就是在设置动作时，写入的提示信息。

就拿文件工具条来举例吧

m_pToolFile = addToolBar("File");
m_pToolFile->addAction(m_pActionOpenFile);
m_pToolFile->addAction(m_pActionNewFile);

在默认的创建工具条的属性中，是可以随意拖动工具条的，想要禁止拖动可以如下设置：

m_pToolFile->setMovable(false);

创建好了菜单以及工具栏之后，中间剩下的区域就是我们文本编辑以及展示的区域了。

展示区域

展示区域主要是进行编写工作，在这里我们可以采用QTextEdit编辑控件来处理。

那么，如何确定该编辑框的展示区域呢？

在QMainWindow主窗口中有一个叫做中心窗口部件：Central Widget，创建了QTextEdit控件后，将该控件指针赋值到中心窗口部件就可以实现编辑区域在中间展示的效果了

实际的展示效果：

实际的代码操作：

m_editContent = new QTextEdit(this);
setCentralWidget(m_editContent);

小结（一）

看到这里，就可以构建出整体的编辑页面了，包括了三个部分：菜单栏区域、工具栏区域、编辑区域

那么，下一章节我们继续介绍文本编辑器功能

到此这篇关于Qt实现文本编辑器(一)的文章就介绍到这了,更多相关Qt文本编辑器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

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

    Qt实现文本编辑器(二)

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

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

    Qt实现文本编辑器(一)

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

  • ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下  3.在网页中加入(ValidateRequest="false") 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Validat

  • javascript 在线文本编辑器实现代码

    javascript 在线文本编辑器实现代码

    Editor body{ font-size:12px;} #ed{ height:300px; width:800px; background-color: } .sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)} .tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px

  • xheditor所见即所得文本编辑器(代码高亮显示修改)

    xheditor所见即所得文本编辑器(代码高亮显示修改)

    所见即所得的文本编辑器目前在网上流传的已经有很多了,并且都比较优秀,就我个人而言,用过的有以下几个:     · 第一个接触的是ewebeditor,用在我的毕业设计里面,那时候是顺便选的,对这类东西也没什么了解,现在这个编辑器已经相当猛了:     · 后来工作中用了FCKEdier,原因很简单,这个文本编辑器已经有相应的asp.net服务器端控件,封装得很棒,不过毕竟是封装好了的控件,存在着一定的局限,而且目前这个文本编辑器已经全面改版,并且现在的名字叫CKEdier,现在所在公司的项目也是

  • 分享10个程序员常用的的代码文本编辑器

    分享10个程序员常用的的代码文本编辑器

    通常操作系统和软件开发包中都包含文本编辑器,可以用来编辑配置文件,文档文件和源代码. 下面是笔者总结的10个最好的免费代码文本编辑器: 1.NOTEPAD++ NOTEPAD++是一款免费又优秀的文本编辑器,支持在MS Windows环境下运行的多种编程语言.NOTEPAD++支持超过50种编程.脚本和标记语言的语法高亮显示和代码折叠,能让用户迅速减小或扩大代码段以便查阅整个文档.用户也可以手动设置当前语言,覆盖默认语言.该程序还支持自动完成某些编程语言的API子集. 官方网站:http://n

  • Vue.js结合Ueditor富文本编辑器的实例代码

    Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • iOS实现富文本编辑器的方法详解

    iOS实现富文本编辑器的方法详解

    前言 富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor.但是这两个也有它的缺点:界面过于复杂.不够简洁.UI设计也比较落后.不够轻量化,这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器. 实现的效果 解决思路 采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用 最终输出该富文本字符串传输给服务器 为什么选择这样的方式 服务端要求我最终返回的数据格式为: { @"Id":"当时新建模板这

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

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

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

随机推荐