Demo of React-Quill, a React wrapper around the Quill rich text editor.
See also: https://github.com/zenoamaro/react-quill https://github.com/quilljs/quill
<div class="app"> | |
</div> |
Demo of React-Quill, a React wrapper around the Quill rich text editor.
See also: https://github.com/zenoamaro/react-quill https://github.com/quilljs/quill
/* | |
* Simple editor component that takes placeholder text as a prop | |
*/ | |
class Editor extends React.Component { | |
constructor (props) { | |
super(props) | |
this.state = { editorHtml: '', theme: 'snow' } | |
this.handleChange = this.handleChange.bind(this) | |
} | |
handleChange (html) { | |
this.setState({ editorHtml: html }); | |
} | |
handleThemeChange (newTheme) { | |
if (newTheme === "core") newTheme = null; | |
this.setState({ theme: newTheme }) | |
} | |
render () { | |
return ( | |
<div> | |
<ReactQuill | |
theme={this.state.theme} | |
onChange={this.handleChange} | |
value={this.state.editorHtml} | |
modules={Editor.modules} | |
formats={Editor.formats} | |
bounds={'.app'} | |
placeholder={this.props.placeholder} | |
/> | |
<div className="themeSwitcher"> | |
<label>Theme </label> | |
<select onChange={(e) => | |
this.handleThemeChange(e.target.value)}> | |
<option value="snow">Snow</option> | |
<option value="bubble">Bubble</option> | |
<option value="core">Core</option> | |
</select> | |
</div> | |
</div> | |
) | |
} | |
} | |
/* | |
* Quill modules to attach to editor | |
* See https://quilljs.com/docs/modules/ for complete options | |
*/ | |
Editor.modules = { | |
toolbar: [ | |
[{ 'header': '1'}, {'header': '2'}, { 'font': [] }], | |
[{size: []}], | |
['bold', 'italic', 'underline', 'strike', 'blockquote'], | |
[{'list': 'ordered'}, {'list': 'bullet'}, | |
{'indent': '-1'}, {'indent': '+1'}], | |
['link', 'image', 'video'], | |
['clean'] | |
], | |
clipboard: { | |
// toggle to add extra line breaks when pasting HTML: | |
matchVisual: false, | |
} | |
} | |
/* | |
* Quill editor formats | |
* See https://quilljs.com/docs/formats/ | |
*/ | |
Editor.formats = [ | |
'header', 'font', 'size', | |
'bold', 'italic', 'underline', 'strike', 'blockquote', | |
'list', 'bullet', 'indent', | |
'link', 'image', 'video' | |
] | |
/* | |
* PropType validation | |
*/ | |
Editor.propTypes = { | |
placeholder: PropTypes.string, | |
} | |
/* | |
* Render component on page | |
*/ | |
ReactDOM.render( | |
<Editor placeholder={'Write something...'}/>, | |
document.querySelector('.app') | |
) |
<script src="https://unpkg.com/react@latest/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> | |
<script src="https://unpkg.com/prop-types/prop-types.js"></script> | |
<script src="https://unpkg.com/react-quill@latest/dist/react-quill.js"></script> |
body { | |
background: #f3f1f2; | |
font-family: sans-serif; | |
} | |
.app { | |
margin: 1rem 4rem; | |
} | |
.app .ql-container { | |
border-bottom-left-radius: 0.5em; | |
border-bottom-right-radius: 0.5em; | |
background: #fefcfc; | |
} | |
/* Snow Theme */ | |
.app .ql-snow.ql-toolbar { | |
display: block; | |
background: #eaecec; | |
border-top-left-radius: 0.5em; | |
border-top-right-radius: 0.5em; | |
} | |
/* Bubble Theme */ | |
.app .ql-bubble .ql-editor { | |
border: 1px solid #ccc; | |
border-radius: 0.5em; | |
} | |
.app .ql-editor { | |
min-height: 18em; | |
} | |
.themeSwitcher { | |
margin-top: 0.5em; | |
font-size: small; | |
} |
<link href="https://unpkg.com/react-quill@1.0.0/dist/quill.core.css" rel="stylesheet" /> | |
<link href="https://unpkg.com/react-quill@1.0.0/dist/quill.snow.css" rel="stylesheet" /> | |
<link href="https://unpkg.com/react-quill@1.0.0/dist/quill.bubble.css" rel="stylesheet" /> |