最近專案中需要用到富文字編輯器，並且客戶明確提出需要實現可以直接截圖貼上到文字框中。

由於我們的前端是用react寫的，於是就去參考了知乎的實現，發現知乎的富文字框是可以直接貼圖進去的，但由於看不到原始碼，只能瀏覽器除錯看了一下，發現他就是一個可編輯的div，貼圖進去後就是在div中增加一個img標籤。

本來想自己實現一個，但由於剛剛接觸前端3個月，實在是沒那個能力，於是就搜尋各種富文字框嘗試，最後找到一個可以實現貼圖的的富文字框Quill。

先放地址：

官網：https://quilljs.com/
github：https://github.com/quilljs/quill
react版：https://github.com/zenoamaro/react-quill
貼圖元件：https://github.com/kensnyder/quill-image-drop-module
 

接下來簡單說下在react中的使用方法：

package.json中引入

"quill-image-drop-module": "^1.0.3",
"react-quill": "^1.1.0",

使用quill

quill是支援模組擴充套件的，貼上圖片的功能就是通過quill-image-drop-module模組實現。

import ReactQuill, { Quill } from 'react-quill';
import { ImageDrop } from 'quill-image-drop-module';
import 'react-quill/dist/quill.snow.css'
 
;

// 在quiil中註冊quill-image-drop-module
Quill.register('modules/imageDrop', ImageDrop);

quill的頭部顯示的功能按鈕也是支援自定義配置的。這裡在modules中宣告imageDrop: true來開啟貼圖功能。

modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1'
 
 }, { indent: '+1' }],
      ['link', 'image'],
      ['clean'],
    ],
    imageDrop: true,
  };

formats = [
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image',
];

下面正式定義Quill

<ReactQuill
    theme="snow"
    modules={this.modules}
    formats={this.formats}
    onChange={this.onQuillChange}
    defaultValue={this.state.value}
    placeholder="Please Input"
/>

效果圖

onChange函式

// 當修改文字框的內容時，會自動呼叫onQuillChange函式
onQuillChange = (content, delta, source, editor) => {
    // content 是真實的DOM節點
    // delta 記錄了修改的物件，下篇文章詳述
    // source 值為user或api
    // editor 文字框物件，可以呼叫函式獲取content, delta值
};

詳細可以看文件：https://github.com/zenoamaro/react-quill

存在的問題

存在瀏覽器相容問題，目前完全支援火狐瀏覽器，谷歌瀏覽器只能在網頁內截圖貼上，並且貼入後會在開頭多一個空行。Safari則完全不支援。

這篇就先介紹到這，優化下篇再介紹，前端小白，第一次分享，請多多指教。