标签: draftjs

如何获得 Draft.js 中的插入符号位置？我想你可以从选择状态中获取块，然后获取块数组并查看块数组位于哪个位置，但我不确定这是一种可靠的方法，甚至是最好的方法。

如何确保draft-jsUI 上的唯一文本框在页面加载时自动聚焦？

有一个称为 的文档化方法focus，但是我不确定实现所需的语法。

使用 DraftJS 和 Meteor Js 应用程序所涉及的代码任务 - 进行实时预览，其中来自 DraftJS 的文本将被保存到 DB 并从 DB 显示在另一个组件上。

但问题是一旦数据来自数据库，我尝试编辑 DraftJS 光标移动到开头。

代码是

import {Editor, EditorState, ContentState} from 'draft-js';
import React, { Component } from 'react';
import { TestDB } from '../api/yaml-component.js';
import { createContainer } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';

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

  componentWillReceiveProps(nextProps) {
    console.log('Receiving Props');
    if (!nextProps) return;
    console.log(nextProps);
    let j = nextProps.testDB[0];
    let c = ContentState.createFromText(j.text);
    this.setState({ …

我决定在这里提出这个问题。我使用 mysql 作为数据库作为存储，并希望将 Draft-js 添加到我现在正在构建的网页中。获取和保存数据到数据库的正确方法是什么？任何工作示例都会很棒！

我如何检查空编辑器中是否有空格？当编辑器中有空格时，我不想提交表单。我正在使用这个功能来检测编辑器是否为空，但它没有检测到编辑器是否有空格

contentState.hasText()

如您所见，光标位于粗体字符内，因此下一个字符也将是粗体。编辑器注意到它并激活了工具栏上的粗体按钮。

如何在draft.js中检查光标下的样式，就像上面的那样？

在 Draft-JS 中，我想要一个基本的自定义块，渲染一个<h1>元素。我想在 my 之前添加一些h1用户无法编辑的文本。此处的文本是为了通知人们此块是用于 Title 的。所以我想在不可编辑的块前添加“TITLE”。

在 Draft JS 中实现这一目标的最佳方法是什么？

编辑器开始时就好像它有空字符串一样！

我试过这个：

EditorState.createWithContent(ContentState.createFromText('Hello'))

和这个：

const html = '<p>Hey this <strong>editor</strong> rocks </p>';
const contentBlock = htmlToDraft(html);
if (contentBlock) {
  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
  const editorState = EditorState.createWithContent(contentState);
  this.state = {
    editorState,
  };
}

和这个：

import htmlToDraft from 'html-to-draftjs'
htmlToDraft(text)

没有任何效果！

我使用draft-js 在Web 应用程序中显示编辑器。但是我在草稿编辑器中显示文件上传选项时遇到问题。

这是一个屏幕截图：

这是编辑器在他们的演示中的显示方式

您可以在此处查看演示https://jpuri.github.io/react-draft-wysiwyg/#/

请检查下面的代码并提出解决方案：

import React, { Component } from 'react';
import logo from './logo.svg';

import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';


class App extends Component {

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

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div className="App">
        <header className="App-header">

         <Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
toolbar={{
    inline: …

我正在使用 Draft-js 和 React-draft-wysiwyg 包来显示我的应用程序的电子邮件编辑器。我能够显示正确的内容，但面临图像问题。

当图像是输入 HTML 的一部分时，图像不会显示在编辑器中。请找到我的下面的示例代码。

import { Editor } from "react-draft-wysiwyg";

import {
  EditorState,
  ContentState,
  convertFromHTML
} from "draft-js";

const htmlContentFromServer =
            '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
            '<a href="https://www.facebook.com">Example link</a><br /><br/ >' +
            '<img src="https://raw.githubusercontent.com/facebook/draft-js/master/examples/draft-0-10-0/convertFromHTML/image.png" height="112" width="200" />';

this.state = {
      editorState: EditorState.createWithContent(
        ContentState.createFromBlockArray(
          convertFromHTML(
            htmlContentFromServer
          )
        )
      )
    };

<Editor
              editorState={this.state.editorState}
              wrapperClassName="c-react-draft"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
              spellCheck={true}
              wrapperId={this.props.wrapperId}
            />

我可以使用此解决方案https://codepen.io/Kiwka/pen/YNYgWa显示图像。

但上述解决方案仅在我使用“draft-js”包中的编辑器时才有效，但我想使用“react-draft-wysiwyg”中的编辑器，因为我获得了丰富的工具栏选项。

当图像是“react-draft-wysiwyg”编辑器中 HTML 内容的一部分时，需要帮助显示图像。