? 第一次查詢這個(gè)問(wèn)題時(shí) 是在開(kāi)發(fā)一個(gè)小程序，想在小程序中實(shí)現(xiàn)一個(gè)類似簡(jiǎn)書(shū)的富文本編輯器瓣俯。查了許多資料传轰、問(wèn)了許多人 最終都沒(méi)能解決，只能做一個(gè)不算方便的編輯器
? 這個(gè)編輯器也可以編輯文章 但是和正真的富文本編輯器還是有很大的差距甘萧，但由于小程序的限制又沒(méi)有很好的解決方案。所以我開(kāi)始向著網(wǎng)頁(yè)端尋找
? 網(wǎng)頁(yè)端有不少的富文本編輯器插件 比如百度的UMeditor? 及輕量化的Squire 功能都挺好用的?
接下來(lái) 說(shuō)說(shuō)原生js+css+html富文本編輯器的實(shí)現(xiàn)吧梆掸！
實(shí)現(xiàn)的方式有兩種 一種是在iframe中實(shí)現(xiàn) 一種實(shí)在div中實(shí)現(xiàn) 個(gè)人感覺(jué)div中實(shí)現(xiàn)的要好一些
說(shuō)說(shuō)div中編輯器的實(shí)現(xiàn)吧 略略略
編輯器的實(shí)現(xiàn)主要時(shí)依賴元素的contenteditable屬性 將元素變?yōu)榭删庉嫚顟B(tài) 這樣狀態(tài)下的元素就像一個(gè)textarea?
不多說(shuō) 先上git地址
https://github.com/Jy9/textRedact
這個(gè)demo只是實(shí)現(xiàn)了一個(gè)比較簡(jiǎn)單的文本編輯?
主要使用execCommand 的一些命令 來(lái)實(shí)現(xiàn)各種功能
首先添加一個(gè)div 將div contenteditable屬性設(shè)置為true
<div contenteditable='true' data-text='在這里輸入文本'></div>
data-text 是為了實(shí)現(xiàn)類似texteara中placeholder的效果配合css中
[contentEditable=true]:empty:not(:focus):before { content: attr(data-text); color: #eee; }
設(shè)置完成后就開(kāi)始寫(xiě)js的代碼 利用execCommand 改變輸入時(shí)的狀態(tài)
比如 加粗
document.execCommand("bold", false, null);
斜體
document.execCommand('italic',true,null)
...
然后再改變輸入狀態(tài)的同時(shí) 改變按鈕的狀態(tài) 方便隨時(shí)知道開(kāi)啟的狀態(tài)有哪些
$("#Strik").click(function() {
????//加粗
????document.execCommand("bold", false, null);? ? ? ? //設(shè)置字體的加粗狀態(tài)
????if($("#Strik>img").attr("src") == "./icon/加粗.png"){? ? ? ? //更改加粗圖標(biāo)狀態(tài)
????????$("#Strik>img").attr("src","./icon/加粗@.png")
????}else{
????????$("#Strik>img").attr("src","./icon/加粗.png")
????}
????$("#import").focus();? ? ? ? ? //在更改完?duì)顟B(tài)后記得讓光標(biāo)保持在輸入框內(nèi)
});
這樣一個(gè)簡(jiǎn)單的加粗功能就可以用了
功能有了 但是萬(wàn)一因?yàn)槿藶楦淖児鈽?biāo)的位置了 怎么去監(jiān)控現(xiàn)有的狀態(tài)呢扬卷？
這里我用了getSelection().getRangeAt(0).endContainer.parentElement 獲取到光標(biāo)所在的元素
代碼。酸钦。怪得。。
$("#import").click(function(e){ // 設(shè)置最后光標(biāo)對(duì)象
????var dom = $(getSelection().getRangeAt(0).endContainer.parentElement); //在點(diǎn)擊輸入框時(shí)獲取光標(biāo)所在的元素 并轉(zhuǎn)換為jq對(duì)象
????clearStyle();? ? //將所有按鈕的狀態(tài)恢復(fù)到原始狀態(tài)
????getStyle(dom)? ? //獲取現(xiàn)在使用的狀態(tài) 并將按鈕狀態(tài)矯正
})
在getStyle()中 利用遞歸 將所有狀態(tài)找出來(lái) 并設(shè)置
function getStyle(dom){?
????var tagName = dom.prop("tagName");
????if(tagName != "DIV"){ if(tagName=="I"){
????????$("#Italic>img").attr("src","./icon/斜體@.png")
????}else if(tagName=="B"){
????????$("#Strik>img").attr("src","./icon/加粗@.png")
????}else if(tagName=="U"){
????????$("#Underline>img").attr("src","./icon/下劃線@.png")
????}else if(tagName=="STRIKE"){
????????$("#StrikeThrough>img").attr("src","./icon/刪除線@.png")
????}
????getStyle(dom.parent());
????}
}
一個(gè)簡(jiǎn)單的所見(jiàn)即所得的富文本編輯就這樣華麗麗的完成了? 雖然有些簡(jiǎn)陋
另外 我在這個(gè)demo的添加圖片時(shí) 用到了我的另一個(gè)插件 imageUpload 這個(gè)插件將input選擇的圖片轉(zhuǎn)換成了file 和 base64 兩種格式 方便上傳及本地顯示?
git :?https://github.com/Jy9/imageUpload
