标签: react-draft-wysiwyg

我正在开发一个富文本编辑器，用于将纯 html 转换为带有 ssr 的下一个 js 的编辑器内容。我得到了这个错误窗口未定义所以我搜索了这个 github链接的解决方案

它使用了 next js 的动态导入功能。

而不是直接导入编辑器 import { Editor } from "react-draft-wysiwyg";

它使用此代码动态导入编辑器

const Editor = dynamic(
  () => {
    return import("react-draft-wysiwyg").then(mod => mod.Editor);
  },
  { ssr: false }
);

但是虽然我已经安装了这个 react-draft-wysiwyg 模块，但我仍然收到这个错误

ModuleParseError: Module parse failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
| import dynamic from "next/dynamic";
| var Editor = dynamic(function () {
>   return import("react-draft-wysiwyg").then(function (mod) {
|     return mod.Editor; …

根据我的问题，我想删除一些默认的工具栏选项，例如字体系列或表情符号，并仅保留文本样式选项。怎么做 ？

对于我的编辑来说。

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
    toolbar={{
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }}
/>

在获取内部的 API 响应后MenuItemDetail，我将其设置为responses状态，然后将其传递给 Tabs，然后传递给 TabContent。在这里，我想正确读取其 resp 和 name 属性，然后显示它们在两个相应编辑器中包含的任何内容，即 respEditor和nameEditor（resp以及name来自 API 的 json 中的字段）。

我可以从 API 中检索我的resp和name，但是当我尝试单击文本区域以添加或修改内容时，我得到了一个空白页面，并在控制台中收到此错误：

Uncaught TypeError: contentState.getBlockMap is not a function

我在论坛上检查过这个问题：DraftJS - contentState.getBlockMap is not a function

我真的真的不知道为什么

const TabContent = ({  onChange, resp, , status }) => {
  const [respEditor, setRespEditor] = useState(
    EditorState.createWithContent(convertFromHTML(resp !== null ? resp : ""))
  );

  function respChange(state) {
    setRespEditor(state);
    onChange({
      resp: …

我正在使用formik我的表格。我想react-draft-wysiwyg用formik来实现编辑器。但是，我在我的案例中发现了以下警告。

Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:

因此，我认为，如果存在验证问题，我将无法显示错误，并且如果我移至下一个表单并返回到已将内容放在编辑器上的表单，则状态也不会保留。

这是导致这些问题的警告还是我错过了一些重要的事情？

这是我尝试绑定的formik方式react-draft-wysiwyg

import React from "react";
import styled from "styled-components";
import { Editor } from "react-draft-wysiwyg";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";
import { EditorState, convertToRaw, ContentState } from "draft-js";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const EditorField = ({
  input,
  meta,
  field,
  form,
  label,
  placeholder,
  labelCss
}) => {
  const [active, setActive] = React.useState();
  const …

我确实使用react-draft-wysiwyg制作了一个简单的react应用程序，但我收到了警告。

import React from "react";
import ReactDOM from "react-dom";
import { Editor } from "react-draft-wysiwyg";
import "../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

ReactDOM.render(
  <React.StrictMode>
    <Editor />
  </React.StrictMode>,
  document.getElementById("root")
);

当我单击编辑器时，我会在控制台中收到此错误，但仅当我在严格模式下运行它时：

警告：无法对尚未安装的组件调用 setState。这是一个空操作，但它可能表明您的应用程序中存在错误。相反，直接分配this.state或在 r 组件中定义state = {}; 具有所需状态的类属性。

我确实为您制作了一个 codeSandbox： https: //codesandbox.io/s/strange-monad-lxtuu ?file=/src/index.js:0-295 尝试单击编辑器并查看控制台中的警告。我做错了什么？

我的数据库中有一个属性product_des，其中存储了所有内容react draft wysiwyg。我想从数据库中设置编辑器的默认值。

//State
    const [onEditorStateChange, setOnEditorStateChange] = useState<any>()
    const [content, setContent] = useState<any>()

<Editor
    editorState={onEditorStateChange}
    toolbarClassName="toolbarClassName"
    wrapperClassName="wrapperClassName"
    editorClassName="editorClassName"

    onEditorStateChange={newState => {
        setOnEditorStateChange(newState)
        setContent(draftToHtml(convertToRaw(newState.getCurrentContent())))
    }}
/>

这是我的数据库示例：

{
_id: "6231a09c0a292231f0bbd16b",
title: "Controller",
reg_price: "499",

product_des: "<p>PS5</p>
"
}

我正在尝试为 中的 blockType 设置自定义标签react-draft-wysiwyg。

根据此池请求， 我应该能够displayName向编辑器工具栏配置对象添加属性。

我尝试这样实现，但不幸的是它不起作用。

const documentEditorToolBarOptions = {
  options: [
    'blockType',
  ],
  blockType: {
    inDropdown: true,
    options: [
      'Normal',
      'H1',
      'H2',
      'H3',
      'H4',
      'H5',
      'H6',
      'Blockquote',
    ],
    displayNames: [
      { label: 'Normal', displayName: 'Normal', style: 'unstyled' },
      { label: 'H1', displayName: 'Heading 1', style: 'header-one' },
      { label: 'H2', displayName: 'Heading 2', style: 'header-two' },
      { label: 'H3', displayName: 'Heading 3', style: 'header-three' },
      { label: 'H4', displayName: 'Heading 4', style: 'header-four' …

我正在尝试学习如何使用 React-Final-Form （简称 RFF）。

我已经学会了如何使用<Field>组件，但现在我需要添加一个自定义组件来使用 RFF 未提供的所见即所得编辑器。

所以，我选择了react-draft-wysiwyg。

好的，首先这是我的表格：

const FormComponent = () => {

  const handleSubmitOnClick = () => ({
    news_title,
    news_subtitle,
    editor_content, 
    image_url,
  }) => {

    const data = {
      "user": {
        news_title: news_title,
        news_subtitle: news_subtitle,
        editor_content: editor_content <- here the content from the WYSIWYG editor
        image_url: image_url 
      }
    }

     // API call here .... 
  }

  return (
    <>
      <h1>News Main Page</h1>

      <Form 
        onSubmit={handleSubmitOnClick()}
      >
        {
          ({ 
            handleSubmit, 
            values, 
            submitting,
          }) => (
          <form onSubmit={handleSubmit} data-testid="form"> …

我正在使用 Draft-js 和 React-draft-wysiwyg 包来显示我的应用程序的电子邮件编辑器。我能够显示正确的内容，但面临图像问题。

当图像是输入 HTML 的一部分时，图像不会显示在编辑器中。请找到我的下面的示例代码。

import { Editor } from "react-draft-wysiwyg";

import {
  EditorState,
  ContentState,
  convertFromHTML
} from "draft-js";

const htmlContentFromServer =
            '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
            '<a href="https://www.facebook.com">Example link</a><br /><br/ >' +
            '<img src="https://raw.githubusercontent.com/facebook/draft-js/master/examples/draft-0-10-0/convertFromHTML/image.png" height="112" width="200" />';

this.state = {
      editorState: EditorState.createWithContent(
        ContentState.createFromBlockArray(
          convertFromHTML(
            htmlContentFromServer
          )
        )
      )
    };

<Editor
              editorState={this.state.editorState}
              wrapperClassName="c-react-draft"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
              spellCheck={true}
              wrapperId={this.props.wrapperId}
            />

我可以使用此解决方案https://codepen.io/Kiwka/pen/YNYgWa显示图像。

但上述解决方案仅在我使用“draft-js”包中的编辑器时才有效，但我想使用“react-draft-wysiwyg”中的编辑器，因为我获得了丰富的工具栏选项。

当图像是“react-draft-wysiwyg”编辑器中 HTML 内容的一部分时，需要帮助显示图像。

我是反应新手，我已经经历过，draftjs editor但是当我尝试使用代码时，边框没有显示。

这是编辑器的快照：

我的代码：

export default class App extends Component {
  render() {
    return (
      <Container>
        <Modal trigger={<Button>Show Content</Button>}>
          <Modal.Content>
            <Editor />
            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>
    );
  }
}

这里是整个代码：“ https://codesandbox.io/s/distracted-ritchie-s75re ”

尝试给出边框，但问题是当我写更多单词时，它会超出边框。任何人都可以帮我解决这个问题吗？