要素過(guò)多建議收藏
- 富文本編輯
基本的技術(shù)就是在空白
HTML
文件中嵌入一個(gè)
iframe
。通過(guò)
designMode
屬性，可以將這個(gè)空白文檔變成可以編輯的，實(shí)際編輯的則是
<body>
元素
的
HTML
。
designMode
屬性有兩個(gè)可能的值：
"off"
（默認(rèn)值）和
"on"
。設(shè)置為
"on"
時(shí)，整個(gè)文檔
都會(huì)變成可以編輯的（顯示插入光標(biāo)），從而可以像使用文字處理程序一樣編輯文本，通過(guò)鍵盤(pán)將文本
標(biāo)記為粗體、斜體，等等。
作為
iframe
源的是一個(gè)非常簡(jiǎn)單的空白
HTML
頁(yè)面。下面是一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>Blank Page for Rich Text Editing</title>
</head>
<body>
</body>
</html>
這個(gè)頁(yè)面會(huì)像其他任何頁(yè)面一樣加載到
iframe
里。為了可以編輯，必須將文檔的
designMode
屬
性設(shè)置為
"on"
。不過(guò)，只有在文檔完全加載之后才可以設(shè)置。在這個(gè)包含頁(yè)面內(nèi)，需要使用
onload
事件處理程序在適當(dāng)時(shí)機(jī)設(shè)置
designMode
，如下面的例子所示：
<iframe name="richedit" style="height: 100px; width: 100px"></iframe>
<script>
window.addEventListener("load", () => {
frames["richedit"].document.designMode = "on";
});
</script>
以上代碼加載之后，可以在頁(yè)面上看到一個(gè)類似文本框的區(qū)域。這個(gè)框的樣式具有網(wǎng)頁(yè)默認(rèn)樣式，
不過(guò)可以通過(guò)
CSS
調(diào)整。
- 使用 contenteditable
還有一種處理富文本的方式，也是
IE
最早實(shí)現(xiàn)的，即指定
contenteditable 屬性。可以給頁(yè)面
中的任何元素指定
contenteditable
屬性，然后該元素會(huì)立即被用戶編輯。這種方式更受歡迎，因?yàn)?
不需要額外的
iframe
、空頁(yè)面和
JavaScript
，只給元素添加一個(gè)
contenteditable
屬性即可，比如：
<div class="editable" id="richedit" contenteditable ></div>
元素中包含的任何文本都會(huì)自動(dòng)被編輯，元素本身類似于
<textarea>
元素。通過(guò)設(shè)置
contentEditable
屬性，也可以隨時(shí)切換元素的可編輯狀態(tài)：
let div = document.getElementById("richedit");richedit.contentEditable = "true";
contentEditable
屬性有
3
個(gè)可能的值：
"true"
表示開(kāi)啟，
"false"
表示關(guān)閉，
"inherit"
表示
繼承父元素的設(shè)置（因?yàn)樵?
contenteditable
元素內(nèi)部會(huì)創(chuàng)建和刪除元素）。
IE
、
Firefox
、
Chrome
、
Safari
和
Opera
及所有主流移動(dòng)瀏覽器都支持
contentEditable
屬性。
- 與富文本交互
與富文本編輯器交互的主要方法是使用
document.execCommand()
。這個(gè)方法在文檔上執(zhí)行既定
的命令，可以實(shí)現(xiàn)大多數(shù)格式化任務(wù)。
document.execCommand()
可以接收
3
個(gè)參數(shù)：要執(zhí)行的命令、
表示瀏覽器是否為命令提供用戶界面的布爾值和執(zhí)行命令必需的值（如果不需要?jiǎng)t為
null
）。為跨瀏覽
器兼容，第二個(gè)參數(shù)應(yīng)該始終為
false
，因?yàn)?
Firefox
會(huì)在其為
true
時(shí)拋出錯(cuò)誤。
不同瀏覽器支持的命令也不一樣。下表列出了最常用的命令。
![高級(jí)JavaScript。如何用JavaScript手?jǐn)]一個(gè)富文本編輯器？,javascript,面試,HTML,javascript,開(kāi)發(fā)語(yǔ)言,ecmascript](https://imgs.yssmx.com/Uploads/2024/01/813262-1.png)
![高級(jí)JavaScript。如何用JavaScript手?jǐn)]一個(gè)富文本編輯器？,javascript,面試,HTML,javascript,開(kāi)發(fā)語(yǔ)言,ecmascript](https://imgs.yssmx.com/Uploads/2024/01/813262-2.png)
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-813262.html文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-813262.html
剪貼板相關(guān)的命令與瀏覽器關(guān)系密切。雖然這些命令并不都可以通過(guò)
document.execCommand()
使用，但相應(yīng)的鍵盤(pán)快捷鍵都是可以用的。
這些命令可以用于修改內(nèi)嵌窗格（
iframe
）中富文本區(qū)域的外觀，如下面的例子所示：
// 在內(nèi)嵌窗格中切換粗體文本樣式frames["richedit"].document.execCommand("bold", false, null);// 在內(nèi)嵌窗格中切換斜體文本樣式frames["richedit"].document.execCommand("italic", false, null);// 在內(nèi)嵌窗格中創(chuàng)建指向 www.wrox.com 的鏈接frames["richedit"].document.execCommand("createlink", false,"http://www.wrox.com");// 在內(nèi)嵌窗格中為內(nèi)容添加 <h1> 標(biāo)簽frames["richedit"].document.execCommand("formatblock", false, "<h1>");
同樣的方法也可以用于頁(yè)面中添加了
contenteditable
屬性的元素，只不過(guò)要使用當(dāng)前窗口而不
是內(nèi)嵌窗格中的
document
對(duì)象：
// 切換粗體文本樣式document.execCommand("bold", false, null);// 切換斜體文本樣式document.execCommand("italic", false, null);// 創(chuàng)建指向 www.wrox.com 的鏈接document.execCommand("createlink", false, "http://www.wrox.com");// 為內(nèi)容添加 <h1> 標(biāo)簽document.execCommand("formatblock", false, "<h1>");
?
注意，即使命令是所有瀏覽器都支持的，命令生成的
HTML
通常差別也很大。例如，為選中文本
應(yīng)用
bold
命令在
IE
和
Opera
中會(huì)使用
<strong>
標(biāo)簽，在
Safari
和
Chrome
中會(huì)使用
<b>標(biāo)簽，而在Firefox
中會(huì)使用
<span>
標(biāo)簽。在富文本編輯中，不能依賴瀏覽器生成的
HTML，因?yàn)槊顚?shí)現(xiàn)和格式 轉(zhuǎn)換都是通過(guò)
innerHTML
完成的。
還有與命令相關(guān)的其他一些方法。第一個(gè)方法是
queryCommandEnabled()
，此方法用于確定對(duì)當(dāng)
前選中文本或光標(biāo)所在位置是否可以執(zhí)行相關(guān)命令。它只接收一個(gè)參數(shù)，即要檢查的命令名。如果可編 輯區(qū)可以執(zhí)行該命令就返回
true
，否則返回
false
。來(lái)看下面的例子：
let result = frames["richedit"].document.queryCommandEnabled("bold");
以上代碼在當(dāng)前選區(qū)可以執(zhí)行
"bold"
命令時(shí)返回
true
。不過(guò)要注意，
queryCommandEnabled()
返回
true
并不代表允許執(zhí)行相關(guān)命令，只代表當(dāng)前選區(qū)適合執(zhí)行相關(guān)命令。在
Firefox
中，
queryCommandEnabled("cut")
即使默認(rèn)不允許剪切也會(huì)返回
true
。
另一個(gè)方法
queryCommandState()
用于確定相關(guān)命令是否應(yīng)用到了當(dāng)前文本選區(qū)。例如，要確定
當(dāng)前選區(qū)的文本是否為粗體，可以這樣：
let isBold = frames["richedit"].document.queryCommandState("bold");
如果之前給文本選區(qū)應(yīng)用過(guò)
"bold"
命令，則以上代碼返回
true
。全功能富文本編輯器可以利用這
個(gè)方法更新粗體、斜體等按鈕。
最后一個(gè)方法是
queryCommandValue()
，此方法可以返回執(zhí)行命令時(shí)使用的值（即前面示例的
execCommand()
中的第三個(gè)參數(shù)）。如果對(duì)一段選中文本應(yīng)用了值為
7
的
"fontsize"命令，則如下代 碼會(huì)返回
7
：
let fontSize = frames["richedit"].document.queryCommandValue("fontsize");
這個(gè)方法可用于確定如何將命令應(yīng)用于文本選區(qū)，從而進(jìn)一步?jīng)Q定是否需要執(zhí)行下一個(gè)命令。
- 富文件選擇?
在內(nèi)嵌窗格中使用
getSelection()
方法，可以獲得富文本編輯器的選區(qū)。這個(gè)方法暴露在
document
和
window
對(duì)象上，返回表示當(dāng)前選中文本的
Selection
對(duì)象。每個(gè)
Selection
對(duì)象都擁
有以下屬性。
?
anchorNode
：選區(qū)開(kāi)始的節(jié)點(diǎn)。
?
anchorOffset
：在
anchorNode
中，從開(kāi)頭到選區(qū)開(kāi)始跳過(guò)的字符數(shù)。
?
focusNode
：選區(qū)結(jié)束的節(jié)點(diǎn)。
?
focusOffset
：
focusNode
中包含在選區(qū)內(nèi)的字符數(shù)。
?
isCollapsed
：布爾值，表示選區(qū)起點(diǎn)和終點(diǎn)是否在同一個(gè)地方。
?
rangeCount
：選區(qū)中包含的
DOM
范圍數(shù)量。
Selection
的屬性并沒(méi)有包含很多有用的信息。好在它的以下方法提供了更多信息，并允許操作
選區(qū)。
?
addRange(
range
)
：把給定的
DOM
范圍添加到選區(qū)。
?
collapse(
node, offset
)
：將選區(qū)折疊到給定節(jié)點(diǎn)中給定的文本偏移處。
?
collapseToEnd()
：將選區(qū)折疊到終點(diǎn)。
?
collapseToStart()
：將選區(qū)折疊到起點(diǎn)。
?
containsNode(
node
)
：確定給定節(jié)點(diǎn)是否包含在選區(qū)中。
?
deleteFromDocument()
：從文檔中刪除選區(qū)文本。與執(zhí)行
execCommand("delete", false,
null)
命令結(jié)果相同。
?
extend(
node, offset
)
：通過(guò)將
focusNode
和
focusOffset
移動(dòng)到指定值來(lái)擴(kuò)展選區(qū)。
?
getRangeAt(
index
)
：返回選區(qū)中指定索引處的
DOM
范圍。
?
removeAllRanges()
：從選區(qū)中移除所有
DOM
范圍。這實(shí)際上會(huì)移除選區(qū)，因?yàn)檫x區(qū)中至少
要包含一個(gè)范圍。
?
removeRange(
range
)
：從選區(qū)中移除指定的
DOM
范圍。
?
selectAllChildren(
node
)
：清除選區(qū)并選擇給定節(jié)點(diǎn)的所有子節(jié)點(diǎn)。
?
toString()
：返回選區(qū)中的文本內(nèi)容。
Selection
對(duì)象的這個(gè)方法極其強(qiáng)大，充分利用了
DOM
范圍來(lái)管理選區(qū)。操縱
DOM
范圍可以實(shí)
現(xiàn)比
execCommand()
更細(xì)粒度的控制，因?yàn)榭梢灾苯訉?duì)選中文本的
DOM 內(nèi)容進(jìn)行操作。來(lái)看下面的 例子：
let selection = frames["richedit"].getSelection();
// 取得選中的文本
let selectedText = selection.toString();
// 取得表示選區(qū)的范圍
let range = selection.getRangeAt(0);
// 高亮選中的文本
let span = frames["richedit"].document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);
以上代碼會(huì)在富文本編輯器中給選中文本添加黃色高亮背景。實(shí)現(xiàn)方式是在默認(rèn)選區(qū)使用
DOM
范
圍，用
surroundContents()
方法給選中文本添加背景為黃色的
<span>
標(biāo)簽。
getSelection()
方法在
HTML5
中進(jìn)行了標(biāo)準(zhǔn)化，
IE9
以及
Firefox
、
Safari
、
Chrome
和
Opera
的所
有現(xiàn)代版本中都實(shí)現(xiàn)了這個(gè)方法。
IE8
及更早版本不支持
DOM
范圍，不過(guò)它們?cè)试S通過(guò)專有的
selection
對(duì)象操作選中的文本。如
本章前面所討論的，這個(gè)
selection
對(duì)象是
document 的屬性。要取得富文本編輯器中選中的文本， 必須先創(chuàng)建一個(gè)文本范圍，然后再訪問(wèn)其
text
屬性：
let range = frames["richedit"].document.selection.createRange();
let selectedText = range.text;
使用
IE
文本范圍執(zhí)行
HTML
操作不像使用
DOM
范圍那么可靠，不過(guò)也是可以做到的。要實(shí)現(xiàn)與
使用
DOM
范圍一樣的高亮效果，可以組合使用
htmlText
屬性和
pasteHTML()
方法：
let range = frames["richedit"].document.selection.createRange();
range.pasteHTML(
'<span style="background-color:yellow">${range.htmlText}</span>');
以上代碼使用
htmlText
取得了當(dāng)前選區(qū)的
HTML
，然后用一個(gè)
<span>
標(biāo)簽將其包圍起來(lái)并通過(guò)
pasteHTML()
再把它插入選區(qū)中。
到了這里，關(guān)于高級(jí)JavaScript。如何用JavaScript手?jǐn)]一個(gè)富文本編輯器？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
