0

私の現在のプロジェクトでは、良くも悪くも mshtml を使用して実装され、contentEditable を true に設定するドキュメント エディターを使用しています。このセットアップを別のものに置き換えることは確かに検討していますが、当面はそれがオプションではないと仮定します.

重要な場合は、VS 2008 (.Net 3.5) と C# を使用してこれを行っています。

document = (HtmlDocument)this.editorWebBrowser.Document;
body = (HtmlBody)document.body;
body.contentEditable = true;

構造的な編集のほとんどを UI の背後に隠したいのですが、ユーザーが好きなようにテキストを編集できるようにします。いくつかのスタイルのいずれかで div を追加すると、問題が発生します。

(ボディ タグを追加して、プログラムで行っていることをシミュレートするため、IE でテストできますが、C#/.Net/VS で作業していることを思い出してください。)

<BODY contentEditable="true">
  <DIV class="intro" style="border: 1px solid blue; width=100%;">
    <P>My Intro</P>
  </DIV>
  <P>Other Text</P>
</BODY>

これには 2 つの問題があります。

  1. ユーザーが最初にクリックすると、 div が選択されます。クリックするとすぐにテキストが表示され、ユーザーにサイズ変更ハンドルが表示されないようにしたいと考えています。
  2. ユーザーがカーソルを [その他のテキスト] に置いてから、キーボードを使用して div テキストに移動しようとすると、移動が妨げられます。div の外を移動している場合、div は 1 文字として扱われます。

事実上、div を単なる背景の装飾のように動作させる方法はありますが、その周りのすべてを編集可能にする方法はありますか? この html は完全に内部的なものなので、好きなことを何でもできます。したがって、div自体は重要ではありません。重要なのは、次のことです。

  • 複数の P またはその他のタグを含む
  • 含まれているすべての P またはその他のタグが 1 つのグループの一部であることをユーザーに視覚的に示します。これは、現在の div の境界線や背景色などのスタイル設定が現在達成されているためです。

このSOの質問は、現在のセットアップでは私が望むことができないのではないかと心配していますが、同様の問題に遭遇した他の人を助けるようお願いします. すぐに思いついた不完全な解決策をいくつか追加します。

可能かどうかにかかわらず、ご意見をお寄せいただきありがとうございます。

4

2 に答える 2

0

部分的な解決策: 次のように、含まれている div を contentEditable=false に設定してから、内側の要素で再度 true に設定します。

<BODY contentEditable="true">
  <DIV class="intro" contentEditable="false" style="border: 1px solid blue; width=100%;">
    <P contentEditable="true">My Intro</P>
  </DIV>
  <P>Other Text</P>
</BODY>

これにより、問題 1 (ユーザーが div を選択) が解決される可能性がありますが、問題 2 については何もしません。

于 2010-02-12T19:05:00.680 に答える
-1

HTML は内部的なものであり、他のものとうまく連携する必要がないため、div ではなくテーブルで領域を表します。

<table class="intro">
  <tbody>
    <tr>
      <td>
        Intro
      </td>
    </tr>
  </tbody>
</table>

これにより、両方の問題が解決されますが、編集または解析のコードが大幅に複雑になります。よりクリーンなソリューションを希望します。

于 2010-02-12T19:09:19.567 に答える