标签: draftjs

我正在使用react-draft-wysiwyg 编辑器，它构建在Draft.js 之上。我试图弄清楚如何以编程方式插入 HTML，例如：

<h1>Hey</h1>

到目前为止，我得到的最接近的是使用 Modifier 模块的 insertText() 方法。例子：

insert = ()=>{
  const editorState = this.state.editorState;

  const selection = editorState.getSelection();

  const contentState = editorState.getCurrentContent();

  const ncs = Modifier.insertText(contentState, selection, "<h1>Hey</h1>",);

  const es = EditorState.push(editorState, ncs, 'insert-fragment');

  this.setState({editorState: es})
}

这会导致插入文字字符串，而不是 HTML H1 元素。

如何做呢？

我正在尝试使用 DraftJS 创建一个编辑器，它将编辑器字段中的关联值呈现给 guid，这些值将包含在编辑器的实际字符串值中。我遇到的问题是，当我尝试在装饰器中渲染关联值而不是实际值时，编辑器开始表现得很奇怪。

示例：如果我在商店中有一个带有guid:1234和 的对象value:"example value"，如果编辑器的值为hi there {1234}我希望它通过 guid 查找对象的名称并渲染hi there <span>example value</span>..但是当我让装饰器渲染包含名称的范围时与正则表达式匹配的 GUID 的编辑器焦点开始向后跳跃。我注意到在装饰器中不渲染 {props.children} 是导致此问题的唯一原因。

这是我尝试过的...

/*This doesn't work: 
Rendering {tokenName} causes the Editor's focus to jump backwards 
when the new <span> gets inserted
*/

const TokenSpan = (props) => {
    let tokenGuid = props.decoratedText;
    let tokenName = getTokenNameById(tokenGuid);
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {tokenName}
        </span>
    );
};

/* This does work, but I don't want to render …

我正在尝试实现一个按钮，单击它后将内联样式更改为粗体。我想使用 React Hooks 来实现这个例子。

单击按钮后，RichUtils 正在执行，但不会将文本更改为粗体。我缺少什么？

import React, { useEffect, useRef, useState } from 'react';
import {Editor, EditorState, RichUtils}       from 'draft-js';

const MyEditor = () => {

    const [editorState, setEditorState] = useState(EditorState.createEmpty());
    const editor                        = useRef(null);

    const focusEditor = () => {

        editor.current.focus();

    }

    const boldText = () => {

        let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD');

        setEditorState(nextState);

    }

    return (
        <div onClick = {focusEditor}>
            <button onClick = { () => boldText()}>Bold</button>
            <Editor
                ref = {editor}
                editorState = {editorState}
                onChange = …

我正在使用Draftjs创建一个富文本编辑器。这是最小的代码和框，以便您了解问题所在。

所以我有一个辅助函数getCurrentTextSelection，它返回我正在选择的文本：

const getCurrentTextSelection = (editorState: EditorState): string => {
  const selectionState = editorState.getSelection();
  const anchorKey = selectionState.getAnchorKey();
  const currentContent = editorState.getCurrentContent();
  const currentContentBlock = currentContent.getBlockForKey(anchorKey);
  const start = selectionState.getStartOffset();
  const end = selectionState.getEndOffset();
  const selectedText = currentContentBlock.getText().slice(start, end);

  return selectedText;
};

当我在文本编辑器外部单击时，焦点会丢失，因此不会选择文本（但保留 的选定文本editorState）。

是否有一种编程方式可以使用 重新选择此文本editorState？这样，当您单击该Select text again按钮时，文本编辑器中的文本就会被选中。

我在草稿js中Invariant Violation: block is not a BlockNode使用时得到了。convertToRaw

不幸的是，它在代码沙箱中运行良好，但在本地运行不佳，这使我很难调试问题： https: //codesandbox.io/s/vibrant-ramanujan-c6h4u ?file=/src/App.js:0- 1194

在我的本地抛出错误的行是：

const v2 = convertToRaw(v1);

这是完整的代码：

import { useState, useRef } from "react";
import { Editor, createEditorState } from "medium-draft";
import Button from "@material-ui/core/Button";
import { convertToRaw } from "draft-js";

export default function PostEditor() {
  const [editorState, setEditorState] = useState(createEditorState());

  //update medium editor
  const changeEditor = (editorState) => {
    setEditorState(editorState);
  };
  const editorRef = useRef();
  const handleSubmit = async (event) => {
    console.log(editorState.getCurrentContent());
    const v1 …

当用户键入转义键时,我想取消输入并清除我的应用中的字段.我们尝试在keyBindingFn中测试e.which === 27,但是当按下转义键时甚至不会调用该函数(对于普通键,修改键和箭头键,它被调用得很好).如何在draft.js中检测到Escape按键？

我正在阅读draftjs文档,在很多地方,'block'这个词可以互换使用.例如:

在编辑器中,一些块类型被赋予默认的CSS样式,以限制使工程师启动并运行自定义编辑器所需的基本配置量.

我试图准确理解这个块在粒度级别的含义,它是一段文本,还是整个editorState？

从官方文档中我了解了两种方法:通过其键获取实体并获取最后创建的实体.在我的例子中,我还需要一种方法来访问当前ContentState中的所有实体.有没有什么方法可以执行此操作？如果没有,是否有一个可以提供所有实体密钥？谢谢

如何添加链接？我知道如何将链接添加到选择

          const contentState = editorState.getCurrentContent();
          const contentStateWithEntity = contentState.createEntity(
            'LINK',
            'MUTABLE',
            {url: urlValue}
          );
          const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
          const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });
          this.setState({
            editorState: RichUtils.toggleLink(
              newEditorState,
              newEditorState.getSelection(),
              entityKey
            )}

我们得到选择newEditorState.getSelection()并添加链接。

但是如何添加链接而不选择呢？a如果未选择文本，仅添加带有文本的新标签？如果我不选择任何文本，则不会添加任何内容。

我有一个大型应用程序，我正在使用 Next.js 构建用于 SEO 和性能目的，并且该应用程序的一个超级交互部分需要文本编辑器（例如 Quill.js 或 Draft.js），其中的数据位于使用 Socket.io 在两个用户之间同步。

问题是我无法让文本编辑器与 Next.js 一起工作。

当我导入 Quill 时，它显示“文档未定义”，因为服务器上没有文档。使用 Draft.js，它根本不渲染任何东西，但没有错误。

这是我的 Draft.js 代码：

import { EditorState, convertToRaw, convertFromRaw } from 'draft-js'


class TextEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createWithContent(convertFromRaw(props.contentState))
    }
  }
  static async getInitialProps ({ query, req }) {
    return { contentState: convertToRaw(EditorState.createEmpty().getCurrentContent()) }
  }
  render() {
    console.log('init',this.props.editorState);
    return (
      <div>
        <h1>Test Editor</h1>
        <Editor
          editorState={ this.props.editorState }
        />
      </div>
    );
  }
}

有什么帮助吗？