Axure设计之文本编辑器制作教程

文本编辑器是一个功能强大的工具,允许用户在图形界面中创建和编辑文本的格式和布局,如字体样式、大小、颜色、对齐方式等,在Web端实际项目中,文本编辑器的使用非常频繁。以下是在Axure中模拟web端富文本编辑器,来制作文本编辑器的简单教程:

一、效果展示

因为是模拟富文本编辑器功能,这里仅实现了简单的功能,如自定义字体样式、大小、颜色、对齐方式等操作。

原型预览:https://gwbomf.axshare.com

下载地址:https://download.csdn.net/download/u010709330/89991074

二、关键步骤

1、拖入矩形、文本域等元件,设置好文本编辑器的整体框架;

2、从元件库添加下来单选框,作为字体样式、大小、颜色选择组件;

3、再添加图标分别作为加粗、倾斜、下划线、文字居左、文字居中、文字居右、清除文本编辑器组件;

4、上交互,给字体样式、大小、颜色选择器选项及其他图标工具添加交互:

End·往期推荐

大屏可视化:舞动数据与美观的"设计秘籍"

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

相关推荐
结构化知识课堂1 天前
Axure疑难杂症:完美解决中继器数据互通、增删改查(玩转中继器)
axure·增删改查·中继器·中继器筛选·数据互通
结构化知识课堂1 天前
Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)
axure·中继器筛选·时间筛选·多条件筛选
招风的黑耳1 天前
【Axure元件分享】时间范围选择器
axure·时间范围选择器
招风的黑耳1 天前
【Axure元件分享】月份范围选择器
axure·年月选择器
招风的黑耳2 天前
我用Axure画了一个富文本编辑器,还带交互
axure·富文本编辑器
招风的黑耳2 天前
【Axure元件分享】年份范围选择器
axure·年份选择器
结构化知识课堂3 天前
Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)
axure·验证码·计数器·文本框·文本框赋值·文本框读取·文本框监控
结构化知识课堂4 天前
Axure项目实战:智慧运输平台后台管理端-母版、登录(文本框高级交互)
axure·母版设计·注册登录·垂直菜单·文本框高级交互
招风的黑耳4 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
梓贤Vigo8 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型