Question

我有以下代码非常适合斜体，粗体和下划线：

    onUnderlineClick = () => {
        this.onChange(
            RichUtils.toggleInlineStyle(this.state.editorState, "UNDERLINE")
        );
    };

    onBoldClick = () => {
        this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, "BOLD"));
    };

    onItalicClick = () => {
        this.onChange(
            RichUtils.toggleInlineStyle(this.state.editorState, "ITALIC")
        );
    };

现在，我想添加一个更改字体大小的按钮，我尝试过：

  onHeaderClick = () => {
       this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, '30px'));
  };

但这不起作用...如何更改所选文本的字体大小？

Answer 1

我认为这应该适合您的情况

toggleFontSize = fontSize => {
   const { editorState } = this.state;
   RichUtils.toggleBlockType( editorState, fontSize  );
}

<button onClick={e => this.toggleFontSize('100px')}>100px</button>

有关更多说明，请检查-https://www.npmjs.com/package/draft-js-custom-styles#api

在文档中，他们给出了一个示例

toggleFontSize = fontSize => {
  const newEditorState = styles.fontSize.toggle(this.state.editorState, 
  fontSize);

  return this.updateEditorState(newEditorState);
};

Answer 2

首先，您需要创建自定义内联样式

<?php
    $db_host = "localhost";
    $db_name = "system";
    $db_user = "root";
    $db_pass = "";

    try{
        $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass);
        $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
    echo $e->getMessage();
}

try{

if(isset($_POST['submitbtn'])){

    $multi=$_POST['colorFK'];

foreach ($multi as $multir){

$stmt=$db_con->prepare("INSERT INTO tbl_colors_options (colorFK) VALUES(:colorFK)");
$stmt->bindParam(":colorFK", $multir);
$stmt->execute();

}
}
}
    catch(PDOException $e){
    echo $e->getMessage();

}

?>

并使用它来构建菜单

第二，您需要定义一个自定义样式图

const inlineStyles = [
  { label: "B", style: "BOLD" },
  { label: "I", style: "ITALIC" },
  { label: "U", style: "UNDERLINE" },
  { label: "<strike>S</strike> ", style: "STRIKETHROUGH" },
  { label: "I am your header", style: "FONT_SIZE_30" }
];

并通过它：

const customStyleMap = {
  STRIKETHROUGH: {
    textDecoration: "line-through"
  },
  FONT_SIZE_30: {
    fontSize: "30px"
  }
};

在Codesanbox https://codesandbox.io/s/font-size-inline-we2q2上查看完整示例

DraftJS内联样式文档https://draftjs.org/docs/advanced-topics-inline-styles

ReactJS和DraftJS，如何即时更改字体大小？

2 个答案: