内部要素を傷つけないようにhtml要素をスタイルすることは可能ですか？

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>

あなたには、いくつかの物事が働く見ることができるように。しかし、国境のようなものは倍増するでしょう。 インナーラップの有無に違いはありません。

cssでこれを行うことはできますか？それはすべてのCSSプロパティで動作する必要があります。

Answer 1

私はあなたがh1でdivでないdivでラップする必要があると思います。例えば、 。 .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

で試してみてくださいされますデフォルトの動作として、3210

、「.innerWrapは」それは親と同じになりますため、あなたが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にタグを付け、内部span要素をh1（テキスト）要素（data-ce-tagのおかげ）として扱うようにContentTools/Editに指示します。

しかし、次の問題は、ユーザーがヒットした場合は、h1の新しい段落タグで終わることです。 data-inline属性が入ってくる場所です、我々はマウント・イベントをリッスンする必要があると要素がマウントされている場合は、それが望ましくない事象が生じる可能性があります特定の物事を行うことはできませんので、我々はその動作を変更するだろう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を参照してください。