HTML5內容列表後的可編輯段落

我使用Google Chrome。HTML5內容列表後的可編輯段落

我需要一個非常小的HTML編輯器，我發現Simple Edit。非常小的編輯器，只是爲了我的需要。然而......這個和其他許多使用Content Editable的編輯都有一個共同的問題。

問題

創建列表後（打最後一個列表項中輸入兩次），它會創建一個新的div。預計我會創建一個新的段落標籤。

鏈接

嘗試在這裏編輯：http://files.inlovewithcss.com/simple-edit/
看那小小的代碼：https://github.com/mlabod/simple-edit/blob/master/editor.jquery.js

問題

什麼是防止div的正確方法，而是在列表後添加段落標籤？

來源

2012-10-19 Jens Törnell

這將張貼您知道的一個問題。如果你用段落標籤而不是div來替換你的容器元素，那麼連續的列表將是段落的子元素，這是無效的html。 –

Bryan Allo發佈的答案沒有考慮到您需要將光標放在div的末尾。否則，在每次替換操作時，用戶將不得不按下CTRL-End。

這是我提出的解決方案，同時在行動，在http://jsfiddle.net/82dS6/可以看出：

function setEndOfContenteditable(contentEditableElement){ 
    // Taken from http://stackoverflow.com/a/3866442/1601088 
    var range,selection; 
    if(document.createRange){//Firefox, Chrome, Opera, Safari, IE 9+ 
     range = document.createRange(); 
     range.selectNodeContents(contentEditableElement); 
     range.collapse(false); 
     selection = window.getSelection(); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
    else if(document.selection){//IE 8 and lower 
     range = document.body.createTextRange(); 
     range.moveToElementText(contentEditableElement); 
     range.collapse(false); 
     range.select(); 
    } 
} 

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('.textarea').bind('keyup', function(){ 
    replaceDivWithP(this); 
    setEndOfContenteditable(this); 
});

來源

2012-10-27 20:52:44 maurits

這個解決方案是迄今爲止最好的解決方案。投票到目前爲止。但是，當我單擊列表圖標時，它會在列表中添加列表。 –

似乎沒有簡單的方法解決這個問題，因爲你正在使用的庫使用ExecCommand來替換不容易掛鉤的內容。 – maurits

一個快速解決方案是簡單地用Ps代替任何DIV。將其置於您的內容可編輯DIV中。

onkeyup="this.innerHTML=this.innerHTML.replace('div','p')"

希望它有幫助。祝你好運。

來源

2012-10-19 19:35:28

如果您想具體說明並避免與有效內容發生潛在衝突，則可以替換實際的標籤。不要忘記替換結束標籤。 :-) –

相反的處理上即時與每一個keyup事件，你可以考慮後期處理：

$('.textarea').bind('blur', function(){ 
    $('.textarea div').contents().unwrap().wrap('<p/>'); 
});

小提琴：http://jsfiddle.net/thNUS/4/

來源

2012-10-29 19:45:29 user916011

我能想出是使用formatblock which has compatibility issues最好的。基本上，你可以添加另一個鏈接，像這樣：

textcontainer.prepend("<button class='paragraph'>p</button>");

...

$(".paragraph").live("click", function(){ 
    document.execCommand('formatblock', false, "p"); 
});

這給你的用戶插入一個段落標記選項。走出標籤雖然有點棘手，所以它也有一些可用性問題。您可以在提供的演示用它玩：

演示：http://jsbin.com/ovexiz/1
來源：http://jsbin.com/ovexiz/1/edit

*注意，段落與綠色文本樣式。

來源

2012-10-29 20:41:34

以前的答案提出了一個基於keyup或blur的解決方案。這一次使用click事件列表按鈕，以儘量減少函數的調用量：

http://jsfiddle.net/9ZAL7/：

function replaceDivWithP(el){ 

    $(el).find('div').each(function(){ 
     $(this).replaceWith($('<p>' + $(this).html() + '</p>')); 
    }); 
} 

$(function(){ 
    $(".text").simpleEdit(); 
}); 

$('button.list').bind('click', function(){ 
    replaceDivWithP($('.textarea')); 
});

來源

2012-10-29 22:01:33 maurits

HTML5內容列表後的可編輯段落

回答

相關問題