向文本/链接添加编辑功能的最佳方法是什么？

Question

我的网站上有一堆文字（链接和原始文字），我希望版主和管理员能够编辑。我不知何故需要添加编辑相关文本的可能性。

我的第一个想法是在每个可以编辑的部分旁边添加一个编辑链接，但看起来不对。对于添加到页面的许多“编辑”链接，它看起来很奇怪。

我的第二个想法是为每个可以编辑的链接添加一些键组合。 喜欢;按住Shift键，同时单击给定的文本/链接进行编辑。

我的问题现在是;有没有一种很好的方法可以使用JavaScript将这样的快捷方式添加到网站上的任何文本/链接。

向右键单击菜单添加一个选项将是现场点，但这似乎不可能。

这就是现在的样子：

除Chrome之外的任何其他浏览器都不需要支持该功能。

Answer 1

如何隐藏“编辑”链接并仅在鼠标悬停在相关项目上时显示它？

以下是一个粗略的例子：http://jsfiddle.net/xaU5k/

请注意，如果浏览器没有启用javascript，这应该会优雅地降级，即链接仍然可以访问。

Answer 2

我认为最好的方法是为每个链接创建一个编辑链接，但默认情况下隐藏所有链接并仅在悬停时显示它们。另外，让它们有点透明，这样它们就不会分散注意力。

---

您知道通过订阅点击事件并观看按下了哪个按钮，可以添加右键菜单。然后阻止浏览器触发并在光标下显示div。

Answer 3

以下是webkit

的一个很好的CSS示例

看看这个小提琴here

Answer 4

首先，我建议使用Javascript框架，因为它会使整个过程变得更加简单。我个人使用jQuery，但周围还有其他的，所以如果你不使用它，那么我建议你去研究它。

您需要检测网页上您要编辑的任何链接上的点击事件 - 这可能是任何链接，或者它可能只是某些链接（用类指定） - 所以您需要将click事件处理程序绑定到每个链接。如何执行此操作取决于您是否使用常规Javascript或框架。

如果您选择使用jQuery，它可能看起来像这样：

<script>
$(document).ready(function() {
    $('.edit').click(function(event) {
        if(event.shiftKey) {
            // handle shift-click
                    // will need to call event.preventDefault() to prevent navigating to the href of the link
        }
        else {
            // handle non-shift-click - possibly just do nothing?
        }
    });
});
</script>

将click事件处理程序绑定到任何分配了“edit”类的DOM元素。如果您更详细地研究jQuery选择器，可以根据需要将其限制在更大的深度。