标签: draftjs

我已经在一个项目上实现了 Draft JS 作为一个简单的编辑器，但是我在设置无序列表的样式时遇到了麻烦，特别是更改项目符号的颜色以匹配文本颜色。

文档中似乎没有关于如何将样式应用于li包装unordered-list-item项目的信息。我可以选择文本并应用颜色，但这会产生如下所示的编辑器状态：

{
  "entityMap": {},
  "blocks": [
    {
      "key": "bcci",
      "text": "Heading",
      "type": "unstyled",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 7,
          "style": "red"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "28tv7",
      "text": "One",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 3,
          "style": "yellow"
        }
      ],
      "entityRanges": []
    },
    {
      "key": "85hig",
      "text": "Two",
      "type": "unordered-list-item",
      "depth": 0,
      "inlineStyleRanges": [
        {
          "offset": 0,
          "length": 3,
          "style": "red"
        }
      ], …

所以，我有一个由 Facebook 提供支持的 contenteditable div draft-js。我需要获得该 div 内插入符号的视觉位置，并且我实现了这个（适用于 Firefox 和 Chrome）：

const selection = window.getSelection && window.getSelection();
if (selection.rangeCount > 0) {
    const coordinates = selection.getRangeAt(0).getBoundingClientRect();
}

在 Chrome 和 Firefox 中我得到了正确的坐标。然而，在 Firefox 中，我的所有位置属性都为 0。有什么解决方法/跨浏览器解决方案吗？

我认为这是一个非常非常常见的请求，但我找不到任何东西可以帮助我解决它。我尝试过各种插件，例如draft-js-import-html和变体，但它们似乎从未完全起作用，特别是当您添加图像或嵌入视频时。

这是我想在编辑器中使用的示例 HTML：

var sampleMarkup = '<h1>Hello there</h1>' +
    '<b>Bold text</b>, <i>Italic text</i>, <u>Underline text</u><br/ ><br />' +
    '<a href="http://www.facebook.com">Example link</a>' +
    '<img src="http://vignette1.wikia.nocookie.net/elderscrolls/images/6/64/Imga.jpg/revision/latest?cb=20110501053300" />' +
    '<p>Hello there</p>' +
    '<div class="responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/POrFPyHGKyw" frameborder="0" allowfullscreen></iframe></div>';

它有一些基本的h1，bold ...以及图像和 iframe 以及带有包装器的 iframe，以使视频具有响应能力。

我想要的是有一个draft-js编辑器，我可以在其中放入 HTML（如上），并在更改时返回 HTML。

那么如果我从这个开始，我怎样才能给它 HTML 并取回 HTML 呢？

import React, { PropTypes, Component } from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState} from 'draft-js'

var sampleMarkup = '<h1>Hello there</h1>' +
    '<b>Bold …

这是该问题的代码笔示例。

我添加了一个名为 的自定义块类型section，它将所选文本包装为红色。当您单击section编辑工具栏中的时，它工作正常。但是，当用于convertFromHTML渲染初始内容时，

const sampleMarkup = '<b>Bold text</b><br/>Section Testing:<section>dsasdasad</section><br/><i>Italic text</i>';

编辑器仍然将section类型视为unstyle类型。是否convertFromHTML支持用于初始渲染的自定义块类型？有解决方案吗？

代码：

      const {Editor,convertFromHTML,ContentState, EditorState,DefaultDraftBlockRenderMap, RichUtils} = Draft;

      const blockRenderMap = Immutable.Map({
    'section': {
        element: 'section'
    }
});

     const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

      class RichEditorExample extends React.Component {
        constructor(props) {
          super(props);
          const sampleMarkup =
  '<b>Bold text</b><br/>Section Testing:<section>dsasdasad</section><br/><i>Italic text</i>';

          const blocksFromHTML = convertFromHTML(sampleMarkup);
          const state = ContentState.createFromBlockArray(
            blocksFromHTML.contentBlocks,
            blocksFromHTML.entityMap
          );

          this.state = {editorState: EditorState.createWithContent(state)};

          this.focus = () => this.refs.editor.focus();
          this.onChange …

我正在使用draft.js 进行表格支持（一层深）的hack

我有一个要求：所有现有的编辑器功能也需要在这个表中工作

我给你三个选择，请选择一个并解释你这样做的原因：

1. 嵌套编辑器（每个单元格一个） - 我猜我必须在编辑器之间实现选择处理
2. 表格单元格作为实体，包装在一个自定义块组件中，该组件呈现表格并管理列和行。- 开发它会很昂贵，因为我需要干扰很多事件处理和渲染。
3. 您认为还有其他方法可以更好地工作吗？

我想知道在键盘命令上完成文本插入后如何更改 Draft.js 中的光标位置。因此，我目前正在使用_handleKeyCommand(cmd)每当用户按下特定按钮时插入自定义文本块。接下来我尝试了以下操作：

currentState = this.state.editorState;
var selectionState = this.state.editorState.getSelection().getStartKey();
this.setState({editorState: EditorState.forceSelection(currentState, selectionState)});

但这一直崩溃并显示错误消息

类型错误：selection.getHasFocus 不是函数

虽然我进口了SelectionState. 那么如何正确更改光标位置（最好是插入之前的位置）以及我在这里做错了什么？

The problem:

I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an array of objects. Now I need to recreate the editorState with that data.

Example:

I have a plain text like this:

const content = '@marcello we need to add spell check'

And a mentions array with objects like this:

const mentions = [{
  length: 8,
  offset: 0,
  user: 'user:59441f5c37b1e209c300547d',
}] …

我使用以下命令在编辑器中插入一些文本：

_insertText(text) {
    const { editorState, onChange } = this.props
    const newContentState = Modifier.insertText(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      text
    )

    const newState = EditorState.createWithContent(newContentState)
    onChange(EditorState.acceptSelection(newState, editorState.getSelection()))
  }

但插入后，光标停留在插入点的锚位置。我想将其移动到插入文本的末尾，这样我就可以继续编辑而无需手动移动光标。

请帮忙。

我开始使用draft-js 中的装饰器，并且能够渲染在CompositeDecorator 中定义的组件。记录在案的行为效果很好。

也就是说，我试图弄清楚如何从这些组件中访问 editorState。contentState 是传入的唯一有用的道具，但据我所知，我无法从 contentState 解析 editorState。

我主要尝试做的是能够通过与呈现的组件本身交互来编辑或删除。即打开一个对话框来更改实体数据。在 dialogForm 的 onSave() 中，我需要推送新的 editorState，但截至目前，它不在范围内。

有没有办法在装饰器组件的范围内访问 editorState 或者有更智能的解决方案？

自定义内联工具栏，如其文档中所述，未按预期工作。即使添加了自定义按钮，它也会继续显示默认的内联工具栏。

我的代码如下。

import Editor from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import "draft-js-inline-toolbar-plugin/lib/plugin.css";
import createLinkPlugin from "draft-js-anchor-plugin";

const linkPlugin = createLinkPlugin(); // Adding link button.

const inlineToolbarPlugin = createInlineToolbarPlugin(
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
);

const { InlineToolbar } = inlineToolbarPlugin;

<Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    plugins={plugins}
    ref={element => {
        this.editor = element;
    }}
/>
<InlineToolbar />

版本如下。

• “反应”：“^ 16.4.1”
• Draft-js-plugins-editor": "^2.1.1"

提前致谢。