在線編輯器中換行與內容自動提取
2019-11-21 01:24:06
供稿：網友
有的是使用“return false”解決了ie的插入<br>問題,但是firefox并沒有解決。而且這個問題連fckeditor都沒解決。呵呵,不知是否有意為之。
可能看了以上的描述還不太明白什么問題。我們做個實驗，打開fckeditor切換到源碼模式輸入<div>test test test test test test</div>，再切換回設計模式，然后在這句的任意地方輸入個回車，比如在第3個test后，你會發現源碼內得到的是<div>test test test </div><div>test test test</div>，并且如果是<div style="">這形式，自動生成的也是這種形式，這樣會增加許多無用代碼，而且這問題在我所能找到的在線編輯器都有。
為什么一定要使用<br>換行呢？簡單，而且靈活不像<p>換行空行間距大，需要大空行多輸入幾個回車就行。而且假如使用自動提取文章部分內容的話不怕tag沒有閉包(可能'<br>'別切割，但只有很少的內容，顯示不正常。而且'<br>'被切割中的概率很低，除非使用連續多個<br>，當然這也很容易修補)。這樣在使用自定義層時可以使用<p>，好處是不怕被切割而使得tag沒有閉包。這樣可以避免使用<div>。如果使用<div>的話自動截取的文章內容而使得有個<div>沒有閉包（如果一個div內的內容多，這情況很容易出現），將會對整個頁面效果產生不好的影響。而去除tag，再截取內容的話也不是一個好選擇，比如csdn的blog就是先去除了tag，然后截取文章,這個效果大家都看到了，肯定不好。當然如果要保證tag的完整，比如img，a還有些工作要做，那也會簡單得多。記住通過這樣處理后在截取文章內容存入數據庫還要對用戶可能使用源碼編輯的<div>標簽替換為<p>標簽。
到底如何能得到<div>test test test <br>test test test</div>呢？
呵呵，問題的解決其實也很簡單。那就是屏蔽瀏覽器的默認動作，而不是return false（網上搜得到這種方式，但這只能解決ie下的問題）。
使用onkeydown事件綁定函數(兼容ie,firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// 此處使用插入字符函數加上<br>（當然也可以是其他）比如document.execCommand(cmd, false, '<br>');
// 注意ie不支持這個command
// 由于實現可能是iframe或div代碼有所不同，看您的具體情況(要兼容ie,firefox這里也一定需要兼容)
// 在網上也能搜索到代碼就不多說了
if(e.preventDefault) e.preventDefault(); // 禁止瀏覽器默認動作（這里是關鍵）
else e.returnValue = false;
}
}
這樣就可以得到<div>test test test <br>test test test</div>。
