在線編輯器中換行與內容自動提取

這幾天在寫在線編輯器,碰到個問題,當使用回車換行時不是你希望的<br>而是<p></p>對或是<div></div>對。使用google搜索,在網上找不到滿意的答案。有的是使用“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>。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章