在線編輯器中換行與內(nèi)容自動(dòng)提取
更新時(shí)間:2009年04月24日 01:20:50 作者:
這幾天在寫在線編輯器,碰到個(gè)問題,當(dāng)使用回車換行時(shí)不是你希望的<br>而是<p></p>對(duì)或是<div></div>對(duì)。使用google搜索,在網(wǎng)上找不到滿意的答案。
有的是使用“return false”解決了ie的插入<br>問題,但是firefox并沒有解決。而且這個(gè)問題連fckeditor都沒解決。呵呵,不知是否有意為之。
可能看了以上的描述還不太明白什么問題。我們做個(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è)頁(yè)面效果產(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>。
可能看了以上的描述還不太明白什么問題。我們做個(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è)頁(yè)面效果產(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>。
相關(guān)文章
JavaScript中判斷數(shù)據(jù)類型的實(shí)用方法總結(jié)
最近項(xiàng)目中有不少地方需要判斷數(shù)據(jù)類型,但是判斷數(shù)據(jù)類型也有好幾種方法,并且每種方法判斷的數(shù)據(jù)類型也有局限性,所以本文就來為大家總結(jié)一下js中判斷數(shù)據(jù)類型的幾種實(shí)用方法吧2025-01-01
讓JavaScript 輕松支持函數(shù)重載 (Part 1 - 設(shè)計(jì))
JavaScript支持函數(shù)重載嗎?可以說不支持,也可以說支持。說不支持,是因?yàn)镴avaScript不能好像其它原生支持函數(shù)重載的語(yǔ)言一樣,直接寫多個(gè)同名函數(shù),讓編譯器來判斷某個(gè)調(diào)用對(duì)應(yīng)的是哪一個(gè)重載。2009-08-08
javascript時(shí)間戳和日期字符串相互轉(zhuǎn)換代碼(超簡(jiǎn)單)
下面小編就為大家?guī)硪黄猨avascript時(shí)間戳和日期字符串相互轉(zhuǎn)換代碼(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
js實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
關(guān)于layui flow loading占位圖的實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
純JavaScript實(shí)現(xiàn)獲取onclick、onchange等事件的值
這篇文章主要介紹了JavaScript獲取onclick、onchange等事件的值的方法,需要的朋友可以參考下2014-12-12
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念,它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn),有興趣的可以了解一下。2017-04-04

