在線編輯器中換行與內(nèi)容自動提取
更新時間:2009年04月24日 01:20:50 作者:
這幾天在寫在線編輯器,碰到個問題,當(dāng)使用回車換行時不是你希望的<br>而是<p></p>對或是<div></div>對。使用google搜索,在網(wǎng)上找不到滿意的答案。
有的是使用“return false”解決了ie的插入<br>問題,但是firefox并沒有解決。而且這個問題連fckeditor都沒解決。呵呵,不知是否有意為之。
可能看了以上的描述還不太明白什么問題。我們做個實驗,打開fckeditor切換到源碼模式輸入<div>test test test test test test</div>,再切換回設(shè)計模式,然后在這句的任意地方輸入個回車,比如在第3個test后,你會發(fā)現(xiàn)源碼內(nèi)得到的是<div>test test test </div><div>test test test</div>,并且如果是<div style="">這形式,自動生成的也是這種形式,這樣會增加許多無用代碼,而且這問題在我所能找到的在線編輯器都有。
為什么一定要使用<br>換行呢?簡單,而且靈活不像<p>換行空行間距大,需要大空行多輸入幾個回車就行。而且假如使用自動提取文章部分內(nèi)容的話不怕tag沒有閉包(可能'<br>'別切割,但只有很少的內(nèi)容,顯示不正常。而且'<br>'被切割中的概率很低,除非使用連續(xù)多個<br>,當(dāng)然這也很容易修補)。這樣在使用自定義層時可以使用<p>,好處是不怕被切割而使得tag沒有閉包。這樣可以避免使用<div>。如果使用<div>的話自動截取的文章內(nèi)容而使得有個<div>沒有閉包(如果一個div內(nèi)的內(nèi)容多,這情況很容易出現(xiàn)),將會對整個頁面效果產(chǎn)生不好的影響。而去除tag,再截取內(nèi)容的話也不是一個好選擇,比如csdn的blog就是先去除了tag,然后截取文章,這個效果大家都看到了,肯定不好。當(dāng)然如果要保證tag的完整,比如img,a還有些工作要做,那也會簡單得多。記住通過這樣處理后在截取文章內(nèi)容存入數(shù)據(jù)庫還要對用戶可能使用源碼編輯的<div>標(biāo)簽替換為<p>標(biāo)簽。
到底如何能得到<div>test test test <br>test test test</div>呢?
呵呵,問題的解決其實也很簡單。那就是屏蔽瀏覽器的默認(rèn)動作,而不是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不支持這個command
// 由于實現(xiàn)可能是iframe或div代碼有所不同,看您的具體情況(要兼容ie,firefox這里也一定需要兼容)
// 在網(wǎng)上也能搜索到代碼就不多說了
if(e.preventDefault) e.preventDefault(); // 禁止瀏覽器默認(rèn)動作(這里是關(guān)鍵)
else e.returnValue = false;
}
}
這樣就可以得到<div>test test test <br>test test test</div>。
可能看了以上的描述還不太明白什么問題。我們做個實驗,打開fckeditor切換到源碼模式輸入<div>test test test test test test</div>,再切換回設(shè)計模式,然后在這句的任意地方輸入個回車,比如在第3個test后,你會發(fā)現(xiàn)源碼內(nèi)得到的是<div>test test test </div><div>test test test</div>,并且如果是<div style="">這形式,自動生成的也是這種形式,這樣會增加許多無用代碼,而且這問題在我所能找到的在線編輯器都有。
為什么一定要使用<br>換行呢?簡單,而且靈活不像<p>換行空行間距大,需要大空行多輸入幾個回車就行。而且假如使用自動提取文章部分內(nèi)容的話不怕tag沒有閉包(可能'<br>'別切割,但只有很少的內(nèi)容,顯示不正常。而且'<br>'被切割中的概率很低,除非使用連續(xù)多個<br>,當(dāng)然這也很容易修補)。這樣在使用自定義層時可以使用<p>,好處是不怕被切割而使得tag沒有閉包。這樣可以避免使用<div>。如果使用<div>的話自動截取的文章內(nèi)容而使得有個<div>沒有閉包(如果一個div內(nèi)的內(nèi)容多,這情況很容易出現(xiàn)),將會對整個頁面效果產(chǎn)生不好的影響。而去除tag,再截取內(nèi)容的話也不是一個好選擇,比如csdn的blog就是先去除了tag,然后截取文章,這個效果大家都看到了,肯定不好。當(dāng)然如果要保證tag的完整,比如img,a還有些工作要做,那也會簡單得多。記住通過這樣處理后在截取文章內(nèi)容存入數(shù)據(jù)庫還要對用戶可能使用源碼編輯的<div>標(biāo)簽替換為<p>標(biāo)簽。
到底如何能得到<div>test test test <br>test test test</div>呢?
呵呵,問題的解決其實也很簡單。那就是屏蔽瀏覽器的默認(rèn)動作,而不是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不支持這個command
// 由于實現(xiàn)可能是iframe或div代碼有所不同,看您的具體情況(要兼容ie,firefox這里也一定需要兼容)
// 在網(wǎng)上也能搜索到代碼就不多說了
if(e.preventDefault) e.preventDefault(); // 禁止瀏覽器默認(rèn)動作(這里是關(guān)鍵)
else e.returnValue = false;
}
}
這樣就可以得到<div>test test test <br>test test test</div>。
相關(guān)文章
JavaScript中檢測數(shù)據(jù)類型的四種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了四個JavaScript中檢測數(shù)據(jù)類型的常用方法,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的可以參考一下2023-04-04JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)硪黄猠asyui form validate總是返回false的原因及解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JS 實現(xiàn)發(fā)送短信驗證碼的“59秒后重新發(fā)送驗證短信”功能
這篇文章主要介紹了JS 實現(xiàn)發(fā)送短信驗證碼的“59秒后重新發(fā)送驗證短信”功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
本文為大家講解下js異步操作時回調(diào)函數(shù)如何控制執(zhí)行順序,感興趣的朋友可以參考下2013-12-12