javascript - script - html5 custom attributes

Proyecto de js. Persistir EditorContenido a la base de datos

Question

Estoy tratando de EditorContent el EditorContent draft-js en la base de datos y luego leer y volver a crear el objeto EditorContent de nuevo. Pero EditorContent.getPlainText() elimina el contenido de texto enriquecido. No sé cómo hacerlo.

¿Cómo puedo persistir correctamente EditorContent ?

Answer 1

Aquí hay un montón de respuestas útiles, así que quiero agregar esta demostración de jsfiddle . Muestra cómo funciona en acción. Para guardar y recuperar el contenido del editor, aquí se utiliza el local storage . Pero para el caso de la base de datos, el principio básico de la misma.

En esta demostración, puede ver el componente del editor simple, al hacer clic en SAVE RAW CONTENT TO LOCAL STORAGE , guardamos el contenido del editor actual como una cadena para el almacenamiento local. Usamos convertToRaw y JSON.stringify para ello:

 saveRaw = () => {
  var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());

  localStorage.setItem(''draftRaw'', JSON.stringify(contentRaw));
}

Si después de eso vuelve a cargar la página, su editor se inicializará con el contenido y los estilos que guarda. En el constructor leemos la propiedad de almacenamiento local apropiada y con los JSON.parse , convertFromRaw y convertFromRaw inicializamos el editor con el contenido almacenado previamente.

constructor(props) {
  super(props);

  let initialEditorState = null;
  const storeRaw = localStorage.getItem(''draftRaw'');

  if (storeRaw) {
    const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
    initialEditorState = EditorState.createWithContent(rawContentFromStore);
  } else {
    initialEditorState = EditorState.createEmpty();
  }

  this.state = {
    editorState: initialEditorState
  };
}

Answer 2

Descubrí que debo stringify y parse el objeto RawContentState al leer y guardar en la base de datos.

import { convertFromRaw, convertToRaw } from ''draft-js'';

// the raw state, stringified
const rawDraftContentState = JSON.stringify( convertToRaw(this.state.editorState.getCurrentContent()) );
// convert the raw state back to a useable ContentState object
const contentState = convertFromRaw( JSON.parse( rawDraftContentState) );

Answer 3

El método getPlainText() , como sugiere su nombre, solo devuelve el texto sin formato sin ningún formato enriquecido. Debe utilizar las funciones convertToRaw () y convertFromRaw () para serializar y deserializar los contenidos del editor.

Puede importarlos de esta manera si es necesario: (asumiendo que está usando ES6)

import {convertFromRaw, convertToRaw} from ''draft-js'';

Si necesita exportar HTML en su lugar, consulte https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#9260 (aunque no está seguro de que pueda volver a importar el contenido desde HTML) )

Answer 4

Persistir

const contentStateJsObject = ContentState.toJS();
const contentStateJsonString = JSON.stringify(contentStateJS);

ahora el estado del contenido puede ser persistido como cadena JSON.

Para recrear ContentState

const jsObject = JSON.parse(jsonString);
const contentState = new ContentState(jsObject);