Fluent text editor

Graphic editing is used in recent projects , So find a technical solution

Here it is , I also found a good plug-in , Share with you ,

Address

Introduce

Flutter HTML Editor Enhanced It's a Android、iOS and Web Text editor for , It can help you write WYSIWYG HTML Code . On-line API Reference resources

install

Mode one ： Run this command ：

  flutter pub add html_editor_enhanced

This will be in your bag pubspec.yaml Add such a line in （ And run an implicit flutter pub get）：

Or directly at pubspec.yaml After adding in ,

dependencies:  html_editor_enhanced: ^2.5.0

function

、 perhaps , Your editor may support flutter pub get. Check your editor's documentation for more information .

Import it

Now in your Dart In the code , You can use ：

import 'package:html_editor_enhanced/html_editor.dart';import 'package:html_editor_enhanced/utils/callbacks.dart';import 'package:html_editor_enhanced/utils/file_upload_model.dart';import 'package:html_editor_enhanced/utils/options.dart';import 'package:html_editor_enhanced/utils/plugins.dart';import 'package:html_editor_enhanced/utils/shims/dart_ui.dart';import 'package:html_editor_enhanced/utils/shims/dart_ui_fake.dart';import 'package:html_editor_enhanced/utils/shims/dart_ui_real.dart';import 'package:html_editor_enhanced/utils/shims/flutter_inappwebview_fake.dart';import 'package:html_editor_enhanced/utils/toolbar.dart';import 'package:html_editor_enhanced/utils/utils.dart';

Simplest use

import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:html_editor_enhanced/html_editor.dart';import 'package:file_picker/file_picker.dart';​void main() => runApp(HtmlEditorExampleApp());​class HtmlEditorExampleApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(),      darkTheme: ThemeData.dark(),      home: HtmlEditorExample(title: ' Big front end tour '),    );  }}​class HtmlEditorExample extends StatefulWidget {  HtmlEditorExample({Key? key, required this.title}) : super(key: key);​  final String title;​  @override  _HtmlEditorExampleState createState() => _HtmlEditorExampleState();}​class _HtmlEditorExampleState extends State<HtmlEditorExample> {  String result = '';  final HtmlEditorController controller = HtmlEditorController();​  @override  Widget build(BuildContext context) {    return GestureDetector(      onTap: () {        if (!kIsWeb) {          controller.clearFocus();        }      },      child: Scaffold(        appBar: AppBar(          title: Text(widget.title),          elevation: 0,          actions: [            IconButton(                icon: Icon(Icons.refresh),                onPressed: () {                  if (kIsWeb) {                    controller.reloadWeb();                  } else {                    controller.editorController!.reload();                  }                })          ],        ),        floatingActionButton: FloatingActionButton(          onPressed: () {            controller.toggleCodeView();          },          child: Text(r'<\>',              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),        ),        body: SingleChildScrollView(          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            children: <Widget>[              HtmlEditor(                controller: controller,                htmlEditorOptions: HtmlEditorOptions(                  hint: 'Your text here...',                  shouldEnsureVisible: true,                  //initialText: "<p>text content initial, if any</p>",                ),                htmlToolbarOptions: HtmlToolbarOptions(                  toolbarPosition: ToolbarPosition.custom, //by default                  // toolbarType: ToolbarType.nativeExpandable, //                  onButtonPressed:                      (ButtonType type, bool? status, Function? updateStatus) {                    print(                        "button '${describeEnum(type)}' pressed, the current selected status is $status");                    return true;                  },                  onDropdownChanged: (DropdownType type, dynamic changed,                      Function(dynamic)? updateSelectedItem) {                    print(                        "dropdown '${describeEnum(type)}' changed to $changed");                    return true;                  },                  mediaLinkInsertInterceptor:                      (String url, InsertFileType type) {                    print(url);                    return true;                  },                  mediaUploadInterceptor:                      (PlatformFile file, InsertFileType type) async {                    print(file.name); //filename                    print(file.size); //size in bytes                    print(file.extension); //file extension (eg jpeg or mp4)                    return true;                  },                ),                otherOptions: OtherOptions(height: 700),                callbacks: Callbacks(onBeforeCommand: (String? currentHtml) {                  print('html before change is $currentHtml');                }, onChangeContent: (String? changed) {                  print('content changed to $changed');                }, onChangeCodeview: (String? changed) {                  print('code changed to $changed');                }, onChangeSelection: (EditorSettings settings) {                  print('parent element is ${settings.parentElement}');                  print('font name is ${settings.fontName}');                }, onDialogShown: () {                  print('dialog shown');                }, onEnter: () {                  print('enter/return pressed');                }, onFocus: () {                  print('editor focused');                }, onBlur: () {                  print('editor unfocused');                }, onBlurCodeview: () {                  print('codeview either focused or unfocused');                }, onInit: () {                  print('init');                }, onImageUploadError:                    (FileUpload? file, String? base64Str, UploadError error) {                  print(describeEnum(error));                  print(base64Str ?? '');                  if (file != null) {                    print(file.name);                    print(file.size);                    print(file.type);                  }                }, onKeyDown: (int? keyCode) {                  print('$keyCode key downed');                  print(                      'current character count: ${controller.characterCount}');                }, onKeyUp: (int? keyCode) {                  print('$keyCode key released');                }, onMouseDown: () {                  print('mouse downed');                }, onMouseUp: () {                  print('mouse released');                }, onNavigationRequestMobile: (String url) {                  print(url);                  return NavigationActionPolicy.ALLOW;                }, onPaste: () {                  print('pasted into editor');                }, onScroll: () {                  print('editor scrolled');                }),              ),              Padding(                padding: const EdgeInsets.all(8.0),                child: Row(                  mainAxisAlignment: MainAxisAlignment.center,                  children: <Widget>[                    SizedBox(                      width: 16,                    ),                    TextButton(                      style: TextButton.styleFrom(                          backgroundColor: Colors.blueGrey),                      onPressed: () {                        controller.clear();                      },                      child: Text(' Empty ', style: TextStyle(color: Colors.white)),                    ),                    SizedBox(                      width: 16,                    ),                    TextButton(                      style: TextButton.styleFrom(                          backgroundColor:                              Theme.of(context).colorScheme.secondary),                      onPressed: () async {                        var txt = await controller.getText();                        if (txt.contains('src=\"data:')) {                          txt =                              '<text removed due to base-64 data, displaying the text could cause the app to crash>';                        }                        setState(() {                          result = txt;                        });                      },                      child: Text(                        ' Submit ',                        style: TextStyle(color: Colors.white),                      ),                    ),                    SizedBox(                      width: 16,                    ),                    TextButton(                      style: TextButton.styleFrom(                          backgroundColor:                              Theme.of(context).colorScheme.secondary),                      onPressed: () {                        controller.insertText('Google');                      },                      child: Text(' Insert ', style: TextStyle(color: Colors.white)),                    ),                  ],                ),              ),              Padding(                padding: const EdgeInsets.all(8.0),                child: Column(                  mainAxisAlignment: MainAxisAlignment.center,                  children: <Widget>[                    Text(                      result,                      style: TextStyle(color: Colors.white),                    ),                    TextButton(                      style: TextButton.styleFrom(                          backgroundColor:                              Theme.of(context).colorScheme.secondary),                      onPressed: () {                        controller.insertNetworkImage(                            'https://luckly007.oss-cn-beijing.aliyuncs.com/macimages/image-20220713142248972.png',                            filename: 'network image');                      },                      child: Text(                        ' Insert a picture ',                        style: TextStyle(color: Colors.white),                      ),                    ),                  ],                ),              ),            ],          ),        ),      ),    );  }}​

​class descTitleWidget extends StatelessWidget {  const descTitleWidget({    Key? key,    required this.submit,  }) : super(key: key);​  final String submit;​  @override  Widget build(BuildContext context) {    return Container(      decoration: new BoxDecoration(        // background         color: Color(0xFFF6F6F6),        // Set round corner   angle ​        borderRadius: BorderRadius.only(            topLeft: Radius.circular(24.w), topRight: Radius.circular(24.w)),        // Set the border around         border: new Border.all(width: 1.w, color: Color(0x99CFD3E6)),      ),      height: 96.w,      padding: EdgeInsets.only(          left: 28.w,          // top: 32.w,          right: 28.w),      width: MediaQuery.of(context).size.width,      child: Row(        mainAxisAlignment: MainAxisAlignment.spaceBetween,        crossAxisAlignment: CrossAxisAlignment.center,        children: [          Text(            submit,            style: currentTheme.ctd.subTitle * currentTheme.ctd.txtBlack,          ),          Row(            children: [              SizedBox(                width: 124.w,                height: 52.w,                child: TextButton.icon(                    onPressed: () async {                      // var clipboardData = await Clipboard                      //     .getData(Clipboard                      //         .kTextPlain); // Get the text in the pasteboard                       // if (clipboardData != null)                      //   _clipBoardData =                      //       clipboardData.text!;                      // else                      //   _clipBoardData = "";                      // int start = _quillController!                      //     .selection.start;                      // _quillController!.document.insert(                      //     start, _clipBoardData);​                      // refreshUI();                    },                    style: TextButton.styleFrom(                      padding: EdgeInsets.zero,                      primary: Colors.white,                      backgroundColor: Colors.white,                      textStyle: TextStyle(fontSize: 20.w),                      shape: RoundedRectangleBorder(                          borderRadius:                              BorderRadius.all(Radius.circular(40.w))),                    ),                    icon: Image.asset("images/circle-icon-paste.png"),                    label: Text(" Paste ",                        style: TextStyle(                          fontSize: 20.w,                          color: Color_TitleBlack,                        ))),              ),              SizedBox(width: 10.w),              SizedBox(                width: 124.w,                height: 52.w,                child: TextButton.icon(                    onPressed: () {                      // _picPicker();                    },                    style: TextButton.styleFrom(                      padding: EdgeInsets.zero,                      primary: Colors.white,                      backgroundColor: Colors.white,                      textStyle: TextStyle(fontSize: 20.w),                      shape: RoundedRectangleBorder(                          borderRadius:                              BorderRadius.all(Radius.circular(40.w))),                    ),                    icon: Image.asset("images/circle-icon-album.png"),                    label: Text(" illustrations ",                        style: TextStyle(                          fontSize: 20.w,                          color: Color_TitleBlack,                        ))),              ),            ],          ),        ],      ),    );  }}​