标签: draftjs

我正在构建一个基于 Draft-js 的扩展编辑器来添加脚注功能。在主编辑器中编写文本时，用户可以选择单击“添加脚注”，这会在当前选择处添加脚注标记（带有注释编号的徽章），并打开辅助编辑器，在其中编写文本笔记。

这一切都运行良好，只是如果您在内容块的最后添加注释，则不可能将光标放在脚注标记后面以继续在其后面书写。

注释由entity位于脚注标记位置的长度为 1 的 组成，它是一个字符“N”，我们在其上叠加了 a Chip，即 a CompositeDecorator。

我在Code Sandbox中重现了该问题，该问题仅关注标记（注释的文本内容没有问题）。尝试编写一些文本并在最后添加脚注标记，不可能将选择放在脚注标记之后并继续写入，如果将脚注标记放置在文本末尾之前，请注意这种情况。

任何帮助将不胜感激 ！！

我看到 jorgen 发布了一个具有非常相似问题的帖子，但我在那里找不到相关答案。

先感谢您。

我使用 Draft-js 来构建我的文本编辑器。

我想要做的是单击提交按钮，提交的文本应显示在右侧（如您所见，空白侧）

我正在调用 handleSubmit 函数将内容发布到服务器：

handleSubmit = e => {

        e.preventDefault();

        const query = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()));

        const payload = {
            query:query
        }

        axios({
            url:'http://localhost:9000/queries',
            method:'POST',
            data: payload
        })
        
    }

并检索内容：

getQueries(){
        axios.get("http://localhost:9000/queries")
        .then(response => {
            const data = response.data;
            this.setState({queries:data});
        })
    } 

我对如何使用convertFromRaw将内容转换为所需的文本感到有点困惑。

我应该在哪里调用该方法？

提前致谢

我使用draft-js-plugins。我在编辑器中同时使用了表情符号和提及插件。当我使用时，

convertToRaw(contentState)

要将我的内容数据保存到数据库中，它将显示一条错误消息。

immutable.js：1421未捕获的TypeError：无法读取未定义的属性“条目”

但是仅当我在内容中使用提及时才会出现此错误。它适用于纯文本和表情符号内容。请帮忙。

考虑在Web应用程序上使用Draft.js进行富文本编辑,然后使用Draft.js convertToRaw函数将输出转换为json对象并将其存储在数据库中.

如果富文本的使用者是反应原生移动应用程序,那么表示富文本的最佳方法是什么？

1. 是否有任何强大的工作或库迭代json对象并导出本机Text和Image组件？

2. 还有一些库将json对象导出为html:

   • https://github.com/sstur/draft-js-export-html

   • https://github.com/rkpasia/draft-js-exporter

然后可以使用webview组件表示导出的html .这是一种可靠的方法吗？

3. 另一种表示方式是将反应放在反应原生的webview中,并将Draft.js Editor与readOnly prop 一起使用.但我不知道该走哪条路!

我想在块后添加新行.我目前的功能是下一个:

   _insert_new_block(editorState) {
      const selection = editorState.getSelection();
      const newBlock = new ContentBlock({
         key: genKey(),
         type: 'unstyled',
         text: ' ',
         characterList: List()
      });
      const contentState = editorState.getCurrentContent();
      const new_block_map = contentState.getBlockMap().set(newBlock.key, newBlock);
      const newContentState = contentState.set('blockMap', new_block_map);
      const new_contentState = contentState.merge({
        blockMap: new_block_map,
        selectionBefore: selection.merge({
          anchorKey: newBlock.key,
          anchorOffset: 0,
          focusKey: newBlock.key,
          focusOffset: 0,
          isBackward: false
        }),
        selectionAfter: selection
      });
      return EditorState.push(
         editorState,
         new_contentState,
         'insert-fragment'
      );
   }

新内容插入到我的内容的末尾但是当我点击新创建的块时我收到此错误 -

getUpdatedSelectionState.js:38 Uncaught TypeError: Cannot read property 'get' of undefined

和错误所在的文件

'use strict';

var …

我按CTRL+B=>我要使所选文本加粗。

有用的链接：

• http://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html#content -说明什么keyBindingFn和handleKeyCommand做。

• https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html-冗长的示例。

• https://www.youtube.com/watch?v=0k9suXgCtTA-精彩的视频，介绍了如何添加按钮来切换粗体。

我定义了一个 blockRendererFn 回调来使用我自己定义的组件渲染一个块。但是如何使用现有内容构建编辑器？ContentBlock 的构造函数无法选择接受我的组件

我正在使用 Draft.js 插件Resizeable。

我正在尝试使用原始长宽比调整图像大小。

但是，对于下面的代码，当我使用鼠标按图像的下边缘调整大小时，光标发生了变化，但无法调整大小。它仅在左侧和右侧边缘效果良好。

const resizeablePlugin = createResizeablePlugin({
  vertical: 'relative',
  horizontal: 'relative'
});

codesandbox

看了源码，还是没明白是什么原因造成的。

我正在尝试将使用draft.js的富文本编辑器添加到react项目中。我已经能够添加它，并通过遵循他们的文档来处理键盘命令。我还添加了两个按钮来执行粗体和斜体，但是问题是，当单击按钮时，编辑器状态不会更改，并且不会添加内联样式，但是如果我选择文本并单击按钮，则样式为添加到该文本。我不明白我在哪里做错了。

import React, { Component } from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()};
        this.onChange = (editorState) => this.setState({editorState});
        this.handleKeyCommand = this.handleKeyCommand.bind(this);
    }

    handleKeyCommand(command, editorState) {
        const newState = RichUtils.handleKeyCommand(editorState, command);
        if (newState) {
            this.onChange(newState);
            return 'handled';
        }
        return 'not-handled';
    }

    _onBoldClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'BOLD'));
    }

    _onItalicClick() {
        this.onChange(RichUtils.toggleInlineStyle(
            this.state.editorState, 'ITALIC'));
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Text formatting using Draft.js</h1> …

我使用 Draft.js 编辑器来创建和更新帖子。请告诉我如何在 Draft.js 编辑器中渲染 HTML 文本。\n我尝试使用 renderHTML，但出现错误

\n

“\'editorState\' 未定义 no-undef”

\n

如果没有 renderHTML 函数，我会在编辑器中获取带有标签的 HTML。\n请告诉我，如何配置组件来呈现“正确的 HTML”？

这是清单：

import React, { Component } from \'react\';\nimport DatePicker from "react-datepicker";\nimport "react-datepicker/dist/react-datepicker.css";\nimport { EditorState, getCurrentContent, getPlainText, ContentState } from \'draft-js\';\nimport { Editor } from \'react-draft-wysiwyg\';\nimport \'../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css\';\nimport { stateToHTML } from \'draft-js-export-html\';\nimport gql from \'graphql-tag\';\nimport { Mutation } from \'react-apollo\';\nimport renderHTML from \'react-render-html\';\n\nconst updateMutation = gql`\n  mutation UpdateHeroMutation($id: ID!, $title: String!, $description: String!, $date: String!) {\n  updateHero(heroUpdate: {_id: $id, …