标签: draft-js-plugins

我有这样的错误与草案-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 { …

我正在学习 React：完全是新手。

如果我直接从 Draft.js 将 HTML 保存在 DB 中（或者它的变体总是基于它），然后在我的 React SPA 的视图页面中，我会通过我的 API 从 DB 检索 HTML：

问题：

• 我怎样才能呈现那个 HTML？

• 危险地SetInnerHTML？或者也许是其中之一（你有什么建议？）？

  • https://github.com/wrakky/react-html-parser
  • https://github.com/pveyes/htmr
  • https://github.com/remarkablemark/html-react-parser
  • https://github.com/utatti/react-render-html
  • https://github.com/aknuds1/html-to-react

• 我读过诸如“消毒”、“保护 HTML”之类的词。但是，怎么会有图书馆？

• 当我将它保存在 DB 中或之后，当我渲染它时，我需要保护来自 Draft-js 的 html 吗？

有没有办法用 DraftJS 或任何插件创建表格？

允许用户输入自定义 HTML（具有表格支持）的插件就足够了。

据我了解，插件可以呈现为表格，但我需要能够编辑表格，例如设置列数，在每个单元格中输入文本等。

如果行/列数需要在创建时指定并且之后无法编辑，则可以接受，只要单元格可以单独填充/更新即可。

我正在努力使实体样式以我希望使用draft-js的方式工作。我通过在自动完成组件中选择项目来将样式化的实体添加到输入中。当我选择一个时，它会起作用，但插入符号会留在实体中，直到我添加另一个角色为止。有没有一种方法可以将插入符号移动到实际实体之后而不添加空格？

我正在使用一个名为的库draft-js-autocomplete，如果需要的话，我不介意发出请求请求。

为了显示：

我试图在draft-js中使用提及插件与Browserify一起工作.这是因为我们的应用程序是使用Browserify构建的.

这是关于这个插件:https://www.draft-js-plugins.com/plugin/mention

在示例中,他们使用Webpack,并使用导入.

我用require.所以我的代码示例是:

var React       = require('react'),
    Draft       = require('draft-js'),
    Immutable   = require('immutable'),
    Editor      = require('draft-js-plugins-editor'),
    Mention     = require('draft-js-mention-plugin');

var mentionPlugin = Mention.createMentionPlugin();
var MentionSuggestions = mentionPlugin.MentionSuggestions;
var plugins = [mentionPlugin];

var Editor = React.createClass({
    // Code
});

我不使用ES6表示法.有人知道我做错了什么吗？

The problem:

I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an array of objects. Now I need to recreate the editorState with that data.

Example:

I have a plain text like this:

const content = '@marcello we need to add spell check'

And a mentions array with objects like this:

const mentions = [{
  length: 8,
  offset: 0,
  user: 'user:59441f5c37b1e209c300547d',
}] …

自定义内联工具栏，如其文档中所述，未按预期工作。即使添加了自定义按钮，它也会继续显示默认的内联工具栏。

我的代码如下。

import Editor from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import "draft-js-inline-toolbar-plugin/lib/plugin.css";
import createLinkPlugin from "draft-js-anchor-plugin";

const linkPlugin = createLinkPlugin(); // Adding link button.

const inlineToolbarPlugin = createInlineToolbarPlugin(
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
);

const { InlineToolbar } = inlineToolbarPlugin;

<Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    plugins={plugins}
    ref={element => {
        this.editor = element;
    }}
/>
<InlineToolbar />

版本如下。

• “反应”：“^ 16.4.1”
• Draft-js-plugins-editor": "^2.1.1"

提前致谢。

我确实使用react-draft-wysiwyg制作了一个简单的react应用程序，但我收到了警告。

import React from "react";
import ReactDOM from "react-dom";
import { Editor } from "react-draft-wysiwyg";
import "../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

ReactDOM.render(
  <React.StrictMode>
    <Editor />
  </React.StrictMode>,
  document.getElementById("root")
);

当我单击编辑器时，我会在控制台中收到此错误，但仅当我在严格模式下运行它时：

警告：无法对尚未安装的组件调用 setState。这是一个空操作，但它可能表明您的应用程序中存在错误。相反，直接分配this.state或在 r 组件中定义state = {}; 具有所需状态的类属性。

我确实为您制作了一个 codeSandbox： https: //codesandbox.io/s/strange-monad-lxtuu ?file=/src/index.js:0-295 尝试单击编辑器并查看控制台中的警告。我做错了什么？

您能帮我如何将其位置从下到上更改吗？我想在文本顶部而不是底部显示提及列表。关于表情符号列表的同样问题。

示例链接。

我有一个draft-js 丰富的编辑器。我所需要的只是突出显示一些我可以在数组中提供给它的单词。就像我可以向我的编辑器提供数组中的一些单词并基于某个类一样，它可以突出显示这些单词。

有关使用 Draft-js 执行相同操作的任何外部库的任何信息都会有所帮助

 import Editor from 'draft-js-plugins-editor';
 import { EditorState } from 'draft-js';

    class Child extends React.Component {
    constructor(props){
      super(props);
      this.state={
        editorState:EditorState.createEmpty()
      }
    }

    updateEditorState(editorState){
      this.setState(
        {editorState}
      );
    }

        render() {      
          return (<div className="editor-container"> 
          <Editor placeholder="Explore your way in..."
          editorState={this.state.editorState}
          onChange={this.updateEditorState.bind(this)}

          />

           </div>);

        }
      }