0

我正在编写一个简单的基于 contenteditable 的 HTML 编辑器，它允许用户编辑一个由他们自己的 CSS 设置样式的页面（他们可以实时编辑），还可以做一些基本的事情，比如插入新标签、应用类等。

我想要的一个功能是切换 div 周围虚线边框的显示选项，就像您通常在所见即所得 HTML 编辑器（如 Dreamweaver、Expression Web 等）中找到的那样。（这有助于用户看到她的 div，即使它们没有可见的边框。）

有没有办法做到这一点？一些想法：

  1. 我不能简单地修改实际/现有 div 上的 CSS，因为它们可能已经定义了自己的边框，我不应该用点来消除它们。理想情况下，我可以在现有边界周围显示一个边界，这就是前面提到的商业编辑器中的内容。即使我退回到实际在没有现有边界的元素上设置边界，尤其是要弄清楚哪些没有边界可能很困难。:hover面对动态改变计算样式的事情。

  2. 我可以将这些 div 包装在新的 div 中，这些 div 又具有虚线边框。棘手的部分是处理他们的 CSS，例如：

    • 包装器的样式必须与其子级相似，例如，一个 divwidth:50px必须有一个包装器width:50px（大致），所以我要么需要不断轮询（因为没有办法通知间接样式更改，例如在类) 用于更改计算样式（完全不可扩展），或者实现我自己的 CSS 引擎，该引擎运行并确定每次用户实时编辑他们的 CSS 时发生了什么变化。

    • 用我自己的 div 污染 DOM 是侵入性的，并且会干扰以下规则：

      /* these may or may not be divs */
.a > .b > .c { ... }

      或者：

      /* if this is wrapped, then they'll all be :first-child */
.foo:first-child { ... }

      也许：

      /* immediate children of my wrappers would inherit the dotted borders */
.foo { border: inherit; }

      也许有一种方法可以自动稳健地重写这些规则——以最后一个例子为例：

      :not(.my-dotted-border) > .foo { border: inherit; }

      但即使理论上可能，也有很多情况需要担心，而且会很麻烦。

    • 最后，也许有一种方法可以折叠边距，即使是虚线边框，但我不知道。

  3. 另一个想法是在顶部覆盖边框（根据底层元素的尺寸/偏移量绝对使用 JS 定位），但这对于具有特定 z-index 的重叠元素来说很难看，而且我需要再次监视所有元素用于样式更改。除了现在仅仅监视明确指定的样式的变化是不够的，因为我需要对甚至对偏移和尺寸的变化做出反应（例如，如果用户键入一些文本，它可能会按下它下面的所有元素，所以我必须通过更新叠加层对此做出反应）。

一个相关的问题是查看页面大纲，但这是从想要查看大纲的用户的角度来看的 - 我从基于 Web 的编辑器实现的角度询问如何提供这些大纲。

提前感谢您的任何提示。

4

1 回答 1

1

您可以使用outline和outline-offsetCSS 属性来设置可编辑 div 的轮廓样式，因为它们不会覆盖任何现有的边框（但是，它们会覆盖任何现有的轮廓，如果有的话）。

查看此示例以了解如何实现它：http: //jsfiddle.net/EFJ6B/

于 2012-09-25T08:51:44.120 回答