防止する方法| - Mozilla Firefoxの（3.6）のcontentEditableが、私はこのようなもので、いくつかのページを持っている編集可能なコンテナの代わりに、それの内容

Question

にCSSを適用します。

<div id="editor" contenteditable="true">SomeText</div> 

私は実際に

document.execCommand(some_command,false,optional_value); 

を発行自作JSエディタを持っています

ユーザがエディタ内のボタンを押したとき。 （例えば私は平易でシンプルな[Bold]ボタンを持っています）。

「SomeText」の一部に編集を適用する限り、問題はありません。例えば、マウスで「テキスト」を選択し、[太字]ボタン（）（、「太字」偽、偽document.execCommandにつながる;）を押すと生成されます。

<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div> 

が、私は、全体の内容を選択すると、私のエディタでのdiv（この例では「SomeText」）を選び、[太字]、FFは、「スタイル」属性が編集可能なのdivに入った期待

<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div> 

ではなく、むしろ

<div id="editor" contenteditable="true" style="some-css-here">SomeText</div> 

お知らせを生成しません。 ！

なぜこれが私と違うのですか？ - 編集が完了した後、編集可能なdivのコンテンツをすべてのスタイルと共に作成し、formatingなどしてさらにページ上で使用したいからです。しかし、私はできません - すべてのスタイリングは今divの中に座っています。私はDIVからスタイルを抽出することが賢明でしょう 解決策は受け入れられない - その寿命中のdivがページの他の能動素子（重jQueryの使用方法）簡単でとても

からのスタイルの多くを取ります。 編集可能なdivに決して触れないようにFFに指示し、すべてのスタイリングを内部コンテンツにのみ適用する方法を教えてください。

お世話になりました。 （ちょうど（（（（）

Answer 1

時には自分の考えを整理して書いて多くの人と一緒にFF devのサイトを閲覧し、私の髪の最後引っ張ることは私には非常に肯定的な結果をもたらします。

私は満足のいく解決策を発見した。

1）あなたの編集のdivに最初の子ノードとして隠されたdiv要素を挿入します。そのためのCSS

<div id="editor" contenteditable="true"> 
    <div class="edit_text_mozilla_hack"></div> 
    SomeText 
</div> 

2）：

.edit_text_mozilla_hack { 
    display: block; 
    width: 0; 
    height: 0; 
    -moz-user-edit: none; 
    -moz-user-select: none 
} 

3）編集できるようになりました。私はこの小さなテストでテストしました（実際には、キャプション、ニュースの主題のようなテキストの短い部分を編集するために、このすべてのものが必要です）4）コンテンツを使用する前にdiv。 5）編集に戻る場合は、もう一度挿入します。

作業中のコードの一部（最終的に！））））プロジェクト：

//adds hidden div to all editable regions 'editables' 
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions 
function editAddMozillaHack(editables) { 
    if (!editables) { 
     editables = editGetEditables(); 
    } 
    $("." + adminOptions["admin_loader"]).remove(); 
    editables.each(function() { 
     $(this).prepend('<div class="edit_text_mozilla_hack"></div>') 
    }); 
} 

//removes the hack from all regions 
function editRemoveMozillaHack() { 
    $(".edit_text_mozilla_hack").remove(); 
} 

//just returns all the editable regions -- my project often requires them all 
function editGetEditables() { 
    return $("[contenteditable=\"true\"]"); 
} 

もちろん試験中です。 私はあなたからお聞きしたいです;） はお待ちしております。

Answer 2

私は同様の問題を抱えていました。マウスでコンテンツ編集可能な領域をすべて選択するかCTRL-Aを押してからCTRL + Bを押すと、Firefoxはcontenteditableコンテナにスタイルを追加します。

<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div> 

斜体、フォントサイズ、フォントファミリなどのインラインスタイルにも同じように適用されます。 私はその問題を修正する関数を書いた。 、このコードは唯一のFFに影響

function checkSelectAll (container, cmd, args) { 
    if(document.getSelection) { 
     var  cn = container.childNodes, 
      s = document.getSelection(), 
      r = s.getRangeAt(0); 

     if(r.startContainer == container && r.endContainer == container){ 
      var endMarker = document.createElement('SPAN') 
      container.appendChild(endMarker); 
      r.setEndBefore(endMarker); 
      s.removeAllRanges(); 
      s.addRange(r); 
      document.execCommand(cmd,false,args); 
      container.removeChild(endMarker); 

     } else { 
      document.execCommand(cmd,false,args); 
     } 
    } else { 
     document.execCommand(cmd,false,args); 
    } 
}; 

他のブラウザのために、それは他のexecCommand前に一度execCommand

Answer 3

コールを適用するとにFFを切り替える：それは、その要素までの範囲を選択したコンテンツや変更の下に新しい要素を作成しますタグモード

document.execCommand('StyleWithCSS', false, false);