0.2.0 • Published 1 year ago
quill-editor-math v0.2.0
quill-editor-math
Rich text editor with react quill, mathquill4quill, katex, and image resizer. you can use formula with this. 👌🏻
Demo
Install
npm install --save quill-editor-math
or
yarn add quill-editor-math
Usage
React
import React, { Component } from 'react'
import Editor from 'quill-editor-math'
import 'quill-editor-math/dist/index.css'
class Example extends Component {
render() {
return <Editor initialValue='Hello World!' />
}
}
NextJS
import dynamic from 'next/dynamic';
import 'quill-editor-math/dist/index.css';
const Editor = dynamic(() => import('quill-editor-math')
.then((mod) => mod.default), {
ssr: false,
loading: () => <p>Editor loading ...</p>,
}
);
export default function Example() {
return (
<Editor initialValue='Hello World!' />
);
}
If you want to reset field of this text editor, you can try this 👇
import { useState } from 'react';
import dynamic from 'next/dynamic';
import 'quill-editor-math/dist/index.css';
const Editor = dynamic(() => import('quill-editor-math')
.then((mod) => mod.default), {
ssr: false,
loading: () => <p>Editor loading ...</p>,
}
);
export default function Example() {
const [resetField, setResetField] = useState(false);
return (
<>
<button onClick={() => setResetField(true)}>Reset Field</button>
<Editor initialValue='Hello World!' resetField={resetField} setResetField={setResetField} />
</>
);
}
API
Property | Description | Type | Default |
---|---|---|---|
initialValue | the initial value to be inserted into the text editor | String | "" |
onChange | Callback when user input | function(value, delta, source, editor) | false |
onBlur | Called when leaving the component | function(previousSelection, source, editor) | false |
placeholder | The placeholder of input | String | - |
style | HTML CSS style | React.CSSProperties | - |
theme | Quill Editor themes | String - "bubble | snow" | "snow" |
customOperator | Operator that will appear in the equation, you can write latex formula. | array | ['\pm', '\pm', '\sqrt{x}', '\sqrt'] |
toolbar | Quill Toolbar Options, you can read more here: https://quilljs.com/docs/modules/toolbar/#toolbar-module | array | - |
resetField | variable state for reset field of the text editor | boolean | false |
setResetField | if you pass 'resetField' into props, you have to pass 'setResetField' too, it will set back resetField into false | React.Dispatch<React.SetStateAction> | - |
License
MIT © vieyama
0.2.0
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.6-rc
1 year ago
0.1.5-rc
1 year ago
0.1.4-rc
1 year ago
0.1.3-rc
1 year ago
0.1.2-rc
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
1.0.0
1 year ago