在contenteditable =“true”div中鎖定元素

Question

我有一個用於用戶輸入的contenteditable div，當點擊一個按鈕時，它顯示替換某些單詞的選項。 首先，它剝離所有html並創建可以替換單詞的span元素。 這些詞的標記是不同的，我面臨一些問題。

在跨度之前或之后直接單擊並鍵入文本時，文本將具有與跨度相同的標記。 在僅具有跨度的行上添加單詞非常困難。 我想通過填補跨度來解決這個問題  但它看起來有點奇怪。
用戶可以單擊跨度並更改它，我希望用戶單擊跨度並在更改之前選擇替換或忽略選項。 換句話說，它需要被鎖定。 我想通過capturig keyup來做這件事，如果它來自一個跨度然后是e.preventDefault（），但編程它有點痛苦。

所以我的問題是：

是否有一種簡單的方法可以將一個span元素鎖定在一個contenteditable中，不涉及捕獲key和preventDefault（尚未嘗試過，甚至不確定它是否可行）？

當單擊或直接移動光標旁邊的光標並鍵入文本時，它將成為跨度的一部分，有沒有辦法讓它不是跨度的一部分？ 用 填充跨度 可能會工作，但當跨度是該行的第一個單詞時，它看起來很奇怪。 為了說明這一點，我在下面發布了一個示例html文件：

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
</head>
 <body>
   <div contenteditable="true"></div>
   <script type="text/javascript">
    document.getElementsByTagName("div")[0]
      .innerHTML="<span style='color:green'>hello</span>"
   </script>
 </body>
</html>

Answer 1

在可編輯容器內標記范圍contenteditable =“false”。 它會同時解決這兩個問題。

Answer 2

至於contenteditable div中的鎖定元素; 我正在使用需要鎖定的跨度，並且它們不會觸發keydown事件，因此在div上設置事件並檢查范圍是否為鎖定元素。

我正在使用谷歌閉包庫，所以獲得范圍很簡單：

goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div
   [goog.events.EventType.KEYDOWN,
    goog.events.EventType.PASTE],
   function(e){
       if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow
           return;
       }
       var el=goog.dom.Range.createFromWindow()
         .getContainerElement();
       if(el.className.indexOf("locked")!==-1){
           e.preventDefault();
       }
});

我將研究填充鎖定的跨度與＆nbsp; 如果在元素之前或之后不存在空格，並在獲得解決方案后將其發布在此處。

結束填充跨度而不檢查，因為無論如何將在以后刪除額外的空格。 看起來很有趣，但最好不能添加文字。

在contenteditable =“true”div中鎖定元素

問題描述

2 個解決方案

解決方案1
2 2013-09-14 02:45:01

解決方案2
0 已采納 2013-05-14 02:17:58

在contenteditable =“true”div中鎖定元素

問題描述

2 個解決方案

解決方案1 2 2013-09-14 02:45:01

解決方案2 0 已采納 2013-05-14 02:17:58

解決方案1
2 2013-09-14 02:45:01

解決方案2
0 已采納 2013-05-14 02:17:58