Question

我正在构建某种框架，可以使用ContentTools编辑页面内容。 ContentTools的要求是regions must be parents。

如果您尝试这样做：

<h1 data-editable data-name="heading">Content</h1>

它无法工作，因为区域必须包含可编辑的块级元素。解决这个问题的方法就是这样包装标签：

<div data-editable data-name="heading">
    <h1>Content</h1>
</div>

但我只是想让文本可编辑，所以我自动将内部元素包装在div中。这有效，但它会影响样式。

有没有办法让div'透明'，所以它会继承所有样式？我尝试了以下代码。

要明确：在这个例子中我不写h1 css，所以我对使用哪种样式没有影响。

$("[data-editable]").wrapInner("<div class='innerWrap'></div>");

/* example h1 css, could be anything */
body > h1{
  font-size: 40px;
  color: red;
  font-family: sans-serif;
  border: 3px solid green;
  background-color: blue;
  padding: 5px;
}

.innerWrap{
  all: inherit;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 data-editable data-name="heading">Content</h1>

你可以看到一些有用的东西。但是像边界这样的东西会加倍。无论是否使用innerWrap，它都没有区别。

用css可以做到这一点吗？它必须适用于每个css属性。

Answer 1

我认为你需要用一个div而不是div来包装h1。例如。 .wrapInner()会产生类似

的内容

<h1 data-editable="" data-name="heading">
  <div class="innerWrap">Content</div>
</h1>

但你想要的是

<div data-editable data-name="heading">
    <h1>Content</h1>
</div>

因此，请尝试使用.wrap()代替.wrapInner()

$("[data-editable]").wrap("<div class='innerWrap'></div>");

h1{
  font-size: 40px;
  color: red;
  font-family: sans-serif;
  border: 3px solid green;
  background-color: blue;
  padding: 5px;
}

.innerWrap{
  all: inherit;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 data-editable data-name="heading">Content</h1>

Answer 2

.innerWrap{
   all: inherit;  /* remove it*/
}

作为默认行为，如果你没有为＆＃34; .innerWrap＆＃34;指定css道具。它看起来只与父母一样

Answer 3

目前正在开展使单个元素可单独编辑而不是作为集合的一部分（例如在区域中）的功能：https://github.com/GetmeUK/ContentTools/issues/79

然而，您可以尝试使用短期不完美方法，首先更改您的HTML，如下所示：

<h1 data-editable data-name="heading">
    <span data-inline data-ce-tag="h1">Content</span>
</h1>

这会使h1标记为区域，并告诉ContentTools / Edit将内部span元素视为h1（文本）元素（感谢data-ce-tag ）。

但接下来的问题是，如果用户点击了返回，您最终会在h1内找到一个新的段落标记 - 这是我们不想要的。这是data-inline属性的来源，我们需要监听mount事件，如果挂载的元素具有data-inline属性，我们将修改它的行为，因此它不能做某些可能产生的事情不良事件：

ContentEdit.Root.get().bind('mount', function(elem) {
    // We're only interested in elements that are marked as inline
    if (elem.attr('data-inline') === undefined) {
        return;
    }

    // Change the default behaviour of the element
    elem.can('drag', false);
    elem.can('drop', false);
    elem.can('remove', false);
    elem.can('spawn', false);
});

您可以找到有关修改行为here及其当前限制here的更多信息。

是否可以设置html元素的样式，以便它不会“伤害”内部样式

3 个答案: