标签: draftjs

Draft.js 的 RichUtils.toggleInlineStyle 不能正常工作。请帮忙！我的代码在JSfiddle 上。

有什么误解吗？

var TextArea = React.createClass({
  ...
  toggleBlockStyle: function(blockType) {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType)); // don't work!
  },

  toggleInlineStyle: function(inlineStyle) {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)); // don't work!
  },

  handleClear: function() {
    this.onChange(EditorState.push(this.state.editorState, 
        ContentState.createFromText(''), 'remove-range')); // don't work!
  },
  ...
  render: function() {
    return (
      <div onClick={this.onFocus}>
        {this.renderButtons()}
        <Editor editorState={this.state.editorState}
          className={this.props.className}
          name={this.props.name} ref="editor"
          placeholder={this.props.placeholder}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
          spellCheck={true}
          stripPastedStyles={true}
          customStyleMap={myStyleMap}/>
      </div>);
   }
}

我正在尝试在我的应用程序中对富文本编辑器使用Draft-js，使用redux-form，我面临的问题是我无法从Draft-js将 initialValues 填充到编辑器中，我的代码如下所示

<form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>

  <Field
    name="websiteurl"
    placeholder="INSERT WEBSITE URL HERE"
    component={this.renderFieldText}
    mandatory='true'
  />

  <Field
    name="htmlcontent"
    placeholder="ENTER HTML CONTENT HERE"
    component={this.renderRichTextEditor}
  />
  <Button bsStyle="primary" type="submit" className="pull-right" loading={this.state.loading}>Save</Button>

</form>


renderRichTextEditor(field){
   return (
      <RichTextEditor placeholder={field.placeholder}/>
   );
}

renderFieldText(field){
      var divClassName=`form-group ${(field.meta.touched && field.meta.error)?'has-danger':''}`;
      divClassName = `${divClassName} ${field.bsClass}`;
      return(
        <div className={divClassName}>
        <input
        className="form-control"
        type={field.type}
        placeholder={field.placeholder}
        {...field.input}
        />
        </div>
      );
    }

我有两个字段websiteurl和htmlcontent，该组件websiteurl填充了初始值，但我不知道如何使用在RichTextEditor组件中实现的draft-js Editor 来做到这一点。

如果有人取得了这样的成就，请帮忙。

谢谢。

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

示例链接。

我正在尝试保存editorState到数据库并显示回编辑器。对于这件事，我遵循了这个答案

现在，当我尝试获取当前内容并使用 永久保存它时convertToRaw，它工作正常。但是当我尝试使用这些数据并将原始数据转换为contentState使用时convertFromRaw，出现以下错误：

未捕获的类型错误：contentState.getBlockMap 不是函数

editorState这是我从保存状态转换的代码：

{
    const convertedState = convertFromRaw(JSON.parse(value))
    const editorValue = EditorState.createWithContent(convertedState);
}

这样，它会在编辑器中显示数据，但是当我向富编辑器中输入内容时。它提示：

未捕获的类型错误：contentState.getBlockMap 不是函数

附：使用draft-js: '0.10.5'

我想将使用 Draft.js 和 React（在 UI 中）编辑的数据存储到 MySQL 数据库中。

我不确定应该以哪种格式存储数据，以便我可以从数据库中获取数据并将其显示在页面上，并在编写文本时应用格式？

例如 - 我对某些文本应用了粗体样式并给出了一些换行符。如何存储这些信息以供以后使用？

请建议一种存储我的数据的格式。

我正在尝试为 中的 blockType 设置自定义标签react-draft-wysiwyg。

根据此池请求， 我应该能够displayName向编辑器工具栏配置对象添加属性。

我尝试这样实现，但不幸的是它不起作用。

const documentEditorToolBarOptions = {
  options: [
    'blockType',
  ],
  blockType: {
    inDropdown: true,
    options: [
      'Normal',
      'H1',
      'H2',
      'H3',
      'H4',
      'H5',
      'H6',
      'Blockquote',
    ],
    displayNames: [
      { label: 'Normal', displayName: 'Normal', style: 'unstyled' },
      { label: 'H1', displayName: 'Heading 1', style: 'header-one' },
      { label: 'H2', displayName: 'Heading 2', style: 'header-two' },
      { label: 'H3', displayName: 'Heading 3', style: 'header-three' },
      { label: 'H4', displayName: 'Heading 4', style: 'header-four' …

我有一个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>);

        }
      }

我需要在工具栏部分添加自定义下拉菜单。

这里附上类似想要下拉菜单的图片，这可能吗？

<img src="https://i.imgur.com/OhYeFsL.png" alt="Dropdown menu editor">

在下面找到详细的图像

我使用了react-draft-wysiwyg内容编辑器。

https://github.com/jpuri/react-draft-wysiwyg

https://jpuri.github.io/react-draft-wysiwyg/#/d

在工具栏部分添加自定义下拉菜单。

我有一个简单的用例：有一个 DraftEditor 组件，该组件将value其作为道具并基于value（空或有内容）创建编辑器状态。可能value会被父级更改，当它更改时，我希望草稿编辑器也更新它的内容。这是我的DraftEditor组件。

import React, { useState } from "react";
import { Editor, EditorState, convertFromRaw } from "draft-js";

export default ({ value }) => {
  const initialState = value
    ? EditorState.createWithContent(convertFromRaw(JSON.parse(value)))
    : EditorState.createEmpty();
  const [editorState, setEditorState] = useState(initialState);

  return <Editor editorState={editorState} onChange={setEditorState} />;
};

问题：当value被父组件更新时，内容Editor没有得到更新。相反，它只显示初始化的内容。我发现的解决方法是setEditorState在value更改时手动调用，但我觉得这一步是不必要的，因为当组件重新渲染时，我希望编辑器也重新计算它的内部状态？可能是我在这里遗漏了什么？

知道为什么Editor不更新它的内部状态吗？

这是一个代码沙箱：https : //codesandbox.io/s/xenodochial-sanderson-i95vd? fontsize =14& hidenavigation =1& theme =dark

我一直在尝试让草案 js 提及插件与反应钩子一起工作，但似乎无法弄清楚代码有什么问题。感谢您对此的任何帮助。

import React, { useRef, useState, useEffect } from "react";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";
import createMentionPlugin, { defaultSuggestionsFilter } from "draft-js-mention-plugin";
import mentions from "./mentions";

export default function MentionEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [suggestions, setSuggestions] = useState(mentions);
  const editor = useRef(null);

  useEffect(() => {
    editor.current.focus();
  }, [])

  const mentionPlugin = createMentionPlugin();
  const { MentionSuggestions } = mentionPlugin;
  const plugins = [mentionPlugin];

  const onSearchChange = ({ value }) => { …