（翻译）就地编辑器（Inplace Editor）

问题概述

用户能够在网页上便捷地编辑内容。

示例

 

 用途

• 用于当用户仅编辑少量内容时；
• 用于用户编辑简单格式的内容时，例如编辑下拉框中的字符串内容；
• 用于想让用户直接在当前页面编辑某项值，而不是跳转到另外的管理界面去编辑的情况。

解决方案

用户可以在网页中显示某项内容的同一位置编辑其值[1]，这为用户提供了简便的方式对网页部分内容进行编辑，不需要跳转到另外的编辑页面进行内容编辑。通常情况下，鼠标悬停事件触发就地编辑。

就地编辑器模式允许对网页中的元素进行局部编辑，本模式将编辑控件放在元素旁边，这样便于对元素内容进行编辑。

以上图为例，应用系统处于编辑模式时，如果用户将鼠标移动到网页标题元素处，会在此处显示标题编辑控件[2]。标题

元素背景被高亮显示，并在标题处出现提示框提示用户点击标题进行编辑。一旦用户点击标题，就会在标题处出现内容编辑

框（文本输入控件、下拉选择控件等），同时还带有保存按钮和取消按钮。通常，内容编辑框的样式与原始数据的样式一致，

例如如果原始内容字体大小为20，则内容编辑框中的字体大小也为20，这种方式的目的是为了让用户将正在编辑的内容和原

始内容联系在一起。接下来，用户编辑内容编辑框中的值（该值初始化为原始数据的值），然后点击保存或者取消按钮。如果

点击保存按钮，应用程序调用AJAX代码将值保存到后台数据库，接着更新标题元素的内容并返回正常显示状态。如果点击取消

按钮则标题元素内容不做任何改变并返回正常显示状态。

本模式通常结合AJAX技术使用。在JavaScript代码中异步调用AJAX与服务器通信，这样不需要刷新整个页面就能更新网页

的局部内容。网上有很多JavaScript库提供就地编辑器。

说明

就地编辑器为用户提供了简便的方式对网页部分内容进行编辑，不需要跳转到另外的编辑页面进行内容编辑。用户直接点击并编辑网页上的内容，编辑完之后也不用重新加载网页内容。

 

原文地址：http://ui-patterns.com/patterns/InplaceEditor

PS：才发现网页博客中显示博客名称的地方也是用的本模式。

[1]原文：Let users edit values in the same place as they are displayed.

[2]原文：a page title element will display editing controls when the user hovers their mouse over it. ，个人理解应该是鼠标移动到某个网页元素时，在这个网页元素的位置出现编辑控件的形状或者类似的东西，提示用户可以编辑。