rich_editor

rich_editor

Éditeur WYSIWYG pour Flutter avec un riche ensemble d'options de formatage pris en charge.

Basé sur https://github.com/dankito/richtexteditor, mais pour Flutter.

Caractéristiques

• Audacieux, italique, soulignement, frappe, indice, exposant
• En-tête 1 - 6, corps de texte, préformaté, citation de blocs
• Font (lit toutes les polices système) (Android uniquement)
• Taille de la police
• Couleur de texte
• Couleur d'arrière-plan de texte
• Mettre en évidence le texte
• Justifier la gauche, le centre, la droite, Blockquote
• Titulaire, extérieur
• Défaire, refaire
• Liste non ordonnée (balles)
• Liste commandée (numéros)
• Insérer une image locale ou distante
• Insérer un lien
• Insérer la case à cocher
• Recherche
• Indicateurs d'icônes

? Captures d'écran

Usage

      // Insert widget into tree
      RichEditor (
        key : keyEditor,
        value : 'initial html here' ,
        editorOptions : RichEditorOptions (
          placeholder : 'Start typing' ,
          // backgroundColor: Colors.blueGrey, // Editor's bg color
          // baseTextColor: Colors.white,
          // editor padding
          padding : EdgeInsets . symmetric (horizontal : 5.0 ),
          // font name
          baseFontFamily : 'sans-serif' ,
          // Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM)
          barPosition : BarPosition . TOP ,
        ),
        // You can return a Link (maybe you need to upload the image to your
        // storage before displaying in the editor or you can also use base64
        getImageUrl : (image) {
          String link = 'https://avatars.githubusercontent.com/u/24323581?v=4' ;
          String base64 = base64Encode (image. readAsBytesSync ());
          String base64String = 'data:image/png;base64, $ base64 ' ;
          return base64String;
        },
      )

Obtenez le HTML actuel de l'éditeur

 String ? html = await keyEditor.currentState ? . getHtml ();
print (html);

Définir la mise au point et le flou

 await keyEditor.currentState ? . focus ();
await keyEditor.currentState ? . unFocus ();

Contenu de l'éditeur clair

 await keyEditor.currentState ? . clear ();

Barre d'outils personnalisée

Si vous êtes intéressé à créer votre propre barre d'outils, vérifiez le personnalisé_toolbar_demo.dart dans l'exemple

Licence

 Copyright 2021 JideGuru

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.