##react中quill的使用
近期使用由於項目需要一款富文本編輯框，本來打算試着使用drift.js寫一款富文本編輯器。但由於時間比較緊急最後選擇引用第三方插件，在衆多富文本插件中初步選擇了Quill和CKEditor5，最後選擇了簡單便捷的Quill。下面是目錄：
- 引入插件
- 配置toolbar
- toolbar進一步自定義字體
- toolbar自定義上傳圖片
引入插件：
通過npm install quill 引入最新的quill插件；
項目中引入：
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
在componentDidMount進行初始化：
const textbox = this.refs.textarea;
const options = {
debug: 'warn',
modules: {
toolbar: toolbarOptions,
},
placeholder: '請輸入文本...',
readOnly: false,
theme: 'snow'
};
editor = this.editor = new Quill(textbox, options);
const {answer} = this.props.problemDetails;
if (answer) editor.clipboard.dangerouslyPasteHTML(answer);
editor.on('text-change', this.handleChange.bind(this));
answer是賦予富文本的初始值；
options爲配置項，debug爲在console中打印信息的時期，可供選擇的有‘debug’，‘warn’，‘log’和‘info’；toolbar選爲TRUE是指toolbar選用默認功能；readOnly指是否可編輯；theme有‘snow’和‘bubble’兩種選擇，分別是toolbar部分是否顯示。
配置toolbar
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
這裏大家可以參考官方文檔進行配置，配置大家需要的toolbar.我這裏精簡了許多。
自定義toolbar字體
由於quill是老外開發的，所以它的toolbar提示也是中文。這裏我已font爲例進行自定義配置。
首先在全局樣式中引入字體樣式
/*font漢化*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋體";
font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑體";
font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微軟雅黑";
font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷體";
font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
然後在把樣式引入到quill中
const fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //將字體加入到白名單
Quill.register(Font, true);
然後再將toolbarOptions中的font換調
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': fonts }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
這樣就實現了字體的自定義，其他配置均可參考。
自定義上傳圖片
imageHandle = (file) => {
/*const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('圖片大小不能超過2M');
}else{
const base64 = getBase64Image(file);
}*/
const reader = new FileReader();
const AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節)（ 2 M = 2097152 B ）超過2M上傳失敗
let imgUrlBase64;
if (file) {
//將文件以Data URL形式讀入頁面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，需要與後臺溝通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
message.error( '上傳失敗，請上傳不大於2M的圖片！');
return;
}else{
//執行上傳操作
/* console.log(reader.result);*/
const range = editor.getSelection();
if (range) {
editor.insertEmbed(range.index, 'image',""+reader.result); //將上傳好的圖片，插入到富文本的range.index（當前光標處）
}else{
editor.insertEmbed(0, 'image',""+reader.result);
}
}
}
}
}
shang