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

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

项目背景

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

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

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

项目搭建

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

页面样式-框架

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

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

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

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

页面样式-基本信息

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

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

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

页面样式-消息内容

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

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

交互动作-消息内容

要想实现复杂的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代码。

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

页面样式-其他样式

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

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

项目预览

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

哈哈哈，效果不错！

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

项目地址

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

快来动手试试吧！