Как я могу заставить мой собственный стиль работать в Draft. js? - PullRequest
0 голосов
/ 02 февраля 2020

Я новичок в Draft. js и до сих пор все отлично работало.

Я пытаюсь реализовать свои собственные стили, но не могу заставить его работать. Я смотрел на различные учебные пособия, и не могу понять, что мне не хватает. В частности, я пытаюсь реализовать опцию для центрирования текста.

Это мой стиль карты:

  const styleMap = {
    CENTER: {
      textAlign: "center"
    }
  };

Это мой редактор:

  <Editor
    ref={editor}
    editorState={editorState}
    onChange={handleChange}
    handleKeyCommand={handleKeyCommand}
    placeholder={placeholder}
    customStyleMap={styleMap}
  />

И это как я отображаю все мои кнопки:

  const renderInlineStyleButton = () => {
    const inlineStyleButtons = [
      {
        value: "Bold",
        style: "BOLD"
      },

      {
        value: "Italic",
        style: "ITALIC"
      },

      {
        value: "Underline",
        style: "UNDERLINE"
      },

      {
        value: "Center",
        style: "CENTER"
      }
    ];

    return inlineStyleButtons.map(button => {
      const currentInlineStyle = editorState.getCurrentInlineStyle();
      let className = "";
      if (currentInlineStyle.has(button.style)) {
        className = "active";
      }

      return (
        <input
          type="button"
          key={button.style}
          value={button.value}
          className={className}
          data-style={button.style}
          onMouseDown={toggleInlineStyle}
        />
      );
    });
  };
...