how can I add a dropdown with custom font style choices for editor text

[Ashish-Raturi]

Hi, you guys are great,
I have a question, how can I add my custom fonts on text editor
and custom text color, or custom color widget
thanks in advance.

[tneotia]

If you want custom toolbar buttons then simply do this:

HtmlEditor(
  controller: controller,
  htmlToolbarOptions: HtmlToolbarOptions(
    defaultToolbarButtons: [
      StyleButtons(),
      FontSettingButtons(fontName: false),
      FontButtons(),
      ListButtons(),
      ParagraphButtons(),
      InsertButtons(),
      OtherButtons(),
    ],
    customToolbarButtons: [
      CustomFont(),
      CustomTextColor(),
    ],
  ),
),

defaultToolbarButtons is there to disable the default font dropdown and default color pickers. Then you use customToolbarButtons to add in your own widgets however you want to.

For implementing a custom font picker or custom color picker I highly recommend checking out how I did the default version in toolbar_widget.dart at lines 500 and 905.

Now that I think about it, there is no way for custom implementations to be updated when the font family/color/font size, etc changes in the editor. Internally I handle this with a method listening to changes sent in JSON, but I think its a good idea to add some sort of callback/listener/stream to the package so custom UI elements can be updated. Therefore I am adding the "enhancement" tag to this issue.

Let me know if you need more help with the implementation

[Ashish-Raturi]

hi, thanks for your reply,
I added custom drop down menu item, it's showing only the font name but not changing it on editor.
or maybe i'm doing it wrong.
can you tell me how to add it,
https://user-images.githubusercontent.com/50191855/121620011-36940c80-ca87-11eb-809f-814f324cc248.mp4

I added them here

  items: [
              CustomDropdownMenuItem(
                value: 'Courier New',
                child: PointerInterceptor(
                    child: Text('Courier New',
                        style: TextStyle(fontFamily: 'Courier'))),
              ),
              CustomDropdownMenuItem(
                value: 'sans-serif',
                child: PointerInterceptor(
                    child: Text('Sans Serif',
                        style: TextStyle(fontFamily: 'sans-serif'))),
              ),
              CustomDropdownMenuItem(
                value: 'Times New Roman',
                child: PointerInterceptor(
                    child: Text('Times New Roman',
                        style: TextStyle(fontFamily: 'Times'))),
              ),
              CustomDropdownMenuItem(
                value: 'Billabong',
                child: PointerInterceptor(
                    child: Text('Billabong',
                        style: TextStyle(
                          fontFamily: 'Billabong',
                        ))),
              ),
              CustomDropdownMenuItem(
                value: 'AlexBrush',
                child: PointerInterceptor(
                    child: Text('AlexBrush',
                        style: TextStyle(
                          fontFamily: 'AlexBrush',
                        ))),
              ),
              CustomDropdownMenuItem(
                value: 'Allura',
                child: PointerInterceptor(
                    child: Text('Allura',
                        style: TextStyle(
                          fontFamily: 'Allura',
                        ))),
              ),
              CustomDropdownMenuItem(
                value: 'Arizonia',
                child: PointerInterceptor(
                    child: Text('Arizonia',
                        style: TextStyle(
                          fontFamily: 'Arizonia',
                        ))),
              ),
            ],
            value: _fontNameSelectedItem,
            onChanged: (String? changed) async {
              void updateSelectedItem(dynamic changed) async {
                if (changed is String) {
                  setState(mounted, this.setState, () {
                    _fontNameSelectedItem = changed;
                  });
                }
              }

              if (changed != null) {
                var proceed =
                    await widget.htmlToolbarOptions.onDropdownChanged?.call(
                            DropdownType.fontName,
                            changed,
                            updateSelectedItem) ??
                        true;
                if (proceed) {
                  widget.controller
                      .execCommand('fontName', argument: changed);
                  updateSelectedItem(changed);
                }
              }
            },
          ),

and here

   //check the font name if it matches one of the predetermined fonts and update the toolbar
  if ([
    'Courier New',
    'sans-serif',
    'Times New Roman',
    'Billabong',
    'AlexBrush'
  ].contains(fontName)) {
    setState(mounted, this.setState, () {
      _fontNameSelectedItem = fontName;
    });
  } else {
    setState(mounted, this.setState, () {
      _fontNameSelectedItem = 'sans-serif';
    });
  }

pubspec.yaml

  fonts:
    - family: AlexBrush
      fonts:
        - asset: assets/fontFamily/AlexBrush-Regular.ttf
    - family: Allura
      fonts:
        - asset: assets/fontFamily/Allura-Regular.ttf
    - family: Arizonia
      fonts:
        - asset: assets/fontFamily/Arizonia-Regular.ttf
    - family: ChunkFive
      fonts:
        - asset: assets/fontFamily/Chunk_Five_Print.ttf
    - family: GrandHotel
      fonts:
        - asset: assets/fontFamily/GrandHotel-Regular.otf
    - family: GreatVibes
      fonts:
        - asset: assets/fontFamily/GreatVibes-Regular.ttf
    - family: Lobster
      fonts:
        - asset: assets/fontFamily/Lobster-Regular.ttf
    - family: OpenSans
      fonts:
        - asset: assets/fontFamily/OpenSans-Regular.ttf
        - asset: assets/fontFamily/OpenSans-Italic.ttf
          style: italic
        - asset: assets/fontFamily/OpenSans-Bold.ttf
          weight: 700

later I tried to add a new custom button also and call this controller.execCommand('fontName', argument: 'AlexBrush');
this just changing it on drop down, not change text style

[Ashish-Raturi]

and one more thing, on real device, it not showing the editor, tool are showing and it's working perfectly in emulator
did need to add any kind for permission of something else.
please help

[tneotia]

2 things you are doing wrong I think:

1. You need to add the fonts into the editor itself because webview fonts are different from Flutter fonts, you need to make a custom HTML file like this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="Flutter Summernote HTML Editor">
    <meta name="author" content="tneotia">
    <title>Summernote Text Editor HTML</title>
    <script src="assets/packages/html_editor_enhanced/assets/jquery.min.js"></script>
    <link href="assets/packages/html_editor_enhanced/assets/summernote-lite.min.css" rel="stylesheet">
    <script src="assets/packages/html_editor_enhanced/assets/summernote-lite.min.js"></script>
    <style>
    <!--your font faces go here-->
    </style>
    <!--darkCSS-->
</head>
<body>
<div id="summernote-2"></div>
<!--headString-->
<!--summernoteScripts-->
</body>
</html>

Then pass the file location in your HtmlEditor > HtmlEditorOptions> filePath parameter to load it.

2. I think to change the font you need to select the text and then change it. I could be wrong though, I haven't tested this behavior in a while.

FYI I didn't test this, don't have much time right now. If it still doesn't work I'll try to get a working solution tomorrow.

and one more thing, on real device, it not showing the editor, tool are showing and it's working perfectly in emulator
did need to add any kind for permission of something else.
please help

Can you try loading the example app? If the example app works then there is some issue in your configuration.

[Ashish-Raturi]

here is the image, it's not showing nothing on editor.

[tneotia]

Hmm do you get any logs when opening up the editor? I have no issues on my samsung device

[tneotia]

Okay I tried to come up with an example and I was successful. I also figured out why nothing was showing on the editor. Change your app like this:
pubspec.yaml:

flutter:
  assets:
    - assets/

create assets/summernote.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="Flutter Summernote HTML Editor">
    <meta name="author" content="tneotia">
    <title>Summernote Text Editor HTML</title>
    <script src="file:///android_asset/flutter_assets/packages/html_editor_enhanced/assets/jquery.min.js"></script>
    <link href="file:///android_asset/flutter_assets/packages/html_editor_enhanced/assets/summernote-lite.min.css" rel="stylesheet">
    <script src="file:///android_asset/flutter_assets/packages/html_editor_enhanced/assets/summernote-lite.min.js"></script>
    <style>
        @font-face {
            font-family: 'Billabong';
            font-style: normal;
            font-weight: 400;
            src: local('Billabong'), url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
        }
        you need to add the other fonts here!!
    </style>
</head>
<body>
<div id="summernote-2"></div>
</body>
</html>

HtmlEditor:

HtmlEditor(
  controller: controller,
  htmlEditorOptions: HtmlEditorOptions(
    filePath: "assets/summernote.html",
  ),
  htmlToolbarOptions: HtmlToolbarOptions(
    defaultToolbarButtons: [
      StyleButtons(),
    ],
    customToolbarButtons: [
      Container(
        padding: const EdgeInsets.only(left: 8.0),
        height: kMinInteractiveDimension,
        decoration:
            BoxDecoration(
                color: Theme.of(context).scaffoldBackgroundColor,
                border: Border.all(
                    color: Theme.of(context)
                        .colorScheme
                        .onSurface
                        .withOpacity(0.12))),
        child: CustomDropdownButtonHideUnderline(
          child: CustomDropdownButton<String>(
            menuMaxHeight: MediaQuery.of(context).size.height / 3,
            menuDirection: DropdownMenuDirection.down,
            items: [
              CustomDropdownMenuItem(
                value: 'Courier New',
                child: PointerInterceptor(
                    child: Text('Courier New',
                        style: TextStyle(fontFamily: 'Courier'))),
              ),
              CustomDropdownMenuItem(
                value: 'sans-serif',
                child: PointerInterceptor(
                    child: Text('Sans Serif',
                        style: TextStyle(fontFamily: 'sans-serif'))),
              ),
              CustomDropdownMenuItem(
                value: 'Times New Roman',
                child: PointerInterceptor(
                    child: Text('Times New Roman',
                        style: TextStyle(fontFamily: 'Times'))),
              ),
              CustomDropdownMenuItem(
                value: 'Billabong',
                child: PointerInterceptor(
                    child: Text('Billabong',
                        style: TextStyle(
                          fontFamily: 'Billabong',
                        ))),
              ),
              //add your other fonts here!!
            ],
            value: 'Courier New',
            onChanged: (String? changed) async {
              if (changed != null) {
                controller.execCommand('fontName', argument: changed);
              }
            },
          ),
        ),
      )
      //add the other widgets here!!
    ],
  ),
),

To simplify my testing I didn't include font asset files in the Flutter app and I did not make it so that updating the font style changes the selected item for the dropdown. You should re-implement those functionalities.

View screenshot

Edit:

I think its a good idea to add some sort of callback/listener/stream to the package so custom UI elements can be updated.

This has been added to the package to make your code a bit easier when you make the custom button :)

[Ashish-Raturi]

bingo, it's worked, thanks bro, you are the best. :)
keep it up, have a great day.