最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I convert html to draftjs? - Stack Overflow

programmeradmin1浏览0评论

I have tried basic packages but I don't seem to get whats going on,

Here is something that I tried;

const {
  convertFromHTML,
  ContentState
} = require('draft-js');
const htmlToDraft = require('html-to-draftjs');

const converter = () => {
    const sampleMarkup =
      '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
      '<a href=";>Example link</a>';

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

    console.log('state: ', state);
}

converter();

It was really clear on which library to use. I am getting weird looking outputs, what I expect looks something like this;

{
  "blocks": [
    {
      "depth": 0,
      "inlineStyleRanges": [
        {
          "length": 9,
          "style": "BOLD",
          "offset": 0
        },
        {
          "length": 12,
          "style": "ITALIC",
          "offset": 11
        }
      ],
      "entityRanges": [
        {
          "length": 12,
          "key": 0,
          "offset": 25
        }
      ],
      "data": {},
      "text": "Bold text, Italics text\n\nexample link ",
      "key": "9jc4q",
      "type": "unstyled"
    }
  ],
  "entityMap": {
    "0": {
      "type": "LINK",
      "mutability": "MUTABLE",
      "data": {
        "url": ";,
        "targetOption": "_blank"
      }
    }
  }
}

Any insights ? (code in server side )

I have tried basic packages but I don't seem to get whats going on,

Here is something that I tried;

const {
  convertFromHTML,
  ContentState
} = require('draft-js');
const htmlToDraft = require('html-to-draftjs');

const converter = () => {
    const sampleMarkup =
      '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
      '<a href="http://www.google.">Example link</a>';

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

    console.log('state: ', state);
}

converter();

It was really clear on which library to use. I am getting weird looking outputs, what I expect looks something like this;

{
  "blocks": [
    {
      "depth": 0,
      "inlineStyleRanges": [
        {
          "length": 9,
          "style": "BOLD",
          "offset": 0
        },
        {
          "length": 12,
          "style": "ITALIC",
          "offset": 11
        }
      ],
      "entityRanges": [
        {
          "length": 12,
          "key": 0,
          "offset": 25
        }
      ],
      "data": {},
      "text": "Bold text, Italics text\n\nexample link ",
      "key": "9jc4q",
      "type": "unstyled"
    }
  ],
  "entityMap": {
    "0": {
      "type": "LINK",
      "mutability": "MUTABLE",
      "data": {
        "url": "http://www.google.",
        "targetOption": "_blank"
      }
    }
  }
}

Any insights ? (code in server side )

Share Improve this question asked Sep 17, 2020 at 4:21 VPRVPR 1651 gold badge2 silver badges10 bronze badges 5
  • npmjs./package/html-to-draftjs – Makwana Prahlad Commented Sep 17, 2020 at 4:26
  • @MakwanaPrahlad Tried that, it giving me this output... EditorState { _immutable: Record { "allowUndo": true, "currentContent": ContentState { "entityMap": [object Object], "blockMap": OrderedMap { someObjects here } } – VPR Commented Sep 17, 2020 at 4:31
  • 1 @MakwanaPrahlad html-to-draftjs is giving me -> ReferenceError: window is not defined – VPR Commented Sep 17, 2020 at 4:34
  • Plz not use version 1.2.0 it has build issues. – Makwana Prahlad Commented Sep 17, 2020 at 4:35
  • @MakwanaPrahlad I'm using 1.5.0 – VPR Commented Sep 17, 2020 at 4:54
Add a ment  | 

2 Answers 2

Reset to default 3
const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.">Example link</a>';

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

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

I am following the code and my code is running fine. I don't have any problem, you can check by copying my code.

import htmlToDraft from 'html-to-draftjs';
import { ContentState, EditorState } from 'draft-js';


const htmlToDraftBlocks = (html) => {
 const blocksFromHtml = htmlToDraft(html);
 const { contentBlocks, entityMap } = blocksFromHtml;
 const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
 const editorState = EditorState.createWithContent(contentState);
 return editorState;
}


useEffect(()=>{
setEditorState(htmlToDraftBlocks("<p>Hello</p>"));
},[])
发布评论

评论列表(0)

  1. 暂无评论