Aprenda a integrar um editor de texto WYSIWYG no React usando Draft.js

Introdução ao Draft.js

O Draft.js é uma biblioteca desenvolvida pelo Facebook que permite a criação de editores de texto ricos em aplicações React. Neste tutorial, vamos explorar como integrar o Draft.js em sua aplicação, abordando desde a instalação até a personalização do editor.

Instalação do Draft.js

Para começar, primeiro é necessário instalar o Draft.js em seu projeto. Você pode fazer isso usando npm ou yarn:

npm install draft-js

Esse comando adiciona a biblioteca Draft.js ao seu projeto, permitindo que você utilize suas funcionalidades.

Criando um Editor Simples

Vamos criar um componente simples de editor utilizando o Draft.js. Aqui está um exemplo básico:

import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';

class MyEditor extends Component {
    constructor(props) {
        super(props);
        this.state = { editorState: EditorState.createEmpty() };
    }

OnEditorStateChange = (editorState) => {
        this.setState({ editorState });
    };

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.onEditorStateChange}
            />
        );
    }
}

export default MyEditor;

Neste código, criamos um componente chamado MyEditor que contém um estado editorState inicializado como vazio. O método onEditorStateChange é chamado sempre que o conteúdo do editor muda, permitindo que o estado seja atualizado.

Personalizando o Editor

O Draft.js oferece diversas opções de personalização para que o editor atenda às suas necessidades. Você pode adicionar botões para formatação, como negrito, itálico e sublinhado. Aqui está como você pode implementar isso:

import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';
import { RichUtils } from 'draft-js';

class MyEditor extends Component {
    constructor(props) {
        super(props);
        this.state = { editorState: EditorState.createEmpty() };
    }

OnEditorStateChange = (editorState) => {
        this.setState({ editorState });
    };

    handleKeyCommand = (command) => {
        const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
        if (newState) {
            this.onEditorStateChange(newState);
            return 'handled';
        }
        return 'not-handled';
    };

    render() {
        return (
            <div>
                <button onClick={() => this.onEditorStateChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'))}>B</button>
                <Editor
                    editorState={this.state.editorState}
                    onEditorStateChange={this.onEditorStateChange}
                    handleKeyCommand={this.handleKeyCommand}
                />
            </div>
        );
    }
}

export default MyEditor;

Aqui, adicionamos um botão que permite ao usuário aplicar o estilo de negrito ao texto selecionado. O método handleKeyCommand também foi adicionado para lidar com os comandos de teclado.

Salvando e Carregando o Conteúdo

Uma das funcionalidades mais importantes de um editor de texto é a capacidade de salvar e carregar o conteúdo. O Draft.js permite que você serialize o estado do editor e o armazene, por exemplo, em um banco de dados. Veja como fazer isso:

const contentState = this.state.editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);
console.log(JSON.stringify(rawContentState));

O código acima converte o estado atual do editor em um formato que pode ser facilmente salvo. Para carregar o conteúdo, você pode usar o seguinte:

const contentState = convertFromRaw(rawContentState);
const editorState = EditorState.createWithContent(contentState);
this.setState({ editorState });

Esses métodos permitem que você converta entre o estado do editor e o formato que pode ser salvo ou carregado.

Conclusão

Neste tutorial, cobrimos o básico sobre como integrar um editor WYSIWYG no React usando Draft.js. O Draft.js é uma ferramenta poderosa que pode ser personalizada de várias maneiras. Explore as diversas opções e crie editores que atendam às suas necessidades específicas. Para mais informações, consulte a documentação oficial do Draft.js .

Entenda a importância dos editores WYSIWYG em aplicações modernas

O uso de editores de texto WYSIWYG em aplicações web se tornou uma necessidade comum na construção de interfaces ricas e dinâmicas. A capacidade de editar conteúdo de forma visual e intuitiva melhora significativamente a experiência do usuário. O Draft.js, uma biblioteca criada pelo Facebook, é uma ótima opção para desenvolvedores que buscam integrar essa funcionalidade em suas aplicações React. Neste artigo, vamos nos aprofundar em como implementar um editor de texto WYSIWYG usando o Draft.js e explorar suas capacidades de personalização, salvamento e carregamento de conteúdo.

Algumas aplicações:

• Criação de blogs e portais de notícias
• Desenvolvimento de sistemas de gerenciamento de conteúdo
• Edição de descrições de produtos em e-commerce
• Aplicações de chat e comentários

Dicas para quem está começando

• Comece com exemplos simples antes de avançar para funcionalidades mais complexas.
• Utilize a documentação oficial para entender as opções disponíveis.
• Pratique a criação de editores com diferentes estilos e funcionalidades.
• Explore plugins e extensões que podem facilitar a implementação de recursos adicionais.

Compartilhe este tutorial