如何创建上下文中的编辑？

Question

我的公司正在建设一个CMS。作为一名前端web开发人员，我被要求构建一个“上下文编辑”功能。

你可以在这里看到一个例子http://www.concrete5.org/documentation/general-topics/in-context-editing/

我想知道我们应该了解什么样的程序来构建它？这能否仅通过JavaScript或一些前端工具来实现，或者是否需要一些服务器端语言？

谢谢。

Answer 1

对于单行编辑，这里有一个简单的方法来启用内联编辑，只需使用CSS (以及用于IE7的少量JavaScript )。在编辑模式页中，使用文本框在编辑模式或视图模式下显示文本。

下面是css，它可以让表单字段看起来像纯文本，直到它悬停或聚焦：

.inContextEdit
{
    border: solid 1px transparent;
    margin: -2px -3px;
    padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
    border-color: #ccc;
}

然后，IE7的一些JavaScript：

function focusInput(el)
{
    el.className += " focus";
}
function blurInput(el)
{
    el.className = el.className.replace(/ *focus\b/g, "");
}

下面是您将使用的标记：

<input name="PageTitleInput"
      value="Page title"
      class="inContextEdit"
    onfocus="focusInput(this);"
     onblur="blurInput(this);" />

这个技巧适用于<textarea>而不是<input>，但是您最好为多行文本找到一个现有控件。css可能很棘手，而且在视图模式下隐藏滚动条也会很困难。有几个现有的控件具有富文本功能。

Answer 2

将需要前端和后端工具。

我假设你说的是一个就地编辑器..jquery有相当多的插件。

如果需要富文本编辑器，可以试试TinyMCE。我用过它，也很喜欢它。