1.0.17 • Published 4 years ago
doodle-editor v1.0.17
doodle-editor
Introduction
doodle-editor
is a rich text editor component used for React project
Demo
Inline-style:
Install
npm install --save doodle-editor
Usage
Before using the editor, you must add the following tags to your index.html
file
<link rel="stylesheet" href="https://cdn.quilljs.com/1.2.6/quill.snow.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
Editor
The following code shows how to use the rich text editor:
import React, { Component } from "react";
import { Editor } from "doodle-editor";
class Example extends Component {
render() {
return <Editor />;
}
}
Properties
Name | Description | Type | Default value |
---|---|---|---|
initialContent | Initial content of the editor | string | HTML | null |
placeholder | Placeholder of the editor | string | null |
Methods
Name | Description | Default value |
---|---|---|
onChange(html, deltas, text) | Event firing when editor's content changes | null |
Note that:
html
is HTML generated by the editordeltas
is array of delta, which is editor content's representation in objecttext
is text inferred from HTML
EditorContent
When you want to render the HTML generated from editor, you use the following code:
import React, { Component } from "react";
import { EditorContent } from "doodle-editor";
class Example extends Component {
render() {
return <EditorContent content={"Editor"}/>;
}
}
Properties
Name | Description | Type | Default value |
---|---|---|---|
content | Content of the editor | string | HTML | null |
isInline | Whether editor is inline or block | bool | false |
className | className of the editor content | string | null |
License
MIT © ntncsebku