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>");