在线 HTML 编辑器是内容管理系统的最核心功能之一,它采用与 Word 类似的可视化编辑方式,实现对文章内容的“所见即所得”的在线编辑效果。

对于编辑人员而言,“文章编辑页面”是他们使用时间最长的地方,而在线编辑器作为“文章编辑页面”的核心功能,其设计优劣将直接影响编辑人员的工作效率。

尽管市面上有许多开源的在线 HTML 编辑器(例如百度 UEditor),但如何让编辑器更贴近用户的操作习惯,仍然是产品设计中的一个挑战。动易遵循业界普遍做法将百度 UEditor 整合进内容管理系统里。但动易不仅仅是简单的整合,而是在此基础上进行深度改进和优化,从而在功能和用户体验上有了质的飞跃,达到了“人无我有,人有我优”的效果。

亮点设计

重新整理和调整了工具栏上的按钮位置和顺序

百度 UEditor 的设计注重功能的完备性和广泛适用性,提供了相当丰富的按钮,但这些按钮的位置和顺序并无优化,甚至有些按钮式多余的,导致编辑器工具栏占用了较多页面空间。

我们对编辑中的每一个按钮进行了认真评估,根据使用频率调整了按钮的位置和顺序,将相近功能的按钮进行了合并和分组(比如几种对齐方式),将“插入图片、视频、音频”等12+项与“插入”相关的按钮统一移至“插入”按钮的下拉菜单中,删减了部分几乎用不到的按钮,以确保在各种分辨率下,最常用的功能按钮能直接显示出来,而无需展开工具栏。从而大幅改善了编辑器在低分辨率下的用户体验。

  • WebFuture 的 HTML 编辑器(工具栏默认状态)
    百度默认的 HTML 编辑器
  • “插入”下拉菜单
  • 特定按钮固定在工具栏右侧
  • 点击展开后按钮显示第二行

自动隐藏显示工具栏上的按钮

当屏幕分辨率较低时,工具栏上的按钮如果无法全部显示,会有一部分自动隐藏,用户点击展开后这些按钮将显示在第二行。同时,查找与替换、分页、不常见字体提醒、全屏等特定按钮则固定在工具栏右侧,始终保持可见状态。

提供多种模式,适配不同场景

百度 UEditor 默认处于“全功能模式”,这虽然提供了最丰富的功能,但在某些场景下并不适合使用(过多的功能反而会干扰用户操作)。例如,在添加或修改节点描述时,使用一个简洁的编辑器来支持 HTML 即可,无需像处理文章内容那样需要全功能的 HTML 编辑器。

动易改进后的在线 HTML 编辑器根据不同功能模块的需求,提供了标准、完整、简洁、极简、微信等多种模式,以适应不同的应用场景。

  • 标准模式
  • 完整模式
  • 简洁模式
  • 极简模式
  • 微信模式
  • 标准模式

    保留了完整的操作按钮,但默认仅显示一行常用按钮(可根据分辨率自动调整),并可展开显示所有按钮,主要用于文章内容以外的表单字段的复杂 HTML 编辑。

  • 完整模式

    基于标准模式,增加了内容分页和内容大纲(目录)功能,主要用于文章内容编辑。

  • 简洁模式

    仅保留常用操作按钮,适用于只需简单编辑 HTML 的表单字段(如节点描述)。

  • 极简模式

    在简洁模式基础上进一步减少不常用按钮。

  • 微信模式

    专为微信发布内容编辑设计,增加了调用第三方编辑工具的功能按钮。

针对手机使用进行适配和优化

针对在手机上使用在线编辑器进行录入的场景(如通过手机进行用户投稿,或在后台管理文章时进行文章录入/编辑),进行了全面的适配和优化,确保在这些情况下也能提供良好的用户体验。标准、全功能、简洁、极简等每一种模式都具备相应的手机版本,以满足不同模式下的移动端使用需求。

整合错别字和敏感字检查

系统支持错别字和敏感词的检查功能。当发现错别字或者敏感字时,点击结果时会自动定位到编辑器中的具体位置,并将其标注出来。编辑人员可以手动确认,确认是错别字和敏感字时可点击“更正”按钮由系统自动修正这些错误。

一键导入 Word 文档

支持一键导入 Word 文档功能,导入时文档内容会直接保留原有格式和表格并呈现在编辑器中,文档中的图片也会自动上传到服务器。系统支持多种 Word 文档格式,包括 .docx、.doc 和.wps(金山 WPS 的文档格式)。导入过程中还可以进行个性化设置,如将文件名或内容的第一行作为标题、从内容中移除标题、自动提取第一张图片作为封面,以及清理格式(包括清除格式、首行缩进、字号、字体、链接和图片)等。

一键自动排版

点击“自动排版”按钮,系统会根据预设的条件智能自动排版。预设条件包括:合并空行、清除空行、首行缩进、清除字号、清除字体、清除样式、清除冗余 HTML 代码、清除冗余 Class、清除 Word 复制过来的特殊格式和符号、文本对齐方式、图片对齐方式、符号转换等

自动下载远程图片

支持将编辑器中的远程图片自动下载并保存到服务器本地。

截图自动上传

支持将截图直接粘贴到编辑器中即可自动上传到服务器上。

从 Word 中复制内容粘贴到编辑器时自动清理格式

支持在将 Word 内容粘贴到编辑器后,自动弹出清理和排版对话框

手机扫码上传

通过扫描二维码,用户可直接将手机中的图片上传至网站,无需借助电脑。

公式编辑器

集成了公式编辑器,支持直接插入公式,公式以 Base64 编码的图片格式插入,确保所见即所得。

内容分页功能

可开启或关闭分页功能,进入分页模式后,支持类似 Word 页面视图的效果(纸张效果),允许用户可以直接在光标处分隔页面,可以添加、删除分页、可以向下/向上合并分页,可以移动分页,也可以设置分页标题。

内容大纲(目录)

可选择开启或关闭“目录”功能。开启后,编辑器左侧显示内容的目录结构(自动根据内容中设置的“标题1~6”来自动生成文档的目录结构),并在内容结构变化时自动更新。

图片描述

支持设置图片描述(显示在图片下方的文字),支持在上传图片时自动将文件名做为图片描述。

编辑器中的视频可以直接播放

在编辑器中插入的视频支持直接播放,提升用户体验。

设置编辑区页面宽度

允许设置编辑区的页面宽度,以尽可能的让后台编辑和前台显示效果一致,最大化实现“所见即所得”。

文本浮动工具栏

选中文本时,自动弹出浮动文本格式浮动工具栏,支持设置粗体、斜体、下划线、删除线、字体颜色、背景色、链接等属性。

图片浮动工具栏

选中图片时,自动弹出图片浮动工具栏,支持旋转、裁剪、设置图片尺寸、链接、描述、对齐方式、图片样式等操作。

视频浮动工具栏

选中视频时,自动弹出视频浮动工具栏,支持打开视频源、下载视频、复制视频地址、删除等操作。

表格显示优化

对于编辑器中过宽或过高的表格,前台显示时自动调整为预设大小并添加滚动条。

插入图片/视频/音频/PDF/附件弹窗优化

对插入图片、视频、音频、PDF、附件的弹窗进行了优化,支持直接上传,也可从已上传文件或个人素材库中选择。

不常见字体提醒

当设置了不常见字体时,系统会闪烁提醒用户。

×

用户登录