在react中，如何使用draft-js来进行更新/编辑？
在React中使用Draft.js进行更新/编辑，可以按照以下步骤进行：
- 首先，确保你已经安装了Draft.js和React相关的依赖包。可以使用npm或者yarn进行安装。
- 在React组件中导入所需的依赖：import React, { useState } from 'react'; import { Editor, EditorState, ContentState } from 'draft-js'; import 'draft-js/dist/Draft.css';
- 在组件中创建一个状态变量来存储编辑器的状态：const [editorState, setEditorState] = useState(() => EditorState.createEmpty() );
- 创建一个处理编辑器内容变化的函数：const handleEditorChange = (newEditorState) => { setEditorState(newEditorState); };
- 在组件的render方法中，使用Editor组件来渲染编辑器：return ( <div> <Editor editorState={editorState} onChange={handleEditorChange} /> </div> );
通过以上步骤，你就可以在React中使用Draft.js进行更新/编辑了。当编辑器内容发生变化时，会触发handleEditorChange函数并更新editorState的状态。你可以根据需要对editorState进行处理，例如获取编辑器内容、应用样式等。
Draft.js是一个强大的富文本编辑器框架，适用于各种编辑需求，例如博客编辑器、评论框等。它提供了丰富的API和插件系统，可以轻松扩展功能。腾讯云没有直接相关的产品，但你可以将Draft.js与腾讯云的其他产品结合使用，例如存储服务、服务器运维等，以满足你的具体需求。
相关·内容
2回答
我正在开发一个用创建的React。工作良好，现在我想实现一个html文本编辑器。为此，我选择了。我遇到了两个问题：
将Editor和EditorState添加到组件中：
import {Editor} from 'react-draft-wysiwyg'; import {EditorState} from 'draft-js';
汇总无法解析所需的编辑器和EditorState类。它给出了错误的名称-不是逐个输出模块‘。在并尝试之后，我将这些行添加到rollup.config.js中，从而解决了这个问题：
commonjs({
na
浏览 0提问于2018-06-25得票数 4
从draft-js文档中，可以(在vanilla React中，没有typescript)设置Draft-js环境，注意onChange属性可以直接在构造函数中声明：
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
浏览 2提问于2016-05-18得票数 21
回答已采纳
我在我的表单中使用draft js来呈现富文本编辑器。有人能帮我弄清楚如何在我的数据库中保存的编辑器上显示状态的值吗？
这就是我到目前为止所知道的：
import { convertFromRaw, EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../react-draft-wysiwyg.css';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.cs
浏览 56提问于2018-08-09得票数 0
缺少react-draft-wysiwyg编辑框。如何为编辑器输入字段绘制一个框？
import React, { Component, Fragment } from 'react';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../../node_modules/react-draft-
浏览 7提问于2020-06-13得票数 2
我有这个react组件，它必须抽象draft-js编辑器。我的redux商店将有这个description字段，它必须是一个常规的超文本标记语言字符串。编辑器应该能够获取draftjs HTML字符串，并将其解析为自己的内部内容( value内容)。当改变内容时，它应该用最终的onChange内容触发HTML。换句话说，它对外部世界应该是透明的，这个组件内部发生了什么。
现在，我的组件看起来像这样：
import PropTypes from 'prop-types'
import React, { Component } from 'react'
impo
浏览 24提问于2017-06-29得票数 1
2回答
我正在尝试将与结合使用。
package.json依赖关系
...
"dependencies": {
"draft-js": "^0.9.1",
"immutable": "^3.8.1",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"flow-bin": "^0.37.4"
}
我通过运行安
浏览 4提问于2017-01-07得票数 1
我正在使用draftjs富文本编辑器将我的文本输入保存到本地存储中。现在，我的程序能够接受文本输入，当我单击“保存”时，它会将文本输入保存到本地存储中。代码：
import React from "react";
import { Editor, EditorState, convertToRaw } from "draft-js";
class SaveData extends React.Component {
constructor(props) {
super(props);
this.state = { editorState:
浏览 2提问于2020-05-05得票数 0
我正在使用Reactjs和draftjs库来创建富文本编辑器。我想要自动大写句子的第一个字母。
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorS
浏览 2提问于2017-12-05得票数 1
我有问题的drafjs插件，这是编辑器，事情是它跳到文本的开头时，我在编辑器中键入。我已经找到了How to stop DraftJS cursor jumping to beginning of text?这个解决方案，但它与我的代码中有一点不同，另外我还制作了具有React Hooks新功能的组件。你能帮我解决这个问题吗？ import {
EditorState, ContentState, convertToRaw,
} from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
imp
浏览 10提问于2019-01-16得票数 3
1回答
无法在编辑器中显示图像
、、、
我正在使用草案-js和反应-草案-wysiwyg包显示我的应用程序的电子邮件编辑器。我能够显示正确的内容，但面临的问题与形象。
当图像是输入HTML的一部分时，它不会在编辑器中显示。请找到我下面的示例代码。
import { Editor } from "react-draft-wysiwyg";
import {
EditorState,
ContentState,
convertFromHTML
} from "draft-js";
const htmlContentFromServer =
'<b>
浏览 1提问于2019-12-16得票数 1
回答已采纳
使用注释，我试图在rails应用程序中使用Draft.js。
但我经常会犯错误：
Draft.min.self-b1d4414….js?body=1:1 Uncaught ReferenceError: Immutable is not defined
有没有人知道，我犯了什么明显的错误？
详细信息：
我只使用react rails来保持简单。Gemfile有以下相关行：
gem 'react-rails'
gem 'bootstrap-sass'
我把Draft.min.js放在app/assets/javascripts/externallibraries/
浏览 4提问于2017-07-01得票数 2
回答已采纳
1回答
创建带有依赖项的react包
、、、、
我正在创建一个简单的用户界面库上的React。
在这个包中，我添加了一个外部库，比如草稿-js。
现在，当我试图在其他项目上实现我的包时，每次都会出现错误。
我已经花了一天的时间想办法解决这个问题。我认为在我的库中安装外部库的方式是个问题。我应该只将它安装在dev依赖项上，还是普通的或对等点上？或者我是否也应该在我试图实现的项目上安装这个外部库。
这是我正在创建的包的JSON包。
"scripts": {
"build": "yarn build:esm && yarn build:cjs",
"build
浏览 2提问于2022-03-15得票数 0
1回答
编辑在工作，但下拉不起作用，
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const MyEditor = () => {
let editorState = EditorState.createEmpt
浏览 1提问于2022-04-13得票数 0
我有一个简单的用例:有一个DraftEditor组件，它以value作为支撑，并基于value (空的或有内容的)创建编辑器状态。value可能会被父版本更改，当它被修改时，我希望草稿编辑器也会更新它的内容。这是我的DraftEditor组件。
import React, { useState } from "react";
import { Editor, EditorState, convertFromRaw } from "draft-js";
export default ({ value }) => {
const initialState
浏览 3提问于2020-01-20得票数 4
回答已采纳
我使用中出现的示例代码创建了一个简单的编辑器，但我的编辑器的行为方式与页面中的编辑器不同。当我更改焦点时，光标总是返回到编辑器的开头，而当我重新聚焦到它时，希望光标返回到最后一个位置。
import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';
export default class DraftTutsEditor extends Component {
constructor(props) {
super(props);
浏览 6提问于2020-08-11得票数 0
回答已采纳
我想要获取编辑器的内容，并最终将其存储为const内容。我得到一个错误，_draftJs.EditorState.getCurrentContent不是一个函数。
import React from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState, RichUtils} from 'draft-js'
const content = EditorState.getCurrentContent()
console.log('str= ', E
浏览 0提问于2016-10-20得票数 3
我正在构建新的React来学习和玩Draft-js，RichStyle文本编辑器。我使用create-react-app来初始化我的React应用程序。它很好用，而且很容易使用。
现在，我尝试添加semantic-ui-react，这是SemanticUI库的React版本。
亚安德失败了。
npm安装语义-用户界面-响应-保存
正如你所看到的，草稿-js的效果是一样的。我的问题是，通常使用草稿-js&语义-ui-使用React 15.4.2没有问题。我在专业的env中使用这个堆栈。有什么东西是我错过了npm吗？create-react-app可以停止这个安装吗？
现
浏览 0提问于2017-01-21得票数 1
回答已采纳
我想用一些初始内容来更新草案js编辑器。我知道我们可以使用组件状态来更改EditorState。
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: Editor
浏览 0提问于2018-10-04得票数 0
2回答
我不能加载默认的值风格的反应-草案-wysiwyg。代码框链接：
我试过什么？我在编辑器中使用react草稿-wysiwyg库，用草稿-js初始化和转换，并且我已经用样式传递了默认值。如果我删除样式标签，它可以正常工作。但是在添加样式之后，它就不起作用了。如何解决默认值中的样式问题
import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertFromHTML } from "draft-js";
import "react-draft-w
浏览 3提问于2021-08-23得票数 0
我正在尝试将js草案作为文本编辑器实现到我的next.js项目中。我已经实现了所有的代码基于官方指南，但文本编辑器不会显示。这是我的密码
index.js
import React, { Component } from 'react'
import { useRouter, Router } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';
im
浏览 3提问于2019-10-17得票数 2
我正在创建一个包含富文本编辑器的React组件。我选择了react-draft-wysiwyg来编辑或创建文本，然后发送到服务器。我将在代码中只给出造成困难的功能。我使用axios发送请求。由于某些原因，我在发送POST请求时无法从表单中获得正确的数据。我使用命令进行了检查： console.log(data);
console.log(this.state.editorState); 但是现在在表单中输入了文本。我想弄清楚这一点，谢谢大家！ 代码如下： import React, { Component } from 'react';
import { EditorStat
浏览 41提问于2019-08-18得票数 0
回答已采纳
我在web应用程序中使用draft js来显示编辑器。但我在草稿编辑器中显示文件上传选项时遇到了问题。
截图如下：
这是编辑器在他们的演示中的显示方式
您可以在这里查看演示
请检查以下代码并提出解决方案：
import React, { Component } from 'react';
import logo from './logo.svg';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
浏览 32提问于2019-03-29得票数 3
回答已采纳
我有一个非常简单的反应应用程序的类型记录。
import React, { useState, useMemo } from "react";
import { Editor as Draft, EditorState } from "draft-js";
const Editor: React.FC = () => {
const [editorState, setEditorState] = useState<() => EditorState>(() =>
EditorState.createEmpty()
浏览 4提问于2020-07-03得票数 1
我使用Draft.js启动了一个带有一些内容的编辑器。状态中定义的初始内容，如下例所示。如何在更改状态时将整个内容替换为新内容。在下面的示例中，我尝试将state initData设置为What is your name?，当用户单击input button时，状态更改为Quel est votre nom?，转换的内容应替换编辑器。 import React, { Component } from 'react';
import { EditorState, ContentState, convertFromHTML} from 'draft-js';
e
浏览 53提问于2020-08-21得票数 0
我正在开发一个富文本编辑器，用于将纯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: fal
浏览 22提问于2020-08-17得票数 9
1回答
我试着用Browserify在draft-js get中使用提及插件。这是因为我们的应用程序是使用Browserify构建的。
是关于这个插件的：
在示例中，他们使用的是Webpack，并且使用的是导入。
我使用的是require。所以我的代码的一个例子是：
var React = require('react'),
Draft = require('draft-js'),
Immutable = require('immutable'),
Editor = require('
浏览 0提问于2017-03-13得票数 5
我有类似的问题，这个，使用Draft.js的反应和类型记录。使用与它们的文档示例相同的代码，我得到了Object is possibly 'null'函数中的focusEditor错误。即使我检查空引用(就像上面引用的SO问题中的解决方案一样)，它仍然存在。下面是添加空检查的代码：
import React from 'react';
import { Editor, EditorState } from 'draft-js';
export default () => {
const [editorState, setEditorS
浏览 4提问于2020-01-30得票数 3
回答已采纳
1回答
在我的React项目上进行了一个通用的包升级之后，JavaScript中的SCSS变量导入停止了工作。导入本身仍然工作，但是从SCSS导出的变量从未出现在JavaScript中。
我正在做的事情是：
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
反应中的：
import scss from './scss/parts/_variable
浏览 5提问于2021-04-22得票数 2
回答已采纳
1回答
将类转换为函数
、、、、
我需要将给定的类组件转换为功能组件。
我正在努力输出一组多个编辑草稿-js，并且我在输出它们时遇到了一些困难。在互联网上，我找到了一个带有数组的工作类组件，但我无法将它转换为TS或JS的功能组件。
import React from "react";
import { EditorState, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import htmlToDraft from "html-to-draftjs";
浏览 11提问于2022-06-07得票数 -1
回答已采纳
我正在从使用html所见即所得编辑器(CKEditor)迁移到使用Draft-JS，并希望能够在Django迁移中将现有的HTML数据转换为Draft-JS ContentState，但我一直无法找到这样做的方法。
这个是可能的吗？或者这是正确的方法吗？
浏览 0提问于2020-04-16得票数 1
我发现了一个很棒的库，它可以使draft.js变得更好。
我创建了一个项目，npm安装了这个库。
但是在这个库的文件夹中，我尝试重新构建dist文件夹，因为我在我的项目中自定义了一些设置。
当我运行npm运行构建时，它给了我一些错误：
ERROR in ./src/Editor/index.js
Module build failed: SyntaxError: Unexpected token (41:19)
40 | export default class WysiwygEditor extends Component {
> 41 | static propTypes
浏览 1提问于2018-01-04得票数 1
回答已采纳
我正在使丰富的文本编辑器在react，并希望实现内联工具栏的反应-草稿-wysiwyg。我浏览了所有的网络，想在上面找到医生，但没有找到。如果这里有人用任何包裹做过这件事，给出你有价值的答案。
我将在下面公布我的实施情况：
mport React, { Component, useRef, useState } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-
浏览 11提问于2022-05-29得票数 0
我正在使用Draft.js创建富文本编辑器。
这是父级：
import React from 'react'
import RichTextEditor from './RichTextEditor'
import {useEffect, useState, useCallback} from "react"
import { EditorState, convertToRaw } from 'draft-js';
function AddPage() {
// MY STAT
浏览 0提问于2021-05-16得票数 1
嗨，伙计们，你能帮我把react草稿-wysiwyg代码从类组件更改为功能性组件吗？
因为我不熟悉课堂组成，请帮帮我！
import React, { Component } from "react";
import { EditorState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
class NewEditor exte
浏览 12提问于2022-09-21得票数 0
回答已采纳
我在找一个文字编辑库，但是我什么也找不到，也许有经验的人能帮我。
我试着使用rich-editor，但没能让它工作起来。
请帮忙，谢谢。
浏览 3提问于2017-09-26得票数 2
这是我的editor.js
我在const内容中有示例JSON数据。我想要做的是，当我最初打开编辑器时，它应该在变量content中呈现初始内容。但是我不知道如何更新editorState，因为它是不可变的。
import React, { Component } from 'react';
import { EditorState, convertToRaw, convertFromRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
浏览 0提问于2018-05-20得票数 1
1回答
我正在使用draft-js，使用React作为文本编辑器，并尝试使用youtube链接更新内容状态(稍后我将线程连接到输入/更改事件)。 但是现在，添加的实体映射不是从convertFromRaw函数继承过来的。 对于获取上下文的(convertToRaw)对象并替换.blocks (文本)对象，效果很好。 但是以同样的方式添加一个实体并不是这样的。 ?
浏览 9提问于2019-02-05得票数 0
在React.js应用程序中，我尝试让编辑器上传图像并将其添加到编辑器的内容中。
到目前为止，我通过以下代码成功地做到了这一点：
import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import {convertFromRaw, convertToRaw, EditorState} from 'draft-js';
import "../../node_modules/react-draft-wysiwyg/
浏览 6提问于2017-06-12得票数 3
回答已采纳
1回答
编辑器不可编辑，选项垂直显示。
、、、、
我试图使用草稿js来呈现wysiwyg编辑器。
当我加载组件时，我无法编辑任何内容，并且选项是垂直出现的。
期望它水平地出现。我做错了什么？
这就是它目前的样子。
实现。
import React from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import dynamic from 'next/dynamic'
import { EditorPr
浏览 18提问于2022-08-24得票数 1
回答已采纳
我在Webstorm中创建了一个新的React项目。我安装了draft-js和draft-js-plugins-editor，以及插件draft-js-hashtag-plugin和draft-js-mathjax-plugin (使用节点)。
我遵循了他们的“入门”，但是这个例子对我不起作用。只要我一写信
import Editor from 'draft-js-plugins-editor';
我得到了一个TypeError: Cannot read property 'object' of undefined错误。
./node_modules/draft
浏览 8提问于2017-10-14得票数 0
回答已采纳
当我试图在我的Electron项目中渲染来自ant设计的Button时，我得到了这个错误，但是它没有渲染任何东西。当我从按钮更改为仅Hello World文本时，它起作用了。
我不确定这个错误是来自于webpack还是蚂蚁设计本身。
注意:我自己手动创建了这个项目，但错误可以在上重现，但在上没有错误
错误消息
Uncaught ReferenceError: global is not defined
at Object../node_modules/fbjs/lib/setImmediate.js (renderer.js:58171)
at __webpack_requir
浏览 103提问于2019-11-19得票数 2
2回答
这是我的TextEditor.js。我愿意在任何地方使用它，但是当我使用这个组件时，我希望每次状态发生变化时都得到与它相关的值。
import React, { Component } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
i
浏览 8提问于2022-01-29得票数 0
1回答
尝试学习如何在我自己的应用程序中使用DraftJS React组件，我有一个大问题。我遵循了位于的例子
我使用create-react-app获取基本样板，并导入了编辑器和状态对象，并实现了类似于示例。
import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';
class App extends Component {
constructor(props){
super(props);
this.state = {edit
浏览 1提问于2018-10-01得票数 2
回答已采纳
在我的项目中，我集成了来自react-draft-wysiwyg的编辑器。现在，我需要通过加载一些文本数据来测试文本编辑器。我尝试遵循，我的代码目前看起来如下所示：
import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { co
浏览 58提问于2020-05-05得票数 2
回答已采纳
2回答
我已经按照安装了内联和静态工具栏插件，但它们似乎并不存在。
我正在使用Create React App CLI。
组件：
import React from 'react';
import {EditorState} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createToolbarPlu
浏览 0提问于2018-04-05得票数 2
我正在尝试构建一个自定义的Draft.js ComponentBlock来接受图像URL，以便在编辑器组件中显示图像。我尝试使用一个标记和一个通过函数onChange更新的“URL”钩子，它可以存储输入标记的值，直到用户完成输入/粘贴useState。但是，输入标记是不可用的，因为输入字段中写入的文本不会出现在输入字段中，而是存储在EditorState中，直到输入大约5个字符，粘贴根本不会显示。我做了一些查看，发现了以下内容：
它建议使用"EditorBlock“组件来代替。但是，虽然该组件在屏幕上显示文本很好，但我正在努力寻找一种方法来检索输入到EditorBlock组件中的数据
浏览 0提问于2021-01-27得票数 0
1回答
我想使用Facebook的draftjs组件，但我遇到了一些障碍。
import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorState } from 'draft-js';
class MyEditor extends React.Component{
constructor(props) {
super(props);
this.state = {
editorState: EditorSta
浏览 0提问于2016-04-07得票数 0
我正在考虑使用，我想知道如何才能有一个编辑器，当有人键入结果时，结果将显示为html，但使用实际的标记(即，如果我使用粗体，输出将显示为粗体)。
我很难把这件事办好。我试过dangerouslySetInnerHTML，但这似乎行不通。
<div dangerouslySetInnerHTML={{ __html: this.state.editorContentHtml }}></div>
import React from "react";
import { Editor, EditorState } from "draft-js&#
浏览 1提问于2019-03-04得票数 0
我正在尝试从数据库中读取数据，然后通过react呈现给DOM。对于输入，我使用了draft.js，并在保存到数据库之前对其运行了convertToRaw。然而，当我运行convertFromRaw和render时，我在控制台中得到这样的错误：“未捕获TypeError:无法读取未定义的属性‘块’”。这是我第一次使用draft.js，所以我不确定我做错了什么。有人能帮帮忙吗？非常感谢!
//App.js
import React, {
Component
}
from 'react';
import Blogs from './blogs';
impo
浏览 1提问于2016-10-01得票数 2
1回答
我的draft.js <TextEditor />使用文本填充body，例如：'{"blocks":[{"key":"3mont","text":"lorem ipsum","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}'，并在使用c
浏览 5提问于2020-11-14得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
