This is my personal implementation of DraftJS. It's a WYSIWYG (What You See Is What You Get) text editor for generating html content. The editor provides a simple function for converting its content to HTML, that can be copied and used anywhere.
Leia em português: Português Brasileiro.
You can see and test the application in this link!
DraftJS is an Open Source library created by Facebook using ReactJS that allows to create customizable text editors. However, to use and customize the Editor adding more tags or functionalities, a number of settings need to be made. This project was initially created from a need of the website Aritmetika.com.br and contains some of these basic settings.
- ReactJS
- DraftJS
First clone the repository into your machine. Then you can install the dependencies using npm or yarn.
git clone https://github.com/gabrielluciano/editor-html-react-e-draftjs
cd editor-html-react-e-draftjs
npm install
npm start
Or
git clone https://github.com/gabrielluciano/editor-html-react-e-draftjs
cd editor-html-react-e-draftjs
yarn
yarn start
Now you can test the editor on localhost.
The component is located on path: ./src/components/Editor
. Just copy the Editor folder to your project. The component need the following dependencies to work properly:
You can add this dependecies to your project running following command on your project root folder:
npm install draft-js immutable react-icons
Or, with yarn:
yarn add draft-js immutable react-icons
You will need the following imports do use the editor:
import { EditorState } from 'draft-js';
import Editor from './components/Editor/Editor';
import decorator from './components/Editor/decorators/index';
To use the editor you will need to create a React State then pass the state variable and set state function to the Editor component like the bellow example, that uses a functional React component with useState Hook:
import { useState } from 'react';
import { EditorState } from 'draft-js';
import Editor from './components/Editor/Editor';
import decorator from './components/Editor/decorators/index';
function App() {
const [editorState, setEditorState] = useState(
() => EditorState.createEmpty(decorator)
);
return (
<Editor
editorState={editorState}
setEditorState={setEditorState}
/>
);
}
export default App;
Note that you need to pass the following argument to useState function () => EditorState.createEmpty(decorator)
. This will create empty editor state with the custom decorator passed on createEmpty.
The editor content can be converted to an HTML string using the function convertToHtml
, that takes the editorState as a parameter. See how to use it in the example below:
import Editor, { convertToHtml } from './components/Editor/Editor';
// ...
// ...
const html = convertToHtml(editorState);
MIT