Axure实战23:创建一个包含富文本编辑的消息推送页面

·  阅读 745
Axure实战23:创建一个包含富文本编辑的消息推送页面

在本章中,你将学会使用Axure和JavaScript创建一个包含RichTextEditor富文本编辑的消息推送页面

项目背景

在常见的管理后台中,我们通常会使用消息管理模块推送站内消息给用户,告知用户日常信息、监控信息、警告信息等。

消息推送功能是管理后台的基础功能之一,能在业务进程发生变化时及时通知用户,提升用户体验。

那么本章,我们将构建一个消息推送页面。

项目搭建

首先,创建一个新项目,命名为Notification。

1.png

页面样式-框架

首先我们先搭建整体页面框架。

设置页面背景填充颜色为#F0F2F5,拖入一个“矩形1”作为主视图内容,位置设置为(20,70),尺寸设置为1100*920,线段颜色为#E9E9E9。

拖入一个“文本标签”组件作为标题,文字为“新建信息”,再拖入一个“文本标签”组件作为提示必填信息,文字为“*为必填项”。

拖入一个“水平线”组件将标题和内容分隔开,线段颜色为#E9E9E9。

2.png

页面样式-基本信息

消息推送功能的基础内容为:消息推送的栏目类型、消息标题、消息接收的对象。

我们使用“文本标签”和“文本框”组件设计基础信息的样式。

文本标签字号为14,距离文本框20的位置。输入框尺寸均为400*40,在交互栏中设置提示文字和获得焦点时隐藏提示的交互。

3.png

页面样式-消息内容

消息内容部分,为了实现富文本编辑的效果,我们不能使用文本框或者文本域作为框架,需要自己实现对应的交互效果。

拖入一个“文本标签”作为标题,拖入一个“内联框架”作为富文本编辑的展示区域,设置尺寸为820*420,勾选“隐藏边框”,设置滚动模式为“从不滚动”。

4.png

交互动作-消息内容

要想实现复杂的RichTextEditor富文本编辑交互,我们要引用外部的JavaScript代码,代码如下:

javascript: 
document.writeln("<div id=\'editor\' style=\'width:800px;height:200px\'>");
document.writeln("<script type=\'text/javascript\' src=\'https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js\'></script>");
document.writeln("<script type=\'text/javascript\'>");
document.writeln("var E = window.wangEditor");
document.writeln("var editor = new E(\'#editor\')");
document.writeln("editor.create()");
document.writeln("</script>");
复制代码

在“交互”工具栏中新建交互,选择“载入时”,选择“框架中打开链接”,目标为“内联框架”,选择“链接到URL或文本路径”,点击fx打开编辑值弹窗。

在编辑值弹窗中插入上面的JavaScript代码。

5.png

完成后,我们在浏览器中预览下效果。

6.png

页面样式-其他样式

提醒方式:为复选条件,我们可以使用动态面板绘制单个复选条件,点击切换状态以实现复选效果。

操作按钮:拖入3个“主要按钮”组件,1个“按钮”组件,设置尺寸为100*40,主要按钮填充颜色为#1890FF,按钮线段颜色和文字颜色为#1890FF。

7.png

项目预览

完成后,我们在浏览器中预览下效果。

8.png

哈哈哈,效果不错!

为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

项目地址

Notification消息推送:ricardowesley.gitee.io/notificatio…

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改