|
|
可能看了以上的描述還不太明白什么問題。我們做個(gè)實(shí)驗(yàn)，打開fckeditor切換到源碼模式輸入<div>test test test test test test</div>，再切換回設(shè)計(jì)模式，然后在這句的任意地方輸入個(gè)回車，比如在第3個(gè)test后，你會(huì)發(fā)現(xiàn)源碼內(nèi)得到的是<div>test test test </div><div>test test test</div>，并且如果是<div style="">這形式，自動(dòng)生成的也是這種形式，這樣會(huì)增加許多無用代碼，而且這問題在我所能找到的在線編輯器都有。
為什么一定要使用<br>換行呢？簡(jiǎn)單，而且靈活不像<p>換行空行間距大，需要大空行多輸入幾個(gè)回車就行。而且假如使用自動(dòng)提取文章部分內(nèi)容的話不怕tag沒有閉包(可能'<br>'別切割，但只有很少的內(nèi)容，顯示不正常。而且'<br>'被切割中的概率很低，除非使用連續(xù)多個(gè)<br>，當(dāng)然這也很容易修補(bǔ))。這樣在使用自定義層時(shí)可以使用<p>，好處是不怕被切割而使得tag沒有閉包。這樣可以避免使用<div>。如果使用<div>的話自動(dòng)截取的文章內(nèi)容而使得有個(gè)<div>沒有閉包（如果一個(gè)div內(nèi)的內(nèi)容多，這情況很容易出現(xiàn)），將會(huì)對(duì)整個(gè)頁面效果產(chǎn)生不好的影響。而去除tag，再截取內(nèi)容的話也不是一個(gè)好選擇，比如csdn的blog就是先去除了tag，然后截取文章,這個(gè)效果大家都看到了，肯定不好。當(dāng)然如果要保證tag的完整，比如img，a還有些工作要做，那也會(huì)簡(jiǎn)單得多。記住通過這樣處理后在截取文章內(nèi)容存入數(shù)據(jù)庫(kù)還要對(duì)用戶可能使用源碼編輯的<div>標(biāo)簽替換為<p>標(biāo)簽。
到底如何能得到<div>test test test <br>test test test</div>呢？
呵呵，問題的解決其實(shí)也很簡(jiǎn)單。那就是屏蔽瀏覽器的默認(rèn)動(dòng)作，而不是return false（網(wǎng)上搜得到這種方式，但這只能解決ie下的問題）。
使用onkeydown事件綁定函數(shù)(兼容ie,firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// 此處使用插入字符函數(shù)加上<br>（當(dāng)然也可以是其他）比如document.execCommand(cmd, false, '<br>');
// 注意ie不支持這個(gè)command
// 由于實(shí)現(xiàn)可能是iframe或div代碼有所不同，看您的具體情況(要兼容ie,firefox這里也一定需要兼容)
// 在網(wǎng)上也能搜索到代碼就不多說了
if(e.preventDefault) e.preventDefault(); // 禁止瀏覽器默認(rèn)動(dòng)作（這里是關(guān)鍵）
else e.returnValue = false;
}
}
這樣就可以得到<div>test test test <br>test test test</div>。
JavaScript技術(shù)：在線編輯器中換行與內(nèi)容自動(dòng)提取，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
