标签: draftjs

偶然发现这个很酷的文本编辑器,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不是一个函数"

我想坚持draft-js的EditorContent数据库,然后再次读取并重新创建EditorContent对象.但EditorContent.getPlainText()剥去了丰富的文字内容.我不知道怎么做.

我该如何正确坚持EditorContent？

我想在我的项目中使用draft.js.它有自己的CSS,我也需要导入.在文档中说:

渲染编辑器时应包含此CSS,因为这些样式设置了文本对齐,间距和其他重要功能的默认值.

1. 如何在渲染组件时包含Draft.css？我是否将其包含在我的主index.html中？
2. 还如何给一个id到编辑器,这样我可以设置样式(例如border,padding,min-height等)

我一直在玩Facebook的draft-js,但我实际上无法弄清楚如何获得编辑器的html输出.以下示例中的console.log输出一些_map属性,但它们似乎不包含我的实际内容？

class ContentContainer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          editorState: EditorState.createEmpty()
        };
        this.onChange = (editorState) => this.setState({editorState});
        this.createContent = this.createContent.bind(this);
      }

      createContent() {
        console.log(this.state.editorState.getCurrentContent());
      }

      render() {
        const {editorState} = this.state;
        const { content } = this.props;
        return (
          <Template>
            <br /><br /><br />
            <ContentList content={content} />
            <div className="content__editor">
              <Editor editorState={editorState} onChange={this.onChange} ref="content"/>
            </div>
            <FormButton text="Create" onClick={this.createContent.bind(this)} />
          </Template>
        );
      }
    }

我想实现像标签编辑器这样的东西.但是,它仅仅意味着那些标签,所以我希望用户看到自动完成建议弹出窗口而不必输入类似@或#的内容,只需要文本本身.

我有一些有用的东西,但弹出窗口显示在屏幕上的奇怪位置:

• 当我第一次输入内容并弹出窗口时,它出现在屏幕左上角附近
• 在创建第一个实体后,当按下SPACE并再次开始输入时,弹出窗口会从它的直观位置(即在单词的第一个字母下方)右侧出现几个像素

这是一个众所周知的编辑器的例子(虽然没有用草稿实现),所以你可以更好地理解我想要实现的内容.

首先,这是触发建议弹出窗口的函数:

private onChange(editorState: EditorState) {
  const content = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  const currentBlock = content.getBlockForKey(selection.getAnchorKey());

  if (selection.isCollapsed()) {
    const blockText = currentBlock.getText();
    const wordMeta = getWordAt(blockText, selection.getAnchorOffset());
    const categoryRegex = /([\w]*)/;
    const matches = wordMeta.word.match(categoryRegex);
    const existingEntity = currentBlock.getEntityAt(wordMeta.begin);

    if (!existingEntity && matches) {
      const categorySearch = matches[1];
      const selection = window.getSelection();
      if (this.state.autoComplete.search !== categorySearch && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0); …

我有这样的错误与草案-JS与草案-JS-插件编辑器

奇怪的行为:它只会发生,当我在写完后重新聚焦到第一行编辑器时,试图设置为例如.第一行的标题为H1,它改变了之前的焦点线

错误: Uncaught TypeError: Cannot read property 'getIn' of undefined

完全错误:

Uncaught TypeError: Cannot read property 'getIn' of undefined
    at getUpdatedSelectionState (getUpdatedSelectionState.js?a009439:34)
    at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js?a009439:37)
    at getDraftEditorSelection (getDraftEditorSelection.js?a7f8e9b:35)
    at editOnSelect (editOnSelect.js?a7f8e9b:32)
    at DraftEditor.react.js?f8ee1ff:148
    at HTMLUnknownElement.callCallback (react-dom.development.js?5f39724:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?5f39724:581)
    at Object.invokeGuardedCallback (react-dom.development.js?5f39724:438)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?5f39724:452)
    at executeDispatch (react-dom.development.js?5f39724:836)

这是我的组成部分:

/* eslint-disable react/no-multi-comp */
import React, {Component} from 'react';
import sv from '../../config/styleVariables'

import Editor from 'draft-js-plugins-editor';
import {EditorState,convertToRaw} from 'draft-js'
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import { …

我在Draft-js上看到的所有演示(由Facebook构建,基于React)都没有显示如何在提交后清除输入字段.例如,请参阅从awesome-draft-js链接到的代码笔,其中您提交的值在提交后仍保留在输入字段中.api中似乎没有任何 功能可以实现.我所做的就是在按钮提交上创建一个新的空状态,就像这样

onSubmit(){
this.setState({
   editorState: EditorState.createEmpty(),
})
}

但是,因为我在编译器加载时在构造函数中创建一个空状态

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

我担心我可能不会以正确的方式执行此操作,即先前的状态对象可能会成为内存泄漏.问题:在上述情况下重置状态的预期方法是什么(即按钮提交)

伙计们!请帮忙.

我想要的:当从新行开始时,用户键入URL并按下Enter我想要删除包含URL的块并将其替换为自定义Entity.很像文档中的Media示例,但没有Add image按钮.

我尝试了什么:(只是草稿)

var mediaBlockRenderer = function(block) {
    if (block.getType() === 'atomic') {
        return {
            component: TestComponent,
            editable: false
        };
    }
    return null;
};

var TestComponent = function() {
    return <div className="test-component">TEST COMPONENT</div>;
};

onChange: function(editorState) {
        var currentKey = editorState.getSelection().getStartKey();
        var content = editorState.getCurrentContent();
        var selection = content.getSelectionBefore();
        var beforeKey = content.getKeyBefore(currentKey);
        var block = content.getBlockForKey(beforeKey);

        if (block && block.getText() === 'test') {
            console.log(block.getText());
            var len = block.getCharacterList().size;

            var newSelection …

嗨,我正在尝试在reactJS项目中使用react-rte.我有服务器端渲染,每次我想使用这个包我得到:

return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                               ^
ReferenceError: window is not defined

我想问题可能是同构工具,但我不知道如何将包导入到已经定义窗口的客户端.

我想知道如何在Draft.js中对齐文本,如下图所示.

我已经搜索了几天,但我还没有找到解决方案.