Show image and video upload button on web

[Tsovinar2000]

Is there an existing issue for this?

• [X] I have searched the existing issues

The question

I don't see image and video buttons on tool bar

[EchoEllet]

Can you provide more context? Such as what you did, code snippet, a screenshot.

[Tsovinar2000]

Can you provide more context? Such as what you did, code snippet, a screenshot.

Sure. This is the code

And this is the result

[EchoEllet]

The image and video embed buttons are provided in flutter_quill_extensions:

QuillToolbar.simple(
  configurations: QuillSimpleToolbarConfigurations(
    embedButtons: FlutterQuillEmbeds.toolbarButtons(),
  ),
),

[Tsovinar2000]

The image and video embed buttons are provided in flutter_quill_extensions:

QuillToolbar.simple(
  configurations: QuillSimpleToolbarConfigurations(
    embedButtons: FlutterQuillEmbeds.toolbarButtons(),
  ),
),

seems it has issue with the web

[EchoEllet]

Use the latest version of flutter_quill and flutter_quill_extensions (10.8.5) and run flutter pub upgrade.

[Tsovinar2000]

Use the latest version of flutter_quill and flutter_quill_extensions (10.8.5) and run flutter pub upgrade.

Thanks package installed after updating. But during adding image appears error

https://github.com/user-attachments/assets/512b112b-392b-425d-ad32-9156b7ebcb00

[EchoEllet]

Did you pass the embed builders of the image and video to the QuillEditor?

Expanded(
  child: QuillEditor.basic(
    configurations: QuillEditorConfigurations(
      embedBuilders: kIsWeb ? FlutterQuillEmbeds.editorWebBuilders() : FlutterQuillEmbeds.editorBuilders(),
    ),
  ),
)

Refer to the usage instruction of flutter_quill_extensions.

If you already did, I need the full stack trace with the log, the platform you're using (likely running on Windows), and the related code snippet of the usage.

[Tsovinar2000]

Did you pass the embed builders of the image and video to the QuillEditor?

Expanded(
  child: QuillEditor.basic(
    configurations: QuillEditorConfigurations(
      embedBuilders: kIsWeb ? FlutterQuillEmbeds.editorWebBuilders() : FlutterQuillEmbeds.editorBuilders(),
    ),
  ),
)

Refer to the usage instruction of flutter_quill_extensions.

If you already did, I need the full stack trace with the log, the platform you're using (likely running on Windows), and the related code snippet of the usage.

Thanks so much! It helped me to build editor. And last question . After sending conrtoller value to backend, how then I can show it with view mode only ?

[EchoEllet]

To save the document:

final String json = jsonEncode(_controller.document.toDelta().toJson());
// Submit the JSON Delta

To load the document:

// Load the previously stored JSON Delta
final String json = ...;

_controller.document = Document.fromJson(jsonDecode(json));

To change the read-only mode:

_controller.readOnly = true; // Or false

[Tsovinar2000]

To save the document:

final String json = jsonEncode(_controller.document.toDelta().toJson());
// Submit the JSON Delta

To load the document:

// Load the previously stored JSON Delta
final String json = ...;

_controller.document = Document.fromJson(jsonDecode(json));

To change the read-only mode:

_controller.readOnly = true; // Or false

Thanks!!