标签: draft-js-plugins

我的 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>

        );

}

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

我需要在工具栏部分添加自定义下拉菜单。

这里附上类似想要下拉菜单的图片，这可能吗？

<img src="https://i.imgur.com/OhYeFsL.png" alt="Dropdown menu editor">

在下面找到详细的图像

我使用了react-draft-wysiwyg内容编辑器。

https://github.com/jpuri/react-draft-wysiwyg

https://jpuri.github.io/react-draft-wysiwyg/#/d

在工具栏部分添加自定义下拉菜单。

我一直在尝试让草案 js 提及插件与反应钩子一起工作，但似乎无法弄清楚代码有什么问题。感谢您对此的任何帮助。

import React, { useRef, useState, useEffect } from "react";
import { EditorState } from "draft-js";
import Editor from "draft-js-plugins-editor";
import createMentionPlugin, { defaultSuggestionsFilter } from "draft-js-mention-plugin";
import mentions from "./mentions";

export default function MentionEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [suggestions, setSuggestions] = useState(mentions);
  const editor = useRef(null);

  useEffect(() => {
    editor.current.focus();
  }, [])

  const mentionPlugin = createMentionPlugin();
  const { MentionSuggestions } = mentionPlugin;
  const plugins = [mentionPlugin];

  const onSearchChange = ({ value }) => { …

使用 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({ …

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

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

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

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

codesandbox

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

我正在使用React Draft Wysiwyg，我需要将应用程序的一个组件中的任意文本插入到编辑器组件中。我通过剪贴板作为从一个组件传输到另一个组件的中介来执行此操作。但是document.execCommand('paste')失败了。

有人知道怎么做这个吗？

我的示例代码在这里；第三个控制台日志为粘贴结果发出 false。

import React, { Component } from 'react';
import { EditorState, convertToRaw, Modifier } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import styled from 'styled-components';

class EditorConvertToHTML extends Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
    this.setEditor = (editor) => {
      this.editor = editor;
    };
    this.focusEditor = () => {
      if (this.editor) {
        this.editor.focusEditor(); …