CustomizableEditor constructor

const CustomizableEditor({
  1. Key? key,
  2. bool showPreview = true,
  3. String? initialValue,
  4. int? maxLength,
  5. String placeholderMarker = "\\\$",
  6. List<RichTextPlaceholder> placeholders = const [],
  7. dynamic onChanged(
    1. String
    ) = CustomizableEditor._doNothingWithResult,
  8. EditorDecoration editorDecoration = const EditorDecoration(),
  9. List<String> availableColors = TextConstants.defaultColors,
  10. bool alwaysShowButtons = true,
  11. CustomizableEditorController? controller,
  12. List<Widget>? additionalActionButtons,
  13. bool autofocus = false,
  14. List<ButtonRowType> availableButtons = ButtonRowType.values,
  15. Widget builder(
    1. BuildContext context,
    2. Widget editor,
    3. Widget preview
    )?,
  16. bool isHtmlPriview = true,
  17. FocusNode? focusNode,
})

Creates a new instance of a HTML text editor. editorLabel is displayed at the text input, styled by labelStyle when not focused, styled by focusedLabelStyle else

cursorColor is the color of the cursor of the text input

inputStyle text-style of the written code

A rendered preview is displayed, when showPreview is set to true, with an optional previewLabel is displayed below it

onChanged is called each time, the HTML input changes providing the written code as parameter

An optional maxLength can be provided, which is applied in the code input, not at the rendered text.

If initialValue is set, the provided text is loaded into the editor.

It is possible to use placeholders in the code. They have to be enclosed with placeholderMarker. If the marker is set to "$" for example, it could look like $VARIABLE$, which would get substituted in the richtext.

Per default, all button types are displayed above the editor textfield. availableButtons can be provided to specify the visible buttons

Implementation

const CustomizableEditor({
  super.key,
  this.showPreview = true,
  this.initialValue,
  this.maxLength,
  this.placeholderMarker = "\\\$",
  this.placeholders = const [],
  this.onChanged = CustomizableEditor._doNothingWithResult,
  this.editorDecoration = const EditorDecoration(),
  this.availableColors = TextConstants.defaultColors,
  this.alwaysShowButtons = true,
  this.controller,
  this.additionalActionButtons,
  this.autofocus = false,
  this.availableButtons = ButtonRowType.values,
  this.builder,
  this.isHtmlPriview = true,
  this.focusNode,
});