2

我正在创建一个简单的博客写作应用程序。我使用 Draft.js 作为编辑器。我可以在写博客时创建链接，但是当我进入阅读模式时，所有链接都丢失了。这是用于编写和阅读博客的 React 代码。为简单起见，我将 editorState/data 存储在 localStorage 中。这是 WriteBlog.js 文件

import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import createLinkPlugin from "draft-js-anchor-plugin";
import createToolbarPlugin, { Separator } from "draft-js-static-toolbar-plugin";
import {
  convertFromRaw,
  EditorState,
  RichUtils,
  AtomicBlockUtils,
  convertToRaw
} from "draft-js";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import editorStyles from "./editorStyles.css";
import buttonStyles from "./buttonStyles.css";
import toolbarStyles from "./toolbarStyles.css";
import linkStyles from "./linkStyles.css";
import "draft-js-alignment-plugin/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: "http://…"
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { Toolbar } = staticToolbarPlugin;

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [staticToolbarPlugin, linkPlugin];
const text =
  "Try selecting a part of this text and click on the link button in the toolbar that appears …";

export default class WriteBlog extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = editorState => {
    let contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
    const stringyfyRawContent = JSON.stringify(contentRaw);
    localStorage.setItem("blogcontent", JSON.stringify(contentRaw));
    this.setState({
      editorState
    });
  };
  handleSave = async e => {
    e.preventDefault();

    // await this.setState({
    //     saveblog: 1,
    //     publish: 0
    // });
    // this.props.create_post(this.state);

    // console.log("save state", this.state);
    localStorage.setItem(
      "blogsaveblog",
      JSON.stringify(this.state.editorState)
    );
  };
  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <form onSubmit={this.handleSave}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={element => {
              this.editor = element;
            }}
          />
          <Toolbar>
            {// may be use React.Fragment instead of div to improve perfomance after React 16
            externalProps => (
              <div>
                <BoldButton {...externalProps} />
                <ItalicButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <linkPlugin.LinkButton {...externalProps} />
              </div>
            )}
          </Toolbar>

          <button
            type="submit"
            className="btn btn-primary"
            style={{ margin: "10px" }}
          >
            Save
          </button>
        </form>
      </div>
    );
  }
}

这是 ReadBlog.js 文件

import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import createLinkPlugin from "draft-js-anchor-plugin";
import createToolbarPlugin, { Separator } from "draft-js-static-toolbar-plugin";
import { convertFromRaw, EditorState, convertToRaw } from "draft-js";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import editorStyles from "./editorStyles.css";
import buttonStyles from "./buttonStyles.css";
import toolbarStyles from "./toolbarStyles.css";
import linkStyles from "./linkStyles.css";
import "draft-js-alignment-plugin/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: "http://…"
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { Toolbar } = staticToolbarPlugin;

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [staticToolbarPlugin, linkPlugin];
const text =
  "Try selecting a part of this text and click on the link button in the toolbar that appears …";

export default class ReadBlog extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };
  componentDidMount = () => {
    const rawContentFromdb = convertFromRaw(
      JSON.parse(localStorage.getItem("blogcontent"))
    );
    const initialEditorStatedb = EditorState.createWithContent(
      rawContentFromdb
    );
    this.setState({ editorState: initialEditorStatedb });
  };



  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          plugins={plugins}
          readOnly={true}
          ref={element => {
            this.editor = element;
          }}
        />
      </div>
    );
  }
}
4

1 回答 1

0

我知道这已经很晚了，但是您没有添加装饰器，这就是为什么这不起作用。在这种情况下，您将希望使用它compositeDecorator来构建您的装饰器对象，并用它初始化反应状态。

const decorator = new CompositeDecorator([
    {
      strategy: linkStrategy,
      component: LinkDecorator,
    },
  ]);

  const [editorState, setEditorState] = useState(() =>
    EditorState.createWithContent(initialContentState, decorator),
  );
于 2021-03-29T16:14:35.463 回答