draftjs如何使用内容启动编辑器

Question

偶然发现这个很酷的文本编辑器,facebook的draft.js.我尝试按照github中的示例,但我想创建一个内容编辑器而不是空编辑器.

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()})
   }
});

运行它,但我得到错误说"未捕获TypeError:contentState.getBlockMap不是一个函数"

Answer 1

EditorState.createWithContent的第一个参数是a ContentState,而不是字符串.您需要导入ContentState

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

使用ContentState.createFromText并将结果传递给EditorState.createWithContent.

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

Answer 2

我为DraftJS创建了一组包,以帮助导入和导出内容(HTML/Markdown).我在我的项目react-rte中使用了这些.您可能正在寻找的是:npm上的draft-js-import-html.

npm install draft-js-import-html

您可以如何使用它的示例:

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)
    };
  }
});

我发布的模块是:

• 草案-JS-进口HTML
• 草案-JS-出口HTML
• 草案-JS-进口降价
• 草案-JS-出口降价

Answer 3

为了清楚起见,已经有一些API更改,这些示例使用最新的API,即v0.10.0.

有很多方法,但基本上你有三个选项,取决于你是否要使用纯文本,样式文本或内容资源的HTML标记.

什么是纯文本,但对于样式文本,您需要使用序列化的javasript对象或html标记.

让我们从纯文本示例开始:

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}
      />
    )
  }
}

为了导入样式化内容,Draft.js提供convertFromRaw和convertFromHTML实用程序功能.

convertFromRaw函数将原始javascript对象作为参数.在这里,我们使用JSON字符串化javascript对象作为内容源:

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提供convertToRaw函数,以便您可以将编辑器的状态转换为原始javascript对象以进行长期存储.

最后,在这里你如何使用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 4

您可以使用convertFromHTML导入htmlcreateWithContent

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)
}

如Draft的convertFromHtml示例所示.请注意,0.9.1版本无法导入图像,而0.10.0可以.

在0.10.0 createFromBlockArray更改中:

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

Answer 5

当您需要启动纯文本编辑器时。

用途EditorState.createWithContent及ContentState.createFromText方法。工作示例 - https://jsfiddle.net/levsha/3m5780jc/

constructor(props) {
  super(props);

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

  this.state = {
    editorState
  };
}

当您需要使用 html 标记字符串中的内容启动编辑器时。

使用convertFromHTML和ContentState.createFromBlockArray. 工作示例 - 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),
  };
}

当您有一个字符串数组并且想要使用某些默认的 Draft.js 块类型启动编辑器时。

ContentBlocks您可以使用构造函数创建 s数组new ContentBlock(...)，并将其传递给ContentState.createFromBlockArray方法。工作示例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))
  };
}

当您需要使用ContentState原始 JS 结构的内容启动编辑器时。

如果您之前将内容状态保存到原始 JS 结构convertToRaw（请阅读此答案以了解详细信息）。您可以使用方法启动编辑器convertFromRaw。工作示例 - https://jsfiddle.net/levsha/tutc419a/

constructor(props) {
  super(props);

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