如何防止| Mozilla Firefox瀏覽器（3.6）CONTENTEDITABLE - 應用CSS可編輯容器，而不是它的內容

我有一些頁面是這樣的：如何防止| Mozilla Firefox瀏覽器（3.6）CONTENTEDITABLE - 應用CSS可編輯容器，而不是它的內容

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

我有一個自制的JS編輯器，它實際上發出

document.execCommand(some_command,false,optional_value);

當用戶在編輯器中按下按鈕時。（例如，我有簡單明瞭的[Bold]按鈕）。

只要我將編輯應用到「SomeText」的一部分，一切都很好。例如選擇「文本」與鼠標和按[粗體]按鈕（其導致document.execCommand（「黑體」，FALSE，FALSE））會產生：

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

但是當我選擇的全部內容格在我的編輯器（在這個例子中「SomeText」則會），然後按[粗體]，FF不會產生預期的

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

而是

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

公告的「style」屬性走進了編輯格！

爲什麼這對我有影響？ - 這是因爲編輯完成後，我想將可編輯div的內容以及所有樣式，格式化等進一步用於頁面。但我不能 - 現在所有的造型都在div裏面。一個解決方案，當我會被建議從div中提取樣式是不可接受的 - div在其生命中需要從頁面的其他活動元素（重jQuery使用）很多樣式

因此簡而言之：如何讓FF永遠不觸及可編輯div並將所有樣式應用於其內部內容？

真誠感謝您的光臨。（剛拔掉最後我的頭髮，瀏覽FF開發站點與許多其他一起（（（（）

來源

2010-12-02 Yuriy

有時組織和撰寫我的想法給我帶來了非常積極的成果。

我已經找到了滿意的解決方案。

1）插入隱藏的div的第一個子節點到您編輯的div：

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

2）CSS爲它：

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

3）現在你可以編輯。我用這個小測試測試了它（實際上我需要所有這些東西來編輯標題，新聞主題等短文本）

4）在使用內容之前 - obious - remoe那個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\"]"); 
}

當然 - 測試待定。我想聽聽您的意見;）問候。

來源

2010-12-03 01:08:27 Yuriy

我有類似的問題，選擇所有CONTENTEDITABLE區與鼠標或使用CTRL-A那裏，然後按Ctrl + B例如當，火狐把風格以CONTENTEDITABLE容器而不是它的內容。

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

相同適用於斜體，字體大小，字體家族和其他內聯樣式。我寫了修復該問題的功能。它創建下面的內容和改變選擇的範圍，直到該元素的新元素：

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); 
    } 
};

這個代碼僅影響FF，其他瀏覽器它只是任何其他的execCommand和開關FF之前申請的execCommand

來源

2012-02-04 15:55:40 Dmitri

呼叫一次標籤模式

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

來源

2012-05-17 16:15:12 Plok

如何防止| Mozilla Firefox瀏覽器（3.6）CONTENTEDITABLE - 應用CSS可編輯容器，而不是它的內容

回答

相關問題