Custom style button

[alirezaemami]

I want to use my own custom buttons to bold a word.
Is there a way to change the style of the selected words (without using the toolbar)?

[tneotia]

Yes you can totally do that! There are two ways;

1. You can remove the default bold button in the toolbar and add your own to display in the toolbar section

2. You can remove the default bold button in the toolbar and add your own widget wherever you want

Which one are you trying to do? I can send an example for that.

[alirezaemami]

Thanks for your prompt reply
I want to create a button outside the toolbar and change the style of the selected word (s) through it.
It will be nice if you send me an example code.

[tneotia]

Sorry for the late response. Here is how to do that:

bool isBold = false;

IconButton(
   icon: Icon(Icons.format_bold, color: isBold ? Colors.blue : Colors.black),
   onPressed: () => controller.execCommand('bold'),
);

HtmlEditor(
   htmlToolbarOptions: HtmlToolbarOptions(
      defaultToolbarButtons: [
            //add buttons here, but remove the bold button because you have a custom one. See README for more details
      ]
    ),
    callbacks: Callbacks(
       onChangeSelection: (EditorSettings settings) => setState(() { isBold = settings.isBold }),
    )
);

It isn't super difficult. You can use the same approach for any other button or dropdown. onChangeSelection is important so you can update your UI dynamically when the user puts the cursor on bold text or when the user puts the cursor on regular text.

Let me know if you have any issues or other questions.

[tneotia]

@alirezaemami I hope the above code was helpful. Closing for now, let me know if you have any other questions.