運(yùn)行演示例:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
Tip: 留心的朋友可能已經(jīng)想到了:這段代碼還可以用于實(shí)現(xiàn)在 “設(shè)計(jì)/代碼” 模式切換過(guò)程中,令選中的文字或光標(biāo)位置保持對(duì)應(yīng)。
成功地實(shí)現(xiàn)對(duì)內(nèi)容選中部分的定位之后,接下來(lái)要解決的第二個(gè)問(wèn)題是:根據(jù)需要改變選中部分的代碼。
HTML代碼是由標(biāo)簽組成的,我們需要處理的是對(duì)字號(hào)大小有影響的標(biāo)簽,可分為6種情況:
1、font標(biāo)簽,毋庸置疑,這個(gè)標(biāo)簽需要重點(diǎn)處理;
2、h[1-6]、pre、button、listing、big、small、tt、code、kbd、samp等具有字號(hào)改變作用的標(biāo)簽
3、瀏覽器所能識(shí)別的大多數(shù)標(biāo)簽在帶有style="FONT-SIZE: xxx;"樣式屬性時(shí)將可能對(duì)字號(hào)大小產(chǎn)生影響;
4、select、input、option和object,這四個(gè)標(biāo)簽也可以帶上FONT-SIZE樣式(算是稀奇古怪的用法),但其效果特殊,應(yīng)將它們從上一條中排除;
5、sup和sub雖然也會(huì)影響字號(hào)大小,但是它們的這種影響在重新設(shè)置字號(hào)時(shí)應(yīng)該被保留,所以對(duì)這兩個(gè)標(biāo)簽無(wú)需作處理。
6、其他會(huì)造成位于自己前面的font標(biāo)簽的字號(hào)效力中斷的標(biāo)簽,例如<td>、</td>、<caption>、</caption>、<th>、</th>、<tr>、</tr>、<table>、</table>、<thead>、</thead>、<tbody>、</tbody>、<tfoot>、</tfoot>……還可能有哪些一時(shí)也想不起來(lái),慢慢完善吧。
處理過(guò)程如下(具體代碼見(jiàn)演示例):
- 0、在做所有的處理之前,先要將textarea、xmp、script和style標(biāo)簽的內(nèi)容封印起來(lái),以保護(hù)它們不被破壞。
- 1、處理font標(biāo)簽:
(1)嘗試將PartB內(nèi)的所有font標(biāo)簽配對(duì)。(Tip:這段代碼也可以用來(lái)做其他的“語(yǔ)法分析”工作) (2)將所有在PartB內(nèi)封閉的標(biāo)簽(能配上對(duì)的)中的字號(hào)屬性去除。 (3)將partB中未結(jié)束的<font>標(biāo)簽置標(biāo)(做上標(biāo)記)。 (4)將partB中沒(méi)有配上對(duì)的</font>結(jié)束標(biāo)簽(開(kāi)始標(biāo)簽在partA中)置標(biāo)。
- 2、處理其他標(biāo)簽:將partB中如前所述的會(huì)造成位于自己前面的font標(biāo)簽的字號(hào)效力中斷的各種HTML標(biāo)簽置標(biāo)。
- 3、收尾工作:(怎么?已經(jīng)結(jié)束了嗎?)
(1)將上面兩步產(chǎn)生的所有置標(biāo)位置視為“中斷點(diǎn)”。 (2)在partB開(kāi)頭和第一個(gè)“中斷點(diǎn)”之間所夾的內(nèi)容、最后一個(gè)“中斷點(diǎn)”和partB末尾之間所夾的內(nèi)容,以及各個(gè)“中斷點(diǎn)”之間所夾的內(nèi)容的前面添上一個(gè)行使字號(hào)效力的<font ……>,內(nèi)容的后面添上</font>。 (3)解除textarea、xmp、script和style標(biāo)簽內(nèi)容的封印。 (4)把partA+partB+partC拼接起來(lái),輸出到Editor.document.body.innerHTML。
OK. 一切都搞定了!
完整的運(yùn)行演示例:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
經(jīng)典論壇討論: http://bbs.blueidea.com/thread-2661868-1-1.html
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁(yè) 解決之道 [上] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|