Created
May 11, 2017 02:32
-
-
Save quannt/0a9000880600b0a5d7ef78157a2d6957 to your computer and use it in GitHub Desktop.
Adding a custom dropdown toolbar to react-quill
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import 'react-quill/dist/quill.snow.css'; | |
import ReactQuill from 'react-quill'; | |
import PropTypes from 'prop-types'; | |
class Editor extends React.Component { | |
constructor(props) { | |
super(props) | |
} | |
componentDidMount() { | |
const placeholderPickerItems = Array.prototype.slice.call(document.querySelectorAll('.ql-placeholder .ql-picker-item')); | |
placeholderPickerItems.forEach(item => item.textContent = item.dataset.value); | |
document.querySelector('.ql-placeholder .ql-picker-label').innerHTML | |
= 'Insert placeholder' + document.querySelector('.ql-placeholder .ql-picker-label').innerHTML; | |
} | |
render() { | |
return ( | |
<div className="text-editor"> | |
<ReactQuill | |
theme={'snow'} | |
onChange={this.props.handleChange} | |
value={this.props.value} | |
modules={Editor.modules} | |
placeholder={this.props.placeholder} | |
/> | |
</div> | |
) | |
} | |
} | |
/* | |
* Quill modules to attach to editor | |
* See http://quilljs.com/docs/modules/ for complete options | |
*/ | |
Editor.modules = { | |
toolbar: { | |
container: | |
[ | |
[{ 'placeholder': ['[GuestName]', '[HotelName]'] }], // my custom dropdown | |
['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 | |
], | |
handlers: { | |
"placeholder": function (value) { | |
if (value) { | |
const cursorPosition = this.quill.getSelection().index; | |
this.quill.insertText(cursorPosition, value); | |
this.quill.setSelection(cursorPosition + value.length); | |
} | |
} | |
} | |
} | |
} | |
/* | |
* PropType validation | |
*/ | |
Editor.propTypes = { | |
placeholder: PropTypes.string, | |
onChange: PropTypes.func, | |
value: PropTypes.string | |
} | |
export default Editor; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment