私は単純な contenteditable ベースの HTML エディターを作成しています。これは、ユーザーが独自の CSS (ライブ編集可能) でスタイル設定されたページを編集し、新しいタグの挿入、クラスの適用などの基本的なことも実行できるエディターです。
私が欲しい機能の 1 つは、Dreamweaver、Expression Web、その他多くの WYSIWYG HTML エディターで通常見られるように、div の周りの点線の境界線の表示を切り替えるオプションです。(これにより、目に見える境界線がない場合でも、ユーザーは div を見ることができます。)
これを行う方法はありますか？いくつかのアイデア:
実際の/既存の div で CSS を単純に変更することはできません。それらには独自の境界線が既に定義されている可能性があるため、ドットで消去しないでください。理想的には、既存の境界線の周りに境界線を表示できます。これは、前述の商用エディターでの表示方法です。既存の境界線がない要素に実際に境界線を設定することに戻ったとしても、境界線がない要素を特定するのは難しい場合があります。
:hover計算されたスタイルを動的に変更するようなものに直面して。これらの div を新しい div 内にラップすると、点線の境界線が表示されます。トリッキーな部分は、CSS の処理です。
ラッパーは、その子と同様にスタイル設定する必要があります。たとえば、div には(大まかに)
width: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; }しかし、理論的には可能だとしても、心配するケースは山ほどあり、かなり毛むくじゃらです。
最後に、点線の境界線でもマージンを折りたたむ方法があるかもしれませんが、私は知りません。
もう1つのアイデアは、境界線を上に重ねることです（基本要素の寸法/オフセットに基づいてJSで絶対に配置されます）が、これは特定のz-indexを持つ要素が重なっていると見苦しく、すべての要素を監視する必要がありますスタイルチェンジに。ただし、明示的に指定されたスタイルの変更を監視するだけでは十分ではありません。オフセットや寸法の変更にも対応する必要があるためです (たとえば、ユーザーがテキストを入力すると、その下のすべての要素が押し下げられる可能性があるため、オーバーレイを更新することで対応します)。
関連する質問はページのアウトラインを見ることですが、これはアウトラインを見たいユーザーの観点からのものです.Webベースのエディター実装の観点から、これらのアウトラインを提供する方法を尋ねています.
ヒントをお寄せいただきありがとうございます。