順番 編集不可能な島でコンテンツ編集可能なHTML




titleタグ 位置 (4)

以下の解決策 - 小さな注意点があります。 しかし、まず、あなたたちは素晴らしいです!
私は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に入れると、chrome(とIEとFFでは少し違いますが)で動作することがわかりますが、小さな警告があるようです。

あなたのキーバインディングはBackspaceで何をしているのですか? 私の場合、編集不可能なフレーズを選択してクロムのバックスペースを押すと、それがリフレッシュされるように見えるか、または「最後のページに移動する」ようになります。 私は何が起こるか見ることができるように、最初の2つのundeditblesを赤(最後の黒を残した)にしました。 私はChromeとFFとIEのjsfiddleでテストします。 すべてが適切に行動したか、バックスペースの問題を抱えているか、または取っているようです。

そして、私はここでそれがどのように動作するのかという論理があると思います。 最初のDivはトップレベルの親で、contenteditable = "false"です。 だから、その下のすべてが編集不可能でなければならない。 contenteditble = "true"のスパンを持つ子を除いて、それらは編集可能になります。 あなたは親から継承しますが、子として上書きすることができます。

私はまた、タグをreadonly = "true" UNSELECTABLE = "ON"と置いています。なぜなら、私はそれらについていくつかの場所を読んでいるからです。 そして、より多くのテストが必要でした! 注記スパン以外のフォントを取らなければならない、そうでないと機能しません。 しかし、IEでは完全に機能しました。 編集不可能なのは私が彼らに言われたどんな色であっても、シングル、ドゥルー、トリプルのクリックはjsfiddleのuneditblesを選択しませんでした! :-) Chromeのシングルクリックでは何もしなかったので、ダブルクリックで編集不可能なものを選択し、バックスペースで少しナットした! それは前のページに行くと思われました。 FFのものは少し狂ったものでした! ダブルクリックして編集不可能なものと編集可能なものを選択してください! 理由は分かりません。

誰かがChromeとFFの問題を把握して書くことができれば、それは素晴らしいことです。 クロムやFFでもダブルクリックやいくつかの速いクリックが機能しないのは良いことです。 再び私はスパンを強調したいと思っています...スパンの外側の編集不可能なフォントとフォントの隣になければならないようです。

これがすべて意味をなさないことを望みます。

私は、ブラウザベースのWYSIWYGエディタを使用して、ユーザーがドキュメントテンプレートを編集できるようにしています。

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

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

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

(プレイするオンラインサンプル: http://jsfiddle.net/tFBKN/ : http://jsfiddle.net/tFBKN/

そのような場合、入力は編集できません。そして、私が必要としているように、実線のブロックとして動作します。 ユーザーはDELやBACKSPACEを他の文字と同様にクリックすることでマージコードを削除することができます。このようなinput.mergecodeに適切なCSSを設定することで、私は欲しいlook-n-feelを達成することができます。

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

  • IE - CSS { font:inherit }はここでは動作しませんので、入力が<b><input value="test"></b>ような<b>内部にある場合は、フォントスタイルを継承しません。
  • FF - <input>要素を含むフラグメントをコピーすると、クリップボードの内容からその入力が削除され、それ以降のペースト操作では入力がすべてではなく挿入されます。
  • GC - <input>が奇妙な結果を出す直後に{BACKSPACE}をクリックする( bug

だから私は、HTMLで編集不可能なインラインブロックの "島"を表現する方法の他のアイデアを探している。

これまでに試した他のアプローチ:

  • <span contenteditable="false">MergeCode1</span> - UAの大部分が選択からそのようなノードを削除するので、動作しません。 したがって、そのようなスパンを含む選択の上に<b>または<i>を適用することはできません。

他のアイデア?


私はCKEditor開発者です。 私たちはネストされた読み取り専用要素( placeholderプラグインや、現在#9764作業中の機能)に関するいくつかの経験があり、良いニュースはありません。 一貫したルック&フィールを実現するには、すべての動作を手動で処理する必要があります。 ブラウザを修正するトリックはありません。 そして、多くのこと(GC上の入力の周りで起こっている奇妙な事柄のこのような)は解決できないようです。


IEの場合は、これを試してみてください:

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

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


私はその古いスレッドを知っている、私は同様の問題で出会った。 編集可能なdivで編集可能でないスパンはほとんど必要ありませんでした。 HACK-AROUNDのような実装を終えた...

$('#testDiv').on('keydown', function(e) { 
    var targetNode = getSelectionStart();
    if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN')    
    {
      var nodeHtmlString = targetNode.outerHTML;

      if(~nodeHtmlString.indexOf("nonEditable"))
      {
        e.preventDefault();
        e.stopPropagation();
      }
    }
});

function getSelectionStart() {
 var node = document.getSelection().anchorNode;
 return (node.nodeType == 3 ? node.parentNode : node);
}

https://jsfiddle.net/fxmb3nL6/20/完全なフィドル







contenteditable