如何解决添加图像draft-js-image-plugin
我尝试了多种方法来尝试将图像附加在草稿js中。
我的尝试遵循了教程https://www.draft-js-plugins.com/plugin/image中的示例。对于“添加图像按钮示例”,可在此处https://github.com/draft-js-plugins/draft-js-plugins/tree/master/docs/client/components/pages/Image/AddImageEditor中找到其完整源代码。我也尝试过这篇不使用图像插件做类似事情的中等文章https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-react-and-draft-js-part-2-4-persisting-data-to-server-cd68e81c820。
如果我将初始状态设置为已嵌入的图像,则会进行渲染。但是,当使用稍后添加它的机制时,它似乎不起作用。我读过一些提到各种版本的plugin / draft.js的问题。
我的版本:
“ draft-js-image-plugin”:“ ^ 2.0.7”, “ draft-js”:“ ^ 0.11.6”,
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createInlinetoolbarPlugin,{ Separator } from 'draft-js-inline-toolbar-plugin';
import createImagePlugin from 'draft-js-image-plugin';
import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
import {
ItalicButton,BoldButton,UnderlineButton,HeadlineOneButton,CodeButton,UnorderedListButton,OrderedListButton,BlockquoteButton,} from 'draft-js-buttons';
interface TextEditorProps {
label?: string;
value: EditorState;
onChange?: (editorState: EditorState) => void;
className?: string;
disabled?: boolean;
}
const useStyles = makeStyles((theme) => ({
label: {
margin: theme.spacing(1)
},editor: {
BoxSizing: 'border-Box',border: '1px solid #ddd',cursor: 'text',padding: '16px',borderRadius: '2px',marginBottom: '2em',BoxShadow: 'inset 0px 1px 8px -3px #ABABAB',background: '#fefefe',minHeight: '50vh'
}
}));
const inlinetoolbarPlugin = createInlinetoolbarPlugin();
const imagePlugin = createImagePlugin();
const { Inlinetoolbar } = inlinetoolbarPlugin;
const plugins = [inlinetoolbarPlugin,imagePlugin];
const TextEditor:React.FunctionComponent<TextEditorProps> = ({label,value,onChange,className,disabled }: TextEditorProps) => {
const editor = React.useRef(null);
const focusEditor = () => {
editor.current.focus();
}
React.useEffect(() => {
focusEditor()
},[]);
const classes = useStyles();
const insertimage = () => {
onChange(imagePlugin.addImage(value,"https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"));
}
return (
<Box className={className} onClick={focusEditor}>
{label && <InputLabel className={classes.label}>{label}</InputLabel>}
<div className="menuButtons">
<button className="inline styleButton">
<i
className="material-icons"
style={{
fontSize: "16px",textAlign: "center",padding: "0px",margin: "0px"
}}
onClick={insertimage}
>
image
</i>
</button>
</div>
<Box className={!disabled && classes.editor} >
<Editor
ref={editor}
editorState={value}
onChange={onChange}
plugins={plugins}
spellCheck={true}
readOnly={disabled}
/>
{<Inlinetoolbar>
{(externalProps) => (
<>
<BoldButton {...externalProps} />
<ItalicButton {...externalProps} />
<UnderlineButton {...externalProps} />
<CodeButton {...externalProps} />
<Separator {...externalProps} />
<UnorderedListButton {...externalProps} />
<OrderedListButton {...externalProps} />
<BlockquoteButton {...externalProps} />
<HeadlineOneButton {...externalProps} />
</>
)}
</Inlinetoolbar>}
</Box>
</Box>
)
}
解决方法
您的 editorState 更改将覆盖 insertImage 的更改。您正在触发 focusEditor 以及onClick insertImage
,如果您不介意动手学习如何插入内容,则不需要其他插件。
<i
className="material-icons"
style={{
fontSize: "16px",textAlign: "center",padding: "0px",margin: "0px"
}}
onClick={() => insertImage('https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg')}
>
自定义insertImage函数,在您的情况下,editorState应该替换为'value'
import { EditorState,AtomicBlockUtils } from “draft-js”; //<-- need add this import
const insertImage = ( url ) => {
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
'IMAGE','IMMUTABLE',{ src: url },)
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set( editorState,{ currentContent: contentStateWithEntity });
onChange(AtomicBlockUtils.insertAtomicBlock(newEditorState,entityKey,'')) //Update the editor state
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。