原生js實現輕量級文本編輯器
最近使用原生js寫了一個輕量級的文本編輯器，那麼今天就來說一下
- 從構想到完成究竟是怎麼實現的，
- 怎麼來對他進行使用，
踩到的坑且是怎樣解決的
經常 使用Markdown來寫博客，一直覺得這個東西方便且看不懂，最近才瞭解了這方面的原理。下面，我們先來看看它呈現出來的效果圖：
如何實現
1、佈局：總的來說，body裏面的內容分爲上面命令的操作控制區，下面的文本編輯可視化區，上面的每組指令都是一個div框，它們都是行內塊級元素–“display: inline-block”，使用css樣式對其進行修飾；底下的控制檯輸出button將其內容輸出在控制檯。
2、Web api的使用：
1>bool=document.execCommand(aCommandName,aShowDefaultUI,aValueArgument); 當一個html文檔切換到設計模式時，document暴露了execCommand方法，該方法允許運用命令來操縱可編輯區域的內容；大多數命令影響document的 selection（粗體，斜體等），當其他命令插入新元素（添加鏈接）或影響整行（縮進）。具體的語法規則如下：
2>HTMLElement.dataset
HTMLElement.dataset屬性允許無論是在讀取模式和寫入模式下訪問在 HTML或 DOM中的元素上設置的所有自定義數據屬性(data-*)集。注：dataset 屬性本身可以被讀取，但不能直接寫入。相反，所有的寫入必須是它的“屬性”，這反過來表示數據屬性。（.dataset 表示獲取元素屬性的集合），如下所示：
3>h5新特性（data-*）
data-用於存儲頁面或應用程序的私有自定義數據，data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗。
注：用戶代理會完全忽略前綴“data-”的自定義數據。3、頁面的可編輯化
爲了使頁面能夠可編輯化，我們添加了一個新的屬性，即：contenteditable=“true”。當使用contenteditable,調用execCommand將影響當前活動的可編輯元素。如何使用
此編輯器的使用主要是：在文本區域編輯自己想要寫的東西，然後使用光標選中文本內容，點擊控制區域的按鈕，對所選中的文本進行樣式的修改，點擊最底下的控制檯button，可以將文本區域的內容粘貼在控制檯上（包含HTML標籤）
踩過的坑
1、在使用document.execCommand(paste，false，null)方法的時候，對剪切板中的內容不能夠進行粘貼，
解決方法：經查閱資料：document.execCommand()方法屬於IE的內核，大部分命令在別的瀏覽器中都實現了兼容，但粘貼功能是不能夠實現的；但是爲了實現這個想法，我們可以自己寫功能函數來自定義方法，對其進行封裝；在我寫的時候網上已經貼出了功能函數的代碼，大家可以自行百度，這裏就不再做過多的提及。
2、我將控制區域的每塊內容都看作一個div框，我們將div框使用“display:inline-block”設置成塊級內聯元素，div框裏面的a鏈接標籤設置成內聯樣式，但是奇怪的是，div框裏面的a鏈接標籤之間還是像塊級元素一樣展示，對其添加的樣式也不起作用；
解決方法：我就將其設置成塊級元素，使用margin屬性來使其合併在一起，從而解決了這個問題。
如果有感興趣的同學，歡迎一起討論，github地址