我一直在尝试在返回键上添加一个新块。这是我的代码，它被放置在一个开关盒中用于检查keyCode. Shift + Return 通过添加新行来工作。但只要返回，它就需要在编辑器中开始一个新的块。
// SHIFT + RETURN <br/>
if(e.shiftKey) {
const newEditorState = RichUtils.insertSoftNewline(this.state.editorState);
if (newEditorState !== this.state.editorState) {
this.onChange(newEditorState);
}
} else {
const newBlock = new ContentBlock({
key: genKey(),
type: "unstyled",
text: ""
});
const contentState = this.state.editorState.getCurrentContent();
const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock);
EditorState.push(
this.state.editorState,
ContentState
.createFromBlockArray(newBlockMap.toArray(), contentState.getBlockMap())
.set("selectionAfter", contentState.getSelectionAfter().merge({
anchorKey: newBlock.getKey(),
anchorOffset: 0,
focusKey: newBlock.getKey(),
focusOffset: 0,
isBackward: false
})),
"split-block"
);
}
控制台中没有错误。当按下返回键时它不会执行任何操作。
我希望有人可以提供帮助。
我正在尝试创建一个按钮，onClick 将为您提供放置链接的选项，然后该链接必须在文本字段中显示为标签。到目前为止，我设法添加并显示纯文本，但我不知道如何将其转换为标签。
// Link function
const addLinkFn = (editorState, link) => {
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
"LINK",
"IMMUTABLE",
{ url: link }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(editorState, {
currentContent: contentStateWithEntity,
});
return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, link);
};
const onAddLink = () => {
let link = window.prompt("Add link http:// ");
const newEditorState = addLinkFn(editorState, link);
setEditorState(newEditorState);
};
我知道在某个地方我必须有一个像这样的“装饰器”和“策略”：
const linkStrategy = (contentBlock, callback, contentState) => {
contentBlock.findEntityRanges((character) => {
const entityKey = character.getEntity(); …我正在学习draft.js编辑器,但无法找到如何配置默认的font-family和字体大小.
我试过这种方式:
let editorState = EditorState.createEmpty();
let newState = RichUtils.toggleBlockType(
editorState,
'aligncenter'
);
newState = RichUtils.toggleInlineStyle(
newState,
'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
newState,
'TIMES_NEW_ROMAN'
);
有什么奇怪的,aligncenter样式工作正常,但是当组件获得焦点时,字体大小和系列会消失.
你能否建议正确的方法怎么做？
我需要将焦点应用于 Draft.js 编辑器并将光标定位在第一行/块的开头。编辑器包含多行/块。
仅this.refs.editor.focus()应用时，光标始终位于编辑器内第二个块/行的开头。
使用这个问题和这个问题作为指导，我尝试了下面的代码但没有成功。我怀疑传递blockMap给createFromBlockArray()不正确：
focusTopLine() {
this.refs.editor.focus();
const { editorState } = this.state;
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();
const blockMap = contentState.getBlockMap();
const newContentState = ContentState.createFromBlockArray(blockMap);
const newEditorState = EditorState.createWithContent(newContentState);
this.setState({
editorState: EditorState.forceSelection(newEditorState, selectionState)
});
}
如果我想处理字符的输入*,我可以使用handleBeforeInput(str):
handleBeforeInput(str) {
if (str !== '*') {
return false;
}
// handling
return true;
}
如果我想处理输入ENTER,我可以使用钩子handleReturn(e)
但如果我想处理输入DELETE,该怎么办？
我了解js编辑器草稿不是经典的textarea元素。我应用了一些样式以使其看起来更好。但是，当我专注于我的draftjs编辑器时，我找不到执行自然html焦点效果的小技巧。我不是CSS专家，我曾经尝试过使用:active伪类，但一旦单击释放，效果就会消失。
我只希望边框像经典的html输入焦点效果。
如何设置呢？
谢谢
我正在尝试将图像插入到Draft.js编辑器中.
根据我的理解,我需要更新实体mergeData和阻止mergeBlockData.(我不确定)
现在我想mergeBlockData用来插入一个块.
Run Code Online (Sandbox Code Playgroud)mergeBlockData( contentState: ContentState, selectionState: SelectionState, blockData: Map<any, any> ): ContentState
请阅读代码中的评论.
import { Map } from 'immutable';
const selection = this.state.editorState.getSelection();
const contentState = this.state.editorState.getCurrentContent();
console.log(convertToRaw(contentState)); // for example, I have 3 blocks
const blockData = Map({ ov72: { // here how to generate a random valid key?
"key": "ov72",
"text": " ",
"type": "atomic",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [{
"offset": 0,
"length": 1,
"key": 1
}],
"data": {}
}}); …我确定我做错了。但是，一个简单的空html标记会导致convertFromHTML调用出现问题。
convertFromHTML("<p> </p>"); // returns null
如：
convertFromHTML("<p>empty</p>"); // returns a valid object.
有思想的儿子为什么会这样？
我正在创建一个包含富文本编辑器的 React 组件。我选择了 react-draft-wysiwyg 来编辑或创建文本，然后发送到服务器。我只会在代码中给出导致困难的功能。我使用 axios 发送请求。出于某种原因，我在发送 POST 请求时无法从表单中获取正确的数据。我使用命令检查：
console.log(data);
console.log(this.state.editorState);
但是现在在表单中输入了文本。我想弄清楚，谢谢大家！
这是代码：
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import axios from 'axios';
class AddPost extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value})
}
onEditorStateChange = (editorState) => {
this.setState({
editorState
});
}
handleSubmit(e) {
e.preventDefault();
const data = { …我正在使用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(); …javascript reactjs draftjs draft-js-plugins react-draft-wysiwyg