- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我使用 Draft-js 来创建博客文章。当用户创建帖子时,数据被转换为字符串并发送到服务器以进行保存。我像这样转换了 draft-js EditorState
:JSON.stringify(convertToRaw(editorState.getCurrentContent()))
。
现在,我想添加一个编辑帖子的功能。为此,我从服务器获取字符串数据(格式与上述完全相同),然后尝试从中创建一个 editorState,如下所示:
let data = convertFromRaw(res.data['postContent'])
setEditorState(EditorState.createWithContent(data))
这似乎在我运行 console.log(convertToRaw(editorState.getCurrentContent()))
时有效,我可以看到服务器数据在 editorState 中。但是,编辑器内部没有显示任何内容。我的问题:如何在编辑器中向用户显示数据并使其可编辑?就像这样,用户可以查看帖子并修改其中的部分内容。这是我得到的屏幕截图(如您所见,标题在那里,但当它应该说“测试数据!”时,编辑器是空的):
这是我的完整代码:
import React, {useEffect, useState} from 'react'
import { EditorState, convertToRaw, convertFromRaw } from 'draft-js'
import { useLocation } from 'react-router-dom';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './css/CreateBlog.css'
import ApiClient from '../util/ApiClient';
// submit the blog post
const submitPage = async (data, postTitle, setPosted, setPostFailed) => {
const content = JSON.stringify(convertToRaw(data));
ApiClient.post("/blog/handle-blog", {"postTitle": postTitle,"postContent": content})
.then((res) => {
console.log(res)
// there was no error
if(res.status === 201) {
setPosted("Your blog has been posted.")
setPostFailed(false)
} else {
setPosted("There was an error.")
setPostFailed(true)
}
})
}
// if this is an edit
const getPostData = async (postID, setEditorState, setPostTitle) => {
const res = await ApiClient.get(`/blog/get-blog/${postID}`)
// set the title and data
setPostTitle(res.data['postTitle'])
setEditorState(EditorState.createWithContent(convertFromRaw(res.data['postContent']))) // set the editorState data
}
export default function CreateBlogpost() {
const location = useLocation();
const postID = location.state?.id; // get the ID if there is one
const [editorState, setEditorState] = useState(null);
const [postTitle, setPostTitle] = useState("");
const [posted, setPosted] = useState(""); // the error/success message
const [postFailed, setPostFailed] = useState(false); // has the blog successfully been posted?
// handle the post button click
const handleSubmit = async (e) => {
e.preventDefault();
// check the post contains data
if(editorState === EditorState.createEmpty() || postTitle == "") {
setPosted("Please add some content to your post.")
setPostFailed(true)
return;
}
const data = editorState.getCurrentContent()
await submitPage(data, postTitle, setPosted, setPostFailed);
}
useEffect(() => {
// if the state has an ID, then you're editing a post
if(postID) {
getPostData(postID, setEditorState, setPostTitle)
}
}, [])
return(
<div className="create-blog">
<div className="create-blog-text m-2 mb-3">
<h1>{postID ? "Edit" : "Create"} a blog post</h1>
</div>
<div className="d-flex">
<h3 className="m-2">Title: </h3>
<input value={postTitle} type="text" id="fname" className="m-2" onChange={e=>setPostTitle(e.target.value)} />
<p className="m-2">Please note: if you want to upload a photo, upload it to an image sharing site like imgur and then link the image.</p>
</div>
<div className="editor-container mb-3 ml-2 mr-2"
style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
>
<Editor value={editorState} onEditorStateChange={setEditorState} />
</div>
<button className="button-3 m-2" onClick={(e) => handleSubmit(e)}>
{postID ? "Edit" : // if there is a postID, then you are editing the post
"Post" }
</button>
{/* <button className="button-3 m-2" onClick={(e) => handleSubmit(e)}>Save as draft</button> */}
<h4 style={{ color: postFailed ? 'red' : 'green'}}>{posted}</h4>
</div>
)
}
最佳答案
改变
<Editor
value={editorState}
onEditorStateChange={setEditorState}
/>
到
<Editor
editorState={editorState}
onEditorStateChange={setEditorState}
/>
关于javascript - Draft-js JSON 到 EditorState 不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71095531/
在 Gmail API 中,drafts.list 经常会返回草稿 ID但是当我将它传递给 drafts.get 时,它会返回 404 错误。这是对于某些草稿 ID 可重复,我可以再次调用 draft
我正在尝试将调用组件中的文本更新到编辑器组件中。我使用 props 来传递来自调用者的文本,但是当文本更改时(在 ContentEditor 中更新了 props),Editor 组件中的文本不是:
我正在使用 MFMailComposeViewController Controller ,如下所示: MFMailComposeViewController *picker1 = [[MFMailC
如果我想处理字符*的输入,我可以使用handleBeforeInput(str): handleBeforeInput(str) { if (str !== '*') { retu
使用下面的代码我得到纯文本但我想要格式化文本点击按钮 {alert(this.state.editorState.getCurrentContent().getPlainText());}} typ
如何添加链接?我知道如何添加链接到 选择 const contentState = editorState.getCurrentContent();
我的draft.js 填充 body带有文本,例如:'{"blocks":[{"key":"3mont","text":"lorem ipsum","type":"unstyled","depth":
我在我的应用程序中使用基于草稿js的react-draft-wysiwyg文本编辑器。我在尝试通过编辑器图像控件上传图像时遇到一些问题。我正在使用自定义 FileUploader 组件。它将图像保存在
我有一个由 Draft.js 提供的编辑器的包装器,我想让 tab/shift-tab 键像它们应该用于 UL 和 OL 一样工作。我定义了以下方法: _onChange(editorState)
我关注了draft-js document创建一个非常简单的 Draft-js 演示。 一切似乎都运行良好,但是当我在 Chrome 中打开网址时,我只能看到一个白色的空白页面(那里有一个隐藏的编辑器
如何测试draftjs的内容编辑器为空? 我现在唯一的想法是与从此函数返回的对象进行对象比较:EditorState.createEmpty().getCurrentContent() 最佳答案 只需
我有一个简单的用例:有一个 DraftEditor 组件,它采用 value作为它的 Prop 并基于value创建一个编辑器状态(空的或有内容的)。 value 可能被父级更改,当它发生时,我希望草
我尝试根据主 draft.js 页面上的示例创建基本草稿 js 编辑器 https://draftjs.org/ . 当我在主页面的编辑器中单击切换了 ol/ul 的选项卡时,我得到了嵌套列表。但是在
我有一个需要多个文本输入的应用程序,为了格式化和自定义,我选择了 draft-js 作为我的编辑器,但是我遇到了一个非常令人困惑的输入问题。 当我在编辑器中输入时,我最近按下的键被打印在编辑器的开头,
问题是:如何将 draft-js 内容保存为 html,然后在页面上呈现内容(此时是 html 字符串)。 我想分享我学到的东西。 请在解决方案中找到一种使用 draft.js 保存和呈现内容的方法。
我正在做一个 React 项目,我们将在其中使用大量表单,包括具有丰富 HTML 的字段。我搜索了一会儿,偶然发现了 draft-js。看起来很好,但是我似乎找不到任何从头到尾如何使用它的好例子。我发
如何确保我的 UI 上唯一的 draft-js 文本框在页面加载时自动聚焦? 有一个记录的方法叫做 focus ,但是我不确定实现所需的语法。 最佳答案 如果您的编辑器是用一些默认值启动的,那么只需执
试图学习如何在我自己的应用程序中使用 DraftJS React 组件,但我遇到了一个大问题。我已经按照位于 here. 的示例进行操作 我使用 create-react-app 获取基础样板文件,我
我在一个项目中将 Draft JS 作为一个简单的编辑器实现了,但是我在设置无序列表的样式时遇到了问题,特别是更改项目符号的颜色以匹配文本颜色。 文档中似乎没有关于如何将样式应用于包装 unorder
我正在尝试将 Draft.js 与图像插件一起使用。这是我的问题。我设法让它工作,但没有加载样式,编辑器占据了整个页面,按钮没有样式。 我从提供的 CSS 加载样式 import './Draft.c
我是一名优秀的程序员,十分优秀!