reactjs - draft - react wysiwyg

draftjs cómo iniciar un editor con contenido

Question

Tropezó con este genial editor de texto, draft.js por Facebook. Intento seguir el ejemplo en github pero quiero crear un editor con contenido en lugar de un editor vacío.

var EditorState = Draft.EditorState;

var RichEditor = React.createClass({
   getInitialState(){
      return {editorState: EditorState.createWithContent("Hello")}
      //the example use this code to createEmpty editor
     // return ({editorState: EditorState.createEmpty()})
   }
});

ejecutarlo, pero me da error diciendo que "UnEught TypeError: contentState.getBlockMap no es una función"

Answer 1

Creé un conjunto de paquetes para DraftJS para ayudar a importar y exportar contenido (HTML / Markdown). Los uso en mi proyecto react-rte . El que probablemente esté buscando es: draft-js-import-html on npm.

npm install draft-js-import-html

Un ejemplo de cómo puede usarlo:

var stateFromHTML = require(''draft-js-import-html'').stateFromHTML;
var EditorState = Draft.EditorState;

var RichEditor = React.createClass({
  getInitialState() {
    let contentState = stateFromHTML(''<p>Hello</p>'');
    return {
      editorState: EditorState.createWithContent(contentState)
    };
  }
});

Los módulos que he publicado son:

• draft-js-import-html
• draft-js-export-html
• draft-js-import-markdown
• draft-js-export-markdown

Answer 2

Descubrí que esta es una forma limpia de hacer las cosas con una gran funcionalidad. Puede agregar más complementos en el futuro, exportar su contenido como .md etc. sin cambiar mucho la estructura de su componente.

import Draft from ''draft-js'';

import DraftPasteProcessor from ''draft-js/lib/DraftPasteProcessor'';
const { EditorState, ContentState } = Draft;
import Editor from ''draft-js-plugins-editor'';

import createRichButtonsPlugin from ''draft-js-richbuttons-plugin'';
const richButtonsPlugin = createRichButtonsPlugin();

class DescriptionForm extends React.Component {

state = {
  editorState: this._getPlaceholder(),
}

_getPlaceholder() {
  const placeholder = ''Write something here'';
  const contentHTML = DraftPasteProcessor.processHTML(placeholder);
  const state = ContentState.createFromBlockArray(contentHTML);
  return Draft.EditorState.createWithContent(state);
}

_onChange(editorState) {
  this.setState({
    editorState,
  });
}

render () {
    let { editorState } = this.state;
    return (
      <div>
          <Editor
            editorState={editorState}
            onChange={this._onChange.bind(this)}
            spellCheck={false}
            plugins={[richButtonsPlugin, videoPlugin]}
          />
      </div>
    );
  }
}

Answer 3

El primer argumento para EditorState.createWithContent es un ContentState , no una cadena. Necesita importar ContentState

var EditorState = Draft.EditorState;
var ContentState = Draft.ContentState;

Use ContentState.createFromText Y pase el resultado a EditorState.createWithContent .

return {
  editorState: EditorState.createWithContent(ContentState.createFromText(''Hello''))
};

Answer 4

Hubo algunos cambios en la API, para mayor claridad, estos ejemplos usan la última API, que es v0.10.0 .

Hay muchas formas, pero básicamente tienes tres opciones dependiendo de si deseas usar texto sin formato, texto con estilo o marcado HTML para el recurso de contenido.

El texto sin formato es obvio, pero para el texto con estilo, debe usar el objeto javasript serializado o el marcado HTML.

Comencemos con un ejemplo de texto plano:

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

class MyEditor extends Component{

  constructor(props) {
    super(props);

    const plainText = ''Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'';
    const content = ContentState.createFromText(plainText);

    this.state = { editorState: EditorState.createWithContent(content)};

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

Para importar contenido con estilo, Draft.js proporciona funciones de utilidad convertFromRaw y convertFromRaw .

La función convertFromRaw toma el objeto javascript sin formato como parámetro. Aquí, estamos utilizando un objeto JavaScript javascript JSON como fuente de contenido:

class MyEditor extends Component{

  constructor(props) {
    super(props);

    const rawJsText = `{
      "entityMap": {},
      "blocks": [
        {
          "key": "e4brl",
          "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
          "type": "unstyled",
          "depth": 0,
          "inlineStyleRanges": [
            {
              "offset": 0,
              "length": 11,
              "style": "BOLD"
            },
            {
              "offset": 28,
              "length": 29,
              "style": "BOLD"
            },
            {
              "offset": 12,
              "length": 15,
              "style": "ITALIC"
            },
            {
              "offset": 28,
              "length": 28,
              "style": "ITALIC"
            }
          ],
          "entityRanges": [],
          "data": {}
        },
        {
          "key": "3bflg",
          "text": "Aenean commodo ligula eget dolor.",
          "type": "unstyled",
          "depth": 0,
          "inlineStyleRanges": [],
          "entityRanges": [],
          "data": {}
        }
      ]
    }`;

    const content  = convertFromRaw(JSON.parse(rawJsText));
    this.state = { editorState: EditorState.createWithContent(content)};

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

Draft.js proporciona la función convertToRaw para que pueda convertir el estado de su editor a un objeto JavaScript sin procesar para el almacenamiento a largo plazo.

Y, por último, aquí cómo lo haces con el marcado HTML:

class MyEditor extends Component{

  constructor(props) {
    super(props);

    const html = `<p>Lorem ipsum <b>dolor</b> sit amet, <i>consectetuer adipiscing elit.</i></p>
      <p>Aenean commodo ligula eget dolor. <b><i>Aenean massa.</i></b></p>`;

      const blocksFromHTML = convertFromHTML(html);
      const content = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap
      );

    this.state = { editorState: EditorState.createWithContent(content)};

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

Answer 5

Puede usar convertFromHTML para importar html con createWithContent

import { convertFromHTML, ContentState } from ''draft-js''

const html = ''<div><p>hello</p></div>''
const blocksFromHTML = convertFromHTML(html)
const content = ContentState.createFromBlockArray(blocksFromHTML)
this.state = { 
  editorState: EditorState.createWithContent(content)
}

Como se muestra en el ejemplo de ConvertFromHtml de Draft. Tenga en cuenta que la versión 0.9.1 no puede importar imágenes, mientras que 0.10.0 puede.

En 0.10.0 createFromBlockArray cambia a:

const content = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
)

Answer 6

Cuando necesite iniciar un editor con texto sin formato.

Use los métodos EditorState.createWithContent y EditorState.createWithContent . Ejemplo de trabajo - https://jsfiddle.net/levsha/3m5780jc/

constructor(props) {
  super(props);

  const initialContent = ''Some text'';
  const editorState = EditorState.createWithContent(ContentState.createFromText(initialContent));

  this.state = {
    editorState
  };
}

Cuando necesite iniciar un editor con contenido de la cadena de marcado html.

Utilice convertFromHTML y convertFromHTML . Ejemplo de trabajo - https://jsfiddle.net/levsha/8aj4hjwh/

constructor(props) {
  super(props);

  const sampleMarkup = `
        <div>
        <h2>Title</h2>
        <i>some text</i>
      </div>
    `;

  const blocksFromHTML = convertFromHTML(sampleMarkup);
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
  );

  this.state = {
    editorState: EditorState.createWithContent(state),
  };
}

Cuando tiene una matriz de cadena y desea iniciar un editor con algunos de los tipos de bloque draft.js predeterminados.

Puede crear una matriz de ContentBlocks con el constructor new ContentBlock(...) y pasarla al método ContentState.createFromBlockArray . Ejemplo de trabajo con elemento unordered-list-item - https://jsfiddle.net/levsha/uy04se6r/

constructor(props) {
  super(props);
  const input = [''foo'', ''bar'', ''baz''];

  const contentBlocksArray = input.map(word => {
    return new ContentBlock({
      key: genKey(),
      type: ''unordered-list-item'',
      characterList: new List(Repeat(CharacterMetadata.create(), word.length)),
      text: word
    });
  });

  this.state = {
    editorState: EditorState.createWithContent(ContentState.createFromBlockArray(contentBlocksArray))
  };
}

Cuando necesite iniciar un editor con contenido de la estructura JS sin ContentState de ContentState .

Si previamente guardó el estado del contenido en la estructura JS sin convertToRaw con convertToRaw (lea esta respuesta para más detalles). Puede iniciar un editor con el método convertFromRaw . Ejemplo de trabajo - https://jsfiddle.net/levsha/tutc419a/

constructor(props) {
  super(props);

  this.state = {
    editorState: EditorState.createWithContent(convertFromRaw(JSON.parse(editorStateAsJSON)))
  };
}