在CONTENTEDITABLE元素，將光標移動HTML標籤之間

http://jsfiddle.net/Y7tgx/2/在CONTENTEDITABLE元素，將光標移動HTML標籤之間

火狐處理比Chrome，但是這更好的，但也正是這樣想。他們都將所有相鄰的HTML標籤集中在一起，並將它們視爲一個（我不想要）。

Firefox：當光標位於標籤（或相鄰標籤組）的左側時，您按右鍵，光標跳過標籤前的第一個字符。然後，如果您按左鍵，則會出現在字符和標籤之間。（與左右按壓相同）

Chrome：標記和它後面的第一個字符混在一起。將光標放置在標籤和以下字符之間是不可能的。

希望：標籤被視爲相對於光標的單個字符。如果光標位於標籤的左側，並且您向右按，則應該位於標籤的右側，反之亦然。

如何在瀏覽器上執行期望的行爲？

這不適用於WYSIWIG編輯器。爲了達到特定目的，標籤在生產中可視化地呈現，就像它們在jsfiddle中一樣。用戶希望對包含光標的元素進行任意控制。

b:before, b:after, 
i:before, i:after, 
p:before, p:after { 
    color: blue; 
} 

b:before { 
    content: '<b>'; 
} 

b:after { 
    content: '</b>'; 
} 

p:before { 
    content: '<p>'; 
} 

p:after { 
    content: '</p>'; 
} 

i:before { 
    content: '<i>'; 
} 

i:after { 
    content: '</i>'; 
} 

---------- 

<p contenteditable='true'>regular regular<b>bold</b>regular - 
try moving the cursor to either side of either blue tag.</p> 
<p contenteditable='true'>try it in this: regular<b><i>bolditalic</i></b></p>

來源

2012-09-22 Jordan

如果jsFiddle鏈接有一天停止工作，那麼在問題中加入相關的代碼會很有幫助 –

您想要的行爲是反制，直觀的，典型的用戶期望方向鍵通過他們看到的角色導航脫字符，而不考慮造型。右箭頭鍵應該移動插入符號在下面兩種情況下都是2 t用管道字符表示）：「1 | 2「和」1 |「 ** 2 **「 –

我的界面使用CSS顯示標籤的可視化表示：before和after之後，它更直觀地讓光標在標籤之上停下來，它不是一個所見即所得編輯器;它是一個視覺增強的語義編輯器標記，用戶需要任意控制光標指向哪個元素 – Jordan

修改代碼，以確保字符不會跳過將是一個合理的修正，但能夠鄰近標籤或編輯標籤之間進行導航都會反對的瀏覽器是如何處理的標記（治療無形的標籤，文本內容）。標籤的可視化表示應該以文本內容的形式完成，而且任何更加神奇的解決方案都很可能不得不依賴於某種程度上的內容（因此完全可以做得更清楚）。一個相當簡單的方法是使用<span class="tag"><b></span>之類的東西，然後添加附加到*[contenteditable='true'] span.tag的JavaScript來控制光標作爲單個單元在該跨度上移動。

使用服務器端代碼可能最好使用服務器端代碼進行轉換，否則在JavaScript中使用基本自檢將允許替換或補充代碼（替換會使編輯變得更容易，但只需添加其他跨度如果元素結構是固定的，並且只有文本內容正在被編輯，那麼它的侵入性會小一些

來源

2012-10-06 13:40:59

在CONTENTEDITABLE元素，將光標移動HTML標籤之間

回答

相關問題