推薦一款markdown富文本編輯器 React-quill, 基于react 。

最近項目背景需要加一個富文本編輯器,也是踩了很多坑！ 推薦 React-quill ，github: react-quill

• 嘗試過 react-markdown 簡單粗暴,但是_對非技術人員使用不太友_

  

如上圖，可以看出如同目前部落格markdown編輯模式下效果隻是加了它所帶有的文法,輸入時并不會渲染出來,想想公司産品,測試,營運用着估計用着會很痛苦。

• 還有一個值得一提的是 feacebook開發的 draft.js ,優點就是靈活性特别高 ,可以任意diy你想要的文本編輯器模樣** github**: draft.js,如同H5的Canvas一樣給你了畫筆 你可以任意繪畫 ,是以缺點也出來了,需要自己配置的屬性過多,需要花費大量時間！如果真想用它可以扣它demo代碼源碼，會事半功倍。

坑踩完了,最後來說說我們的 react-quill , packjson: "react-quill": "^0.4.1" 然後 npm install

貌似不需要額外的loader

導入子產品 '

import ReactQuill from 'react-quill

這裡還有一個坑就是切莫忘記在根檔案index.html導入

<link rel="stylesheet" href="/asset/quill.css" target="_blank" rel="external nofollow" >
    <script src="/asset/latest/react.min.js"></script>
    <script src="/asset/latest/react-dom.min.js"></script>
    <script src="./asset/react-dom-server.js"></script>
    <script src="./asset/quill.js"></script>
    <script src="./asset/react-quill.js"></script>
           

不然樣式出不來，導入ReactQuill報錯 ！ 使用：

<ReactQuill theme="snow" value={  } onChange={(val)=>{
               // val === 轉化出來的html
               }}/>
           

特别簡單吧 ，簡單又好用。

轉載于:https://my.oschina.net/u/3320489/blog/851619