技術的波瀾壯闊總是讓我瀏覽往返,深陷其中 無法自拔.

我就佩服我這個鉆研精神,涉及到前端的東西,什么東西我都能給你扯上一段.在工作咸魚之際,也絕不放過自己,一顆奔騰的心永遠保持著對技術的熱愛與追求. 中華文化上下五年前,二近代文明的信息化卻不是從中國誕生的,我真是深表遺憾.恨自己生不逢時.沒有創造出A語言,碾壓C語言,沒有第一個創造計算機......啊,不知不覺扯遠了.

我們把話題拉回來吧,談談這個富文本編輯器.

目前市面上有很多富文本編輯器了,有的老,有的舊,有的免費,有的收費,有的配置項多,有的配置項少......不管怎么,我都不打算用它們,我那么牛逼,肯定是要自己造個輪子啊(當然時間總是要運行的)..開始吧.

我們來用大白話說一下富文本編輯器原理

將一個div設置屬性?contenteditable="true"

設置加粗,加橫線,放大字體等效果 使用?document.execCommand('bold', false, '') 方法

富文本里最重要就是這兩點,也是最基礎的兩點.

我們一個一個來介紹,

contenteditable??這個 屬性是H5新增的屬性,表示節點是否可進行編輯. 當設置為true是 你就可以對其內容進行增改

重點是document.execCommand()這個方法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值 一個?Boolean?，如果是?false?則表示操作不被支持或未被啟用。

aCommandName:

一個?DOMString?，命令的名稱。可用命令列表請參閱?命令?。

aShowDefaultUI:

一個?Boolean， 是否展示用戶界面，一般為 false。Mozilla 沒有實現。

aValueArgument:

一些命令（例如insertImage）需要額外的參數（insertImage需要提供插入image的url），默認為null。

命令:

backColor:

修改文檔的背景顏色。在styleWithCss模式下，則只影響容器元素的背景顏色。這需要一個?類型的字符串值作為參數傳入。注意，IE瀏覽器用這個設置文字的背景顏色。

bold:

開啟或關閉選中文字或插入點的粗體字效果。IE瀏覽器使用?標簽，而不是標簽。

ClearAuthenticationCache:

清除緩存中的所有身份驗證憑據。

contentReadOnly:

通過傳入一個布爾類型的參數來使能文檔內容的可編輯性。(IE瀏覽器不支持)

copy:

拷貝當前選中內容到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

createLink:

將選中內容創建為一個錨鏈接。這個命令需要一個hrefURI字符串作為參數值傳入。URI必須包含至少一個字符，例如一個空格。（瀏覽器會創建一個空鏈接）

cut:

剪貼當前選中的文字并復制到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

decreaseFontSize:

給選中文字加上??標簽，或在選中點插入該標簽。(IE瀏覽器不支持)

defaultParagraphSeparator:

更改在可編輯文本區域中創建新段落時使用的段落分隔符。有關更多詳細信息，請參閱標記生成的差異。

delete:

刪除選中部分.

enableAbsolutePositionEditor:

啟用或禁用允許移動絕對定位元素的抓取器。Firefox 63 Beta/Dev Edition 默認禁用此功能(bug?1449564)。

enableInlineTableEditing:

啟用或禁用表格行和列插入和刪除控件。(IE瀏覽器不支持)

enableObjectResizing:

啟用或禁用圖像和其他對象的大小可調整大小手柄。(IE瀏覽器不支持)

fontName:

在插入點或者選中文字部分修改字體名稱. 需要提供一個字體名稱字符串 (例如："Arial")作為參數。

fontSize:

在插入點或者選中文字部分修改字體大小. 需要提供一個HTML字體尺寸 (1-7) 作為參數。

foreColor:

在插入點或者選中文字部分修改字體顏色. 需要提供一個顏色值字符串作為參數。

formatBlock:

添加一個HTML塊式標簽在包含當前選擇的行, 如果已經存在了，更換包含該行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素).?需要提供一個標簽名稱字符串作為參數。幾乎所有的塊樣式標簽都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE").?(IE瀏覽器僅僅支持標題標簽 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含標簽分隔符 < >, 例如 "

".)

forwardDelete:

刪除光標所在位置的字符。 和按下刪除鍵一樣。

heading:

添加一個標題標簽在光標處或者所選文字上。 需要提供標簽名稱字符串作為參數 (例如. "H1", "H6"). (IE 和 Safari不支持)

hiliteColor:

更改選擇或插入點的背景顏色。需要一個顏色值字符串作為值參數傳遞。?UseCSS 必須開啟此功能。(IE瀏覽器不支持)

increaseFontSize:

在選擇或插入點周圍添加一個BIG標簽。(IE瀏覽器不支持)

indent:

縮進選擇或插入點所在的行， 在 Firefox 中, 如果選擇多行，但是這些行存在不同級別的縮進, 只有縮進最少的行被縮進。

insertBrOnReturn:

控制當按下Enter鍵時，是插入 br 標簽還是把當前塊元素變成兩個。(IE瀏覽器不支持)

insertHorizontalRule:

在插入點插入一個水平線（刪除選中的部分）

insertHTML:

在插入點插入一個HTML字符串（刪除選中的部分）。需要一個個HTML字符串作為參數。(IE瀏覽器不支持)

insertImage:

在插入點插入一張圖片（刪除選中的部分）。需要一個 URL 字符串作為參數。這個 URL 圖片地址至少包含一個字符。空白字符也可以（IE會創建一個鏈接其值為null）

insertOrderedList:

在插入點或者選中文字上創建一個有序列表

insertUnorderedList:

在插入點或者選中文字上創建一個無序列表。

insertParagraph:

在選擇或當前行周圍插入一個段落。(IE會在插入點插入一個段落并刪除選中的部分.)

insertText:

在光標插入位置插入文本內容或者覆蓋所選的文本內容。

italic:

在光標插入點開啟或關閉斜體字。 (Internet Explorer 使用 EM 標簽，而不是?I?)

justifyCenter:

對光標插入位置或者所選內容進行文字居中。

justifyFull:

對光標插入位置或者所選內容進行文本對齊。

justifyLeft:

對光標插入位置或者所選內容進行左對齊。

justifyRight:

對光標插入位置或者所選內容進行右對齊。

outdent:

對光標插入行或者所選行內容減少縮進量。

paste:

在光標位置粘貼剪貼板的內容，如果有被選中的內容，會被替換。剪貼板功能必須在 user.js 配置文件中啟用。參閱?[1].

redo:

重做被撤銷的操作。

removeFormat:

對所選內容去除所有格式

selectAll:

選中編輯區里的全部內容。

strikeThrough:

在光標插入點開啟或關閉刪除線。

subscript:

在光標插入點開啟或關閉下角標。

superscript:

在光標插入點開啟或關閉上角標。

underline:

在光標插入點開啟或關閉下劃線。

undo:

撤銷最近執行的命令。

unlink:

去除所選的錨鏈接的標簽

useCSS?:

切換使用 HTML tags 還是 CSS 來生成標記. 要求一個布爾值 true/false 作為參數。注: 這個屬性是邏輯上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)

該屬性已經廢棄，使用 styleWithCSS 代替。

styleWithCSS:

用這個取代 useCSS 命令。 參數如預期的那樣工作, i.e. true modifies/generates 風格的標記屬性, false 生成格式化元素。

雖然支持的命令有那么多,但也并不是所有的命令,所有瀏覽器都支持的.? 如下圖:

所有復雜的編輯器都是幾個命令的組合,以及對于不支持命令的迂回戰術實現. 另外還需要有對于當前行的 數據格式判斷,對于復制到編輯器的內容判斷,從而編寫不太的方法對其進行處理... 如此如此 這般這般....

最后附上我實現的初版富文本編輯器,最終版是給公司使用的,這里就不再給大家 展示看了

API HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。