資訊專欄INFORMATION COLUMN
摘要：富文本選區(qū)為了更精細(xì)化控制富文本編輯器的內(nèi)容，可以使用方法，返回對象。
前言
前不久面某廠，負(fù)責(zé)人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關(guān)問題，在這塊有點(diǎn)懵，之前沒有接觸過富文本編輯器原理，在頁面光標(biāo)能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術(shù)，原來頁面本身有的一個屬性，配合實(shí)現(xiàn)還有js的方法和屬性。在這簡單記錄一下。
實(shí)現(xiàn)原理實(shí)現(xiàn)富文本效果有兩種方法：1. iframe+designMode，2. contenteditable。
方法一：iframe+designMode頁面中iframe嵌入一個子頁面，把iframe的屬性designMode設(shè)為on，這個子頁面的所有內(nèi)容就可以想使用文字處理軟件一樣，對文本進(jìn)行加粗、斜體等設(shè)置。
主頁面
富文本編輯
content.html子頁面
Document 富文本編輯器標(biāo)題
內(nèi)容區(qū)塊 這里是一些內(nèi)容，這里是一些內(nèi)容，這里是一些內(nèi)容
實(shí)現(xiàn)效果
方法二：contenteditable可以把contenteditable屬性應(yīng)用到頁面中的任何元素，然后用戶立即就可以編輯該元素，而不需要iframe頁。
標(biāo)題欄
內(nèi)容主體部分
實(shí)現(xiàn)效果
操作富文本只展示富文本的效果意義不大，實(shí)際應(yīng)用中，更多結(jié)合用戶操作交互，產(chǎn)生想要的效果，js中已提供相應(yīng)api。
document.execCommand()document.execCommand()對文檔執(zhí)行預(yù)定義的命令，而且可以應(yīng)用大多數(shù)格式。可以傳遞3個參數(shù)：要執(zhí)行命令的名稱、瀏覽器是否為命令提供用戶界面的一個布爾值和執(zhí)行命令必須的值（無需則為null）。
設(shè)置粗體document.execCommand("bold", false, null);
ps:需要注意的是執(zhí)行bold命令，IE和Opera會使用標(biāo)簽包圍文本，Safari和Chrome使用標(biāo)簽，而Firefox則使用""標(biāo)簽，由于各個瀏覽器實(shí)現(xiàn)命令的方式不同，加上通過innerHTML實(shí)現(xiàn)轉(zhuǎn)化的方式也不一樣，所以不能指望富文本編輯器會產(chǎn)生一致的HTML。
設(shè)置斜體 document.execCommand("italic", false, null)
設(shè)置居中對齊document.execCommand("justifycenter", false, null);
設(shè)置插入圖片document.execCommand("insertimage", false, "./position.png");
設(shè)置字體大小document.execCommand("fontsize", false, this.value);
當(dāng)然，還有一些其他的設(shè)置命令，比如backcolor設(shè)置背景色，indent縮進(jìn)文本，formatblock要包圍當(dāng)前文本塊HTML標(biāo)簽，copy將選中文本復(fù)制到剪貼板等。
除了命令之外，還有于之相關(guān)的一些方法：
document.queryCommandEnabled()檢測某個命令是否可以針對當(dāng)前選擇的文本。比如document.queryCommandEnabled("bold")返回true表示對當(dāng)前選中的文本可以執(zhí)行bold命令。
document.queryCommandState()確定是否已將指定命令應(yīng)用到選擇的文本。比如document.queryCommandState("bold")返回true表示當(dāng)前選中的文本用了bold命令加粗的。
document.queryCommandValue()獲取執(zhí)行命令傳入的值。比如document.queryCommandValue("fontsize")返回5，則用fontsize命令傳入的值是5。
富文本選區(qū)為了更精細(xì)化控制富文本編輯器的內(nèi)容，可以使用document.getSelection()方法，返回Selection對象。在Selection對象上提供了很多實(shí)用的方法。
var selection = document.getSelection();
console.log("當(dāng)前選中的文本：");
console.log(selection.toString());
// 取得代表選區(qū)的范圍
var range = selection.getRangeAt(0);
console.log(range);
// 包裹一個標(biāo)簽使得選中內(nèi)容突出
var span = document.createElement("span");
span.style.backgroundColor = "#f0f";
range.surroundContents(span);
console.log("當(dāng)前文本編輯器內(nèi)容：");
console.log($richedit.innerHTML);
總結(jié)
一般來說，為了便利性，安全性，避免重復(fù)造輪子，在實(shí)際工作中都是直接用一些開源組織編寫的富文本編輯器，比如ueditor,umEditor,handEditor等，當(dāng)然應(yīng)用在一些場景也是需要自己理解和會寫一部分功能，比如在線文檔。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52472.html
摘要：富文本選區(qū)為了更精細(xì)化控制富文本編輯器的內(nèi)容，可以使用方法，返回對象。 前言 前不久面某廠，負(fù)責(zé)人所在部門是做在線文檔的，最后幾個提問都是圍繞離線存儲和富文本編輯相關(guān)問題，在這塊有點(diǎn)懵，之前沒有接觸過富文本編輯器原理，在頁面光標(biāo)能在文本之間隨意選擇，刪除和輸入，一直以為是一種hack技術(shù)，原來頁面本身有的一個屬性，配合實(shí)現(xiàn)還有js的方法和屬性。在這簡單記錄一下。 實(shí)現(xiàn)原理 實(shí)現(xiàn)富文本效...
摘要：一段簡單的代碼程序猿原生加載富文本原生的直接加載如果是有方法，但是這種加載方式，圖片無法在顯示。以上的兩種方式按自己的需求來進(jìn)行使用的，試用于后臺接口直接返回?cái)?shù)據(jù)給移動端進(jìn)行加載的。 文章鏈接：https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw 項(xiàng)目中經(jīng)常涉及到富文本的加載，后臺管理端編輯器生成的一段html 代碼要渲染到移動端上面，一...
摘要：移動端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無序列表，字體顏色加粗斜體。可用于獨(dú)立項(xiàng)目開發(fā)，也可以用于與原生混合開發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。 ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無序列表，字體顏色、加粗、斜體。 可用于獨(dú)立web項(xiàng)目開發(fā)，也可以用于與原生A...
閱讀 2503·2021-09-28 09:36
閱讀 1505·2021-09-22 15:33
閱讀 3643·2019-08-30 15:44
閱讀 1753·2019-08-29 13:14
閱讀 3138·2019-08-29 11:17
閱讀 1453·2019-08-29 11:03
閱讀 2913·2019-08-26 17:10
閱讀 688·2019-08-26 12:13
