标签: draftjs

我正在尝试创建一个简单的编辑器来编写故事情节。现在我可以在编辑器中显示 html 标记，其中粗体文本以粗体等显示。我也可以将 html 形式的数据发送到服务器，但我无法在编辑器中显示图像，也无法上传图像在编辑器中。我已经创建了它的代码和盒子。链接在这里

https://codesandbox.io/s/5w4rp50qkp

代码行有点大。这就是为什么我将代码发布在 codeandbox 中，您也可以在其中看到演示。

任何人都可以帮助我使这成为可能吗？

我的 redux 存储中有这些数据，我想在我的 react 组件中呈现这些数据。

{
"entityMap":{
      "0":{
           "type":"LINK",
           "mutability":"MUTABLE",
           "data":{"url":"www.google.co.in"}
          }
       },
"blocks":[
      {
        "key":"9k5h7",
         "text":"this is the link", 
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[],
         "entityRanges":[
             {
                "offset":12,
                "length":4,
                "key":0
             }
          ],
         "data":{}
       }
   ]
}

我成功地使用草稿编辑器创建了一个链接类型，并且能够将它存储在数据库中，并且在渲染它时我得到了除链接之外的整个文本。我的 redux 中有这个链接信息，即“实体映射”和“块”内的“entityRanges”，它告诉链接从哪个偏移量开始以及长度是多少。例如，在我的情况下，它是“这是链接”中的“链接”。

这是我用来从我的 redux 呈现上述 json 的代码：

render(){
     return(
            <div>

                {
                    var nn = abovejsonfromreduxstore;
                    var editorState = EditorState.createWithContent(convertFromRaw(JSON.parse(nn)));
               return (        
                      <div>
                          <pre>
                              <Editor 
                                  editorState={editorState}
                                  readOnly 
                               />
                          </pre>
                       </div>
                   </div>
               }

        </div>

        );

}

如何修改此呈现方法以使其也呈现链接实体？

我试图用 Modifier.insertText 创建一个新状态，第三个参数应该是 DraftInlineStyle

let ncs = Modifier.insertText(contentStates, selections, superscriptVar, ["BOLD"]);

这确实给了粗体，但是当我稍后尝试更改样式时，它不会改变。我发现这是因为 DraftInlineStyle 应该是一个构造函数。那么，如果我应该传递一个 DraftInlineStyle 构造函数，我该如何创建一个 DraftInlineStyle 构造函数呢？或者有没有其他方法可以做到这一点？

我正在尝试添加target="_blank"到 Draft.js 内容中的所有链接。我是这个库的新手，所以我最初的尝试是简单地遍历所有实体并识别LINK实体。然而，即使内容中有一个链接，实体地图也会变成空的。这是我的代码：

getHtml = () => {
    const contentState = this.state.editorState.getCurrentContent();

    // entityMap shows as empty
    const entityMap = contentState.getEntityMap();
    console.log('entityMap', JSON.stringify(entityMap, null, 4));

    // stateToHTML() exports the anchor tag with href, but not target="_blank"
    return stateToHTML(contentState);
};

如何遍历所有实体以及target="_blank"在找到 LINK 实体​​时如何插入？

PS 我使用的是 Draft.js 的 0.10.5 版。

因此，我插入的内容越多（在大约 20 个装饰器替换之后），我的 Draft-js 编辑器就会变得非常慢（hacky）。我猜测这种行为是由于装饰器使用正则表达式检查整个编辑器内容，并在每次状态更改时用表情符号组件替换匹配项。我还为正则表达式找到的每个匹配创建实体，我通过使用编辑器状态作为道具来装饰组件来实现这一点。有没有办法让它更快？这是我的装饰器：

       {
            strategy: emojiStrategy,
            component: decorateComponentWithProps(RenderEmoji, {
                getEditorState: this.getEditorState,
                setEditorState: this.onChange
            })
        }

这是我的表情符号策略：

function emojiRegexF(regex, contentBlock, callback, contentState) {
    const text = contentBlock.getText();
    let matchArr, start;

    while ((matchArr = regex.exec(text)) !== null) {
        start = matchArr.index;

        callback(start, start + matchArr[0].length);
    }
}
function emojiStrategy(contentBlock, callback, contentState) {
    emojiRegexF(EMOJI_REGEX, contentBlock, callback, contentState);
}

这是我的 RenderEmoji 组件：

const RenderEmoji = props => {
    const contentBlock = props.children[0].props.block;
    const emojiKey = contentBlock.getEntityAt(props.children[0].props.start);
    const emojiShortName = props.decoratedText;
    if (!emojiKey) …

我无法在我的 Nextjs 项目中导入 html-to-draftjs。如果我用以下命令导入它：

import htmlToDraft from "html-to-draftjs"

结果将是：

我尝试使用动态导入：

const htmlToDraft = dynamic(
  () => {
    return import("html-to-draftjs");
  },
  { ssr: false }
);

结果是：

我可以尝试其他导入方法吗？或者也许我可以使用任何替代的 htmltodraft 模块？谢谢你！

我正在尝试在我的项目中实现Facebook提供的"RichEditor"示例以下是代码:

import React from 'react;
import { Component } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { Map } from 'immutable';

'use strict';

const { Editor, EditorState, RichUtils } = Draft;

//rest of the code...

每当我尝试构建使用时webpack-dev-server,我都会收到以下错误.我检查了StackOverflow以查看是否有其他用户遇到了确切的错误.但是,找不到一个.

Module Build Failed: Duplicate Declaration "Editor"

'use strict';
> const { Editor, EditorState, RichUtils } = Draft;

export class ...{}

我哪里错了？

注意:我是ReactJS的新手.

我们有一个Figure装饰器，允许我们插入一个链接，您可以将鼠标悬停在该链接上以获得图像的预览。我们使用模态形式将此图像以及一些元数据（标题等）插入。这一切都很好。但是，我们还希望能够单击链接并弹出模式进行编辑。

Entity.replaceData()对于更新元数据非常有用，剩下的唯一问题就是来自模式的修饰文字。看来，实体对其装饰的内容一无所知。

我们如何查找和替换文本？有没有解决的办法？

（我尝试将“草稿”中的内容设置为任意单个字符，并让装饰器显示内容/标题（这很好），但是，当尝试删除图形时，“草稿”似乎跳过了内容并删除了之前的内容我猜这是由于文字长度不同所致。我认为将其设置为“ IMMUTABLE”可以解决此问题，但这无济于事。）

编辑：

这是我的装饰工：

function LinkedImageDecorator(props: Props) {
  Entity.mergeData(props.entityKey, { caption: "hello world" });

  const entity = Entity.get(props.entityKey);
  const data = entity.getData();
  return <LinkedImage data={data} text={props.children} offsetKey={props.offsetKey} />
}

function findLinkedImageEntities(contentBlock: ContentBlock, callback: EntityRangeCallback) {
  contentBlock.findEntityRanges((character) => {
    const entityKey = character.getEntity();
    return (
      entityKey != null &&
      Entity.get(entityKey).getType() === ENTITY_TYPE.IMAGE
    );
  }, callback);
}

export default {
  strategy: findLinkedImageEntities,
  component: LinkedImageDecorator,
  editable: false,
};

如您所见，我正在测试Entity.mergeData哪个最终将是我LinkedImage组件的回调（它将打开一个模式onClick。）因此，元数据很容易更新，我只需要能够更新传递的修饰文字即可。作为props.children。

我正在尝试编辑文本，然后检索它并在服务器端更新数据库

这是我正在使用的代码

constructor(props,context){
    super(props,context);
    this.handleOnClick = this.handleOnClick.bind(this);

    const processedHTML = DraftPasteProcessor.processHTML(this.props.rule.description.replace(/\n/g, "<br />"));
    const contentState = ContentState.createFromBlockArray(processedHTML); 
    var editorState = EditorState.createWithContent(contentState);
    var editorState = EditorState.moveFocusToEnd(editorState);
    this.state = {editorState: editorState};
    this.onChange = (editorState) => this.setState({editorState});
}



handleOnClick(event) {
   var text = this.state.editorState.getCurrentContent().getBlocksAsArray();
   var finalText;
   text.map((item) => {
   finalText = item.getText() + finalText});
   console.log(finalText)

  render(){

    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    <Editor
      editorState={this.state.editorState}
      onChange={this.onChange}
    />
    </Col>

     <Col smOffset={2} mdOffset={1}>
    <Button onClick = {this.handleOnClick()}>Update rule</Button>
    </Col>
    </div>
    );

}

但是我有一个问题，draftJs返回的文本不带\ n，所以我要保存格式错误的文本，有什么办法可以使文本带有换行符吗？

当将来自 word 或其他来源的文本粘贴到 Draftjs 时，格式随之而来，我尝试像这样剥离样式数据：

onChange={(newEditorState) => {
                        const raw = convertToRaw(newEditorState.getCurrentContent())
                        for (let i = 0; i < raw.blocks.length; i++){
                            raw.blocks[i].type = "unstyled"
                        }
                        let newContent = convertFromRaw(raw)
                        newEditorState
                        const newState = EditorState.push(state, newContent, "change-block-type")

                        setState(newState)
                    }} />

除了打字最终在输入时被反转之外，这很有效，这非常令人困惑。