在线 HTML 编辑器是内容管理系统的最核心功能之一,它采用与 Word 类似的可视化编辑方式,实现对文章内容的“所见即所得”的在线编辑效果。
对于编辑人员而言,“文章编辑页面”是他们使用时间最长的地方,而在线编辑器作为“文章编辑页面”的核心功能,其设计优劣将直接影响编辑人员的工作效率。
尽管市面上有许多开源的在线 HTML 编辑器(例如百度 UEditor),但如何让编辑器更贴近用户的操作习惯,仍然是产品设计中的一个挑战。动易遵循业界普遍做法将百度 UEditor 整合进内容管理系统里。但动易不仅仅是简单的整合,而是在此基础上进行深度改进和优化,从而在功能和用户体验上有了质的飞跃,达到了“人无我有,人有我优”的效果。
百度 UEditor 的设计注重功能的完备性和广泛适用性,提供了相当丰富的按钮,但这些按钮的位置和顺序并无优化,甚至有些按钮式多余的,导致编辑器工具栏占用了较多页面空间。
我们对编辑中的每一个按钮进行了认真评估,根据使用频率调整了按钮的位置和顺序,将相近功能的按钮进行了合并和分组(比如几种对齐方式),将“插入图片、视频、音频”等12+项与“插入”相关的按钮统一移至“插入”按钮的下拉菜单中,删减了部分几乎用不到的按钮,以确保在各种分辨率下,最常用的功能按钮能直接显示出来,而无需展开工具栏。从而大幅改善了编辑器在低分辨率下的用户体验。
百度 UEditor 默认处于“全功能模式”,这虽然提供了最丰富的功能,但在某些场景下并不适合使用(过多的功能反而会干扰用户操作)。例如,在添加或修改节点描述时,使用一个简洁的编辑器来支持 HTML 即可,无需像处理文章内容那样需要全功能的 HTML 编辑器。
动易改进后的在线 HTML 编辑器根据不同功能模块的需求,提供了标准、完整、简洁、极简、微信等多种模式,以适应不同的应用场景。
保留了完整的操作按钮,但默认仅显示一行常用按钮(可根据分辨率自动调整),并可展开显示所有按钮,主要用于文章内容以外的表单字段的复杂 HTML 编辑。
基于标准模式,增加了内容分页和内容大纲(目录)功能,主要用于文章内容编辑。
仅保留常用操作按钮,适用于只需简单编辑 HTML 的表单字段(如节点描述)。
在简洁模式基础上进一步减少不常用按钮。
专为微信发布内容编辑设计,增加了调用第三方编辑工具的功能按钮。
针对在手机上使用在线编辑器进行录入的场景(如通过手机进行用户投稿,或在后台管理文章时进行文章录入/编辑),进行了全面的适配和优化,确保在这些情况下也能提供良好的用户体验。标准、全功能、简洁、极简等每一种模式都具备相应的手机版本,以满足不同模式下的移动端使用需求。
系统支持错别字和敏感词的检查功能。当发现错别字或者敏感字时,点击结果时会自动定位到编辑器中的具体位置,并将其标注出来。编辑人员可以手动确认,确认是错别字和敏感字时可点击“更正”按钮由系统自动修正这些错误。
支持一键导入 Word 文档功能,导入时文档内容会直接保留原有格式和表格并呈现在编辑器中,文档中的图片也会自动上传到服务器。系统支持多种 Word 文档格式,包括 .docx、.doc 和.wps(金山 WPS 的文档格式)。导入过程中还可以进行个性化设置,如将文件名或内容的第一行作为标题、从内容中移除标题、自动提取第一张图片作为封面,以及清理格式(包括清除格式、首行缩进、字号、字体、链接和图片)等。
点击“自动排版”按钮,系统会根据预设的条件智能自动排版。预设条件包括:合并空行、清除空行、首行缩进、清除字号、清除字体、清除样式、清除冗余 HTML 代码、清除冗余 Class、清除 Word 复制过来的特殊格式和符号、文本对齐方式、图片对齐方式、符号转换等
支持将编辑器中的远程图片自动下载并保存到服务器本地。
支持将截图直接粘贴到编辑器中即可自动上传到服务器上。
支持在将 Word 内容粘贴到编辑器后,自动弹出清理和排版对话框
通过扫描二维码,用户可直接将手机中的图片上传至网站,无需借助电脑。
集成了公式编辑器,支持直接插入公式,公式以 Base64 编码的图片格式插入,确保所见即所得。
可开启或关闭分页功能,进入分页模式后,支持类似 Word 页面视图的效果(纸张效果),允许用户可以直接在光标处分隔页面,可以添加、删除分页、可以向下/向上合并分页,可以移动分页,也可以设置分页标题。
可选择开启或关闭“目录”功能。开启后,编辑器左侧显示内容的目录结构(自动根据内容中设置的“标题1~6”来自动生成文档的目录结构),并在内容结构变化时自动更新。
支持设置图片描述(显示在图片下方的文字),支持在上传图片时自动将文件名做为图片描述。
在编辑器中插入的视频支持直接播放,提升用户体验。
允许设置编辑区的页面宽度,以尽可能的让后台编辑和前台显示效果一致,最大化实现“所见即所得”。
选中文本时,自动弹出浮动文本格式浮动工具栏,支持设置粗体、斜体、下划线、删除线、字体颜色、背景色、链接等属性。
选中图片时,自动弹出图片浮动工具栏,支持旋转、裁剪、设置图片尺寸、链接、描述、对齐方式、图片样式等操作。
选中视频时,自动弹出视频浮动工具栏,支持打开视频源、下载视频、复制视频地址、删除等操作。
对于编辑器中过宽或过高的表格,前台显示时自动调整为预设大小并添加滚动条。
对插入图片、视频、音频、PDF、附件的弹窗进行了优化,支持直接上传,也可从已上传文件或个人素材库中选择。
当设置了不常见字体时,系统会闪烁提醒用户。
用户登录
还没有账号?
立即注册