媒介
前不久面某廠，負責人地點部門是做在線文檔的，末了幾個發問都是繚繞離線存儲和富文本編輯相干題目，在這塊有點懵，之前沒有打仗過富文本編輯器道理，在頁面光標能在文本之間隨便挑選，刪除和輸入，一向以為是一種hack手藝，本來頁面自身有的一個屬性，合營完成另有js的要領和屬性。在這簡樸紀錄一下。
完成道理
完成富文本結果有兩種要領：1. iframe+designMode，2. contenteditable。
要領一：iframe+designMode
頁面中iframe嵌入一個子頁面，把iframe的屬性designMode設為on，這個子頁面的一切內容就能夠想運用筆墨處理軟件一樣，對文本舉行加粗、斜體等設置。
主頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>富文本編輯</title>
</head>
<body>
<iframe src="./content.html" name="richedit" style="width:400px;height:300px;"></iframe>
<script>
window.addEventListener('load', function () {
window.frames['richedit'].document.designMode = 'on';
}, false);
</script>
</body>
</html>content.html子頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>富文本編輯器題目</h1>
<header>
<nav>導航欄</nav>
</header>
<main>
<section>內容區塊</section>
<section>這裡是一些內容，這裡是一些內容，這裡是一些內容</section>
</main>
<footer>底部版權相干說明</footer>
</body>
</html>完成結果
要領二：contenteditable
能夠把contenteditable屬性運用到頁面中的任何元素，然後用戶馬上就能夠編輯該元素，而不須要iframe頁。
<section class="editable" id="richedit">
<h2>題目欄</h2>
<nav>導航欄</nav>
<article>內容主體部份</article>
</section>
<script>
$richedit = document.getElementById('richedit');
$richedit.contentEditable = 'true';
</script>完成結果
操縱富文本
只展現富文本的結果意義不大，現實運用中，更多連繫用戶操縱交互，發生想要的結果，js中已供應響應api。
document.execCommand()
document.execCommand()對文檔實行預定義的敕令，而且能夠運用大多數花樣。能夠通報3個參數：要實行敕令的稱號、瀏覽器是不是為敕令供應用戶界面的一個布爾值和實行敕令必需的值（無需則為null）。
設置粗體document.execCommand('bold', false, null);
ps:須要注重的是實行
bold敕令，IE和Opera會運用
<strong>標籤圍困文本，Safari和Chrome運用
<b>標籤，而Firefox則運用'<span>’標籤，因為各個瀏覽器完成敕令的體式格局差別，加上經由過程
innerHTML完成轉化的體式格局也不一樣，所以不能希望富文本編輯器會發生一致的HTML。
設置斜體 document.execCommand('italic', false, null)
設置居中對齊document.execCommand('justifycenter', false, null);
設置插進去圖片document.execCommand('insertimage', false, './position.png');
設置字體大小document.execCommand('fontsize', false, this.value);
固然，另有一些其他的設置敕令，比方backcolor設置背景色，indent縮進文本，formatblock要圍困當前文本塊HTML標籤，copy將選中文本複製到剪貼板等。
除了敕令以外，另有於之相干的一些要領：
-
document.queryCommandEnabled()檢測某個敕令是不是能夠針對當前挑選的文本。比方document.queryCommandEnabled('bold')返回true示意對當前選中的文本能夠實行bold敕令。 -
document.queryCommandState()肯定是不是已將指定敕令運用到挑選的文本。比方document.queryCommandState('bold')返回true示意當前選中的文本用了bold敕令加粗的。 -
document.queryCommandValue()獵取實行敕令傳入的值。比方document.queryCommandValue('fontsize')返回5，則用fontsize敕令傳入的值是5。
富文本選區
為了更精細化掌握富文本編輯器的內容，能夠運用document.getSelection()要領，返回Selection對象。在Selection對象上供應了許多有用的要領。
var selection = document.getSelection();
console.log('當前選中的文本：');
console.log(selection.toString());
// 獲得代表選區的局限
var range = selection.getRangeAt(0);
console.log(range);
// 包裹一個標籤使得選中內容凸起
var span = document.createElement('span');
span.style.backgroundColor = '#f0f';
range.surroundContents(span);
console.log('當前文本編輯器內容：');
console.log($richedit.innerHTML);
總結
一般來說，為了便利性，安全性，防止反覆造輪子，在現實工作中都是直接用一些開源構造編寫的富文本編輯器，比方ueditor,umEditor,handEditor等，固然運用在一些場景也是須要本身明白和會寫一部份功用，比方在線文檔。
