37

ユーザーがドキュメント テンプレートを編集できるブラウザ ベースの WYSIWYG エディタがあります。

ドキュメント テンプレートは、いくつかの特別な「マージ コード プレースホルダー」を持つ通常の html です。このようなテンプレートは、これらのプレースホルダーを DB からのデータで置き換えることによって「インスタンス化」されます。これにより、最終ドキュメント (テンプレートのインスタンス) が得られます。

私の現在のアプローチは次のようになります。

<div contenteditable>
  Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>

(遊ぶためのオンラインサンプル: http://jsfiddle.net/tFBKN/ )

そのような場合、入力は編集できず、固体ブロックとして動作します-まさに私が必要とするものです。ユーザーは、他の文字と同じように DEL または BACKSPACE をクリックすることで、このようなマージ コードを削除できます。このような input.mergecode に適切な CSS を使用することで、必要なルック アンド フィールを実現できます。

しかし、このようなアプローチでは、3 つの異なる UA に 3 つの異なる問題があります。

  • IE - CSS{ font:inherit }は単純に機能しないため、入力が<b>ここのように内部にある場合、<b><input value="test"></b>フォント スタイルは継承されません。
  • FF -<input>要素を含むフラグメントのコピーは、その入力をクリップボードのコンテンツから削除するため、さらに貼り付け操作を行うと、すべてが挿入されますが、入力は挿入されません。
  • <input>GC -奇妙な結果が生成された直後に {BACKSPACE} をクリックします (バグ)

そのため、編集不可能なインライン ブロックを HTML の「島」のように表現する方法について、他のアイデアを探しています。

私がこれまでに試した他のアプローチ：

  • <span contenteditable="false">MergeCode1</span>- ほとんどの UA がそのようなノードを選択から削除するため、機能しません。<b>そのため、たとえば、そのようなスパンを含む選択の上または<i>上に適用することはできません。

他のアイデアはありますか？

4

6 に答える 6

15

有望に見えるもう1つのアイデア：

空のスパンを使用すると::before { content:"caption"; }、内部にキャレット位置がないノードとして DOM で表される編集不可能なブロックが生成されます。

ここで試すことができますhttp://jsfiddle.net/TwVzt/1/

しかし、このアプローチには問題がないわけではありません (私の場合): style::before DOM 属性を使用してインラインを宣言する方法がないため、セット全体を CSS で事前に宣言する必要があります。しかし、私が持っているマージコードのセットはかなり大きく、一部のユースケースでは事前に完全に知られていません. はぁ。

それにもかかわらず、誰かがより良い状況（既知のコードセット）を持っている場合は、このレシピをここに置いてください。

于 2013-02-02T03:04:06.363 に答える
2

以下の解決策 -- 小さな注意点があります。しかし、最初に - あなたたちは素晴らしいです!
私は JS や HTML の専門家ではありませんが、jsfiddle.net についても知りませんでした。あなたのコメントと他のオンライン検索を読んで、jsfiddleでいくつかのテストを行った結果、次のコードが機能しました。

<pre><code>
<div contenteditable="false" class="editor" readonly="true" UNSELECTABLE="ON">
    Sample template with <span class="mergecode test1" />.
    <span contenteditable> editable </span>
    <font color=red><span UNSELECTABLE="ON" contenteditable="false" readonly="true"
     UNSELECTABLE="ON">  uneditable1 </span></font>
    <span contenteditable> editable2 </span>
    <font color=red><span contenteditable=false readonly="true" UNSELECTABLE="ON"> uneditable3</span></font>  
    <span contenteditable> editable4 </span>
    <span contenteditable="false" readonly="true" UNSELECTABLE="ON"> uneditable5 </span>
< /div>
</code></pre>

これをクロムのjsfiddleに入れると、クロムで動作することがわかります（IEとFFでも少し異なります）が、小さな警告があるようです。

注意点は、キー バインドが Backspace で行うことです! 私の場合、編集不可能なフレーズを選択してクロムでバックスペースを押すと、更新されるか、「最後のページに移動」するようです! 最初の 2 つの undeditble を赤にしました (最後の黒を残しました)。これにより、何が起こるかがわかります。Chrome と FF と IE の jsfiddle でテストします。バックスペースの問題を与えるか取るか、すべてが適切に動作したようです。

そして、これがそれがどのように機能するかのロジックだと思います。 最初の Div は最上位の親であり、contenteditable="false" です。したがって、その下にあるものはすべて編集できないはずです。span contenteditble="true" を持つその中の子を除いて、それらは編集可能になります。したがって、親から継承しますが、子として上書きできます。

どこかで読んだので、タグ readonly="true" UNSELECTABLE="ON" も付けました。さらにテストが必要でした!!! 注: Font をスパンの外に取らなければなりませんでした。そうしないと、機能しません。しかし、IEでは完全に機能しました。uneditables は私が指示した色であり、1 回、2 回、または 3 回クリックしても、jsfiddle で uneditbles が選択されることはありません!!! :-) Chrome の場合、シングル クリックでは何もしませんでした。前のページに行くようでした。FFでは、物事は少しクレイジーでした! 編集不可とその前の編集可能をダブルクリックして選択してください！理由はわかりません。

誰かが Chrome と FF の問題を理解して書き込めれば、それは素晴らしいことです。Chrome や FF でも動作しないようにするには、ダブルクリックまたは任意の数の高速クリックが必要です。繰り返しますが、スパンを強調したいと思います... uneditablesとフォントの隣にある必要があるようです...スパンの外にあります。

これがすべて理にかなっていることを願っています。

于 2014-09-25T23:28:07.480 に答える
-3

IEの場合、これを試してください：

<span contenteditable="true">Uneditable</span>

contenteditable 属性の逆の値に注意してください! すべての常識に反しますが、少なくとも IE8 と IE9 では機能します。この編集不可の要素は、移動してコピー/貼り付けできます。ただし、完璧にはほど遠いです。たとえば、編集不可能な要素を含む領域を太字にすると、編集不可能な要素のコンテンツにも感染します。そのため、要素の健全性を維持するために、おそらくスクリプトを使用する必要があります。また、 contenteditable="true" を設定すると、編集不可能な要素がサイズ変更ハンドルで装飾されます。unselectable="on" を設定することでそれらを再びオフにすることができますが、これによりオブジェクトがドラッグされなくなります。繰り返しになりますが、おそらく幅と高さを復元するスクリプトに頼る必要があります。

于 2013-01-31T18:32:29.420 に答える