Éditeur de texte riche
Étant donné que l'édition de texte riche doit prendre en charge de longs types de texte, la plupart des textes riches ne peuvent pas réutiliser des vues à l'aide de l'édition unique personnalisée. Par conséquent, l'éditeur de texte riche implémenté sur la base de RecycleView est actuellement en cours de développement.
Pour la mise en œuvre de riches éditeurs de texte, nous penserons certainement à plusieurs fonctionnalités nécessaires que l'éditeur implémenté doit prendre en charge:
1. Elle implique l'affichage et l'édition d' un grand nombre de texte, d'images et de styles de texte.
2. Implique des interactions utilisateur extrêmement complexes .
L'éditeur de texte riche que je connais sur GitHub est essentiellement implémenté en fonction de deux types:
Voici quelques opinions personnelles sur ces deux solutions.
Tout d'abord, un inconvénient des performances de rendu de WebView est. Deuxièmement, lorsqu'il implique des interactions humaines-ordinateur extrêmement complexes, il sera plus difficile d'implémenter WebView. Un autre point est que la compatibilité de WebView est également un point qui doit être pris en compte.
Pour réécrire un seul édition, il est en effet très évolutif pour l'interaction, le rendu de texte et la prise en charge du style. Cependant, étant donné qu'il y aura un grand nombre de photos, la situation de la mémoire doit être prise en compte ici. Pour EditText, il n'y a certainement pas de réutilisation de vue. Fondamentalement, autant de mémoire qu'il y a d'images, cela nécessite. D'un autre côté, Native TextView a toujours été critiqué pour avoir rendu une grande quantité de texte, et il existe de nombreuses solutions pour l'optimisation des performances de TextView.
J'ai donc fini par choisir d'utiliser RecyclerView comme solution d'implémentation pour implémenter un éditeur de texte riche. Bien qu'il y ait des pièges, c'est aussi une solution réalisable. (L'éditeur de Douban est implémenté à l'aide de recyclerView)
Avantages : Tout d'abord, Recyclergie, en tant que composant natif, a de très bonnes performances pour l'affichage d'un grand nombre de composants d'interface utilisateur. Deuxièmement, le mécanisme de multiplexage du recyclerview fournit un bon support pour le contrôle de la consommation de mémoire.
Inconvénients :: Bien sûr, ce n'est pas le premier choix pour mettre en œuvre de riches éditeurs de texte. J'ai rencontré de nombreux gros pièges dans le processus de mise en œuvre. En voici quelques-uns:
1. Contrôle de la mise au point
2. Data Splicing
3. Storage de style
4. La position du curseur
Et bien plus ...
Heureusement, la solution a finalement été trouvée, je vais donc partager cette solution d'implémentation ici et fournir une solution d'implémentation aux personnes dans le besoin.
1. Audacieux, italique, soulignement, intermédiaire, strikethrough, hyperlien, style de référence, H1, H2, H3, H4 du texte.
2. Insérer et supprimer des images
3. Sélectionnez du texte pour changer le style en temps réel
4. Gardez le style en emballage en ligne n'importe où.
5. Supprimer deux lignes en une seule ligne pour maintenir le style.
6. Afficher les styles de texte en temps réel avec le curseur du panneau de commande.
7. Insérer des styles à n'importe quelle position
8. Le texte de modification final est transféré à Markdown (il y a des bogues ~ ...)
attendez. . .
Pour l'implémentation RecyclerView, le fonctionnement correspondant du retour du chariot consiste à ajouter un modèle, donc l'enveloppe et la suppression de la ligne de retour du chariot nécessite beaucoup de traitement logique, et implique également l'épissage et la segmentation des indices de style. Bref, c'est une grande fosse.
Après avoir sélectionné, vous devez indexer le curseur, style, effacer et diviser le style, et recréer et attribuer le style. Big Pit, Big Pit.
Lorsque le curseur correspond à la chaîne du style correspondant, le panneau ci-dessous modifie le style actuel en temps réel. Il est nécessaire d'utiliser le jugement logique de l'intervalle pour porter des jugements logiques sur les intervalles de curseur et de style, et il y a de plus en plus de pièges. . .
Il existe également de nombreux traitements interactifs complexes, qui ne sont pas affichés ici. Vous pouvez vérifier le code source pour plus de détails.
Riche
Le projet n'est pas publié sur Jitpack ici, car en tant qu'éditeur de texte riche, tout le monde a ses propres besoins et méthodes d'interaction uniques, et il n'y a aucun moyen de réaliser un texte riche qui peut répondre à tous les besoins. Et comme la logique d'interaction des éditeurs de texte riches est en effet complexe, il est impossible d'assurer la compatibilité avec toutes les interactions et situations, donc nous faisons ici de notre mieux pour mettre en œuvre la situation d'interaction.
1. Présentez la lib de l'éditeur au projet 2.xml pour ajouter l'éditeur
<com.study.xuan.editor.widget.Editor
android:id="@+id/editor"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Il sera utilisé normalement.
Il est si simple qu'il est encapsulé et utilisé pour utiliser Richhelper
//绑定xml中的Editor
public void attach(Editor editor);
//new 一个Editor
public Editor buildEditor(Context context)
//部分事件回调
public void setCallBack(onEditorEventListener callBack)
//操作面板右侧空白增加自定义布局
public void setMoreOperateLayout(View view)
//异步转义MarkDown
public void toMarkDown()
public interface onEditorCallback {
//行数量变化时
void onLineNumChange(List<RichModel> data);
//点击操作面板的图片添加图片,可以使用自己项目中的图片框架,选中后对应调用editor.addPhoto(List<String> data);方法即可
void onPhotoEvent();
//转义MarkDown的进度回调
void onMarkDownTaskDoing(int progress, int max);
//转义MarkDown成功
void onMarkDownTaskFinished(String markdown);
}
Global Singleton, l'architecture sous-jacente, aide à mettre en œuvre les fonctions globales de RichEditor.
La classe d'implémentation PanelBuilder contient deux classes d'implémentation. Fontparambuilder représente le style de type de caractère et le paragraphbuilder représente le style de type de paragraphe. La méthode de communication entre Panle et Editor se situe via l'iPanel dans le Singleton Richbuilder sous-jacent.
Classe d'ingénierie abstraite, utilisée pour créer des types de gamme dans la couche externe. Parmi eux, les usines abstraites sont divisées en usines à trois spin: icharacterstylefactory, iParagraphfactory et iupdateAppearanceFactory, qui correspondent à un personnagefactory (Factory de style de caractères), paragraphfactory (Factory de style paragraphe) et (usine personnalisée non implémentée).
La stratégie de recherche est utilisée pour traverser et traiter les styles de portée dans un certain paragraphe. NormalSearch implémente iSearchStrategy et utilise un traitement de traversée régulière (peut personnaliser le tri rapide ou d'autres méthodes de tri efficientes pour le traitement)
Interface de gestion des paramètres, implémente le paramManager correspondant à la classe, qui est utilisé pour comparer et traiter le style actuel et le style de pré-entrée.
La classe d'implémentation de l'éditeur, héritée de RecyclerView, l'adaptateur correspond à RichAdapter et le modèle correspond à RichModel.
Filtre d'entrée pour le traitement du style lors de l'entrée et de la suppression.
Spanstep1filter
Le filtre de premier niveau est utilisé pour gérer le traitement de SPAN_EXCLUSIVE_INCLUSIVE et SPAN_EXCLUSIVE_EXCLUSIVE lors de la gestion des ajout et des confusions de style.
Spanstep2filter
Le filtre de deuxième niveau est utilisé pour gérer la création et la maintenance des styles, pour obtenir tous les ensembles de style du texte actuel, et pour enregistrer l'index correspondant du style et le maintenir dans le RichModel correspondant.
Traitement asynchrone, utilisé pour traiter la conversion des données en type de conversion correspondant.
Analyse
Interface de conversion
Markdownparse
Traitement logique converti en syntaxe Markdown, en utilisant des expressions régulières.
Classe de traitement des données, en utilisant le traitement des données lié aux styles de fusion, aux styles de traitement, etc.
Le panneau représente le panneau d'opération et le panneau utilise EditorPanelalpha par défaut. Le panneau est implémenté via Ipanel dans RichBuilder pour lier l'éditeur.
[2018.3.17]: Édition de texte riche dans une ligne de texte.
[2018.3.19]: Complétez la suppression de plusieurs lignes de texte, ajoutez une ligne et supprimez la ligne suivante à la ligne précédente. Et gardez le style.
[2018.3.20]: Complétez la suppression et l'ajout de plusieurs lignes de texte, y compris la première ligne de suppression et l'entrée en ligne, en gardant le style de texte riche en mouvement avec le paragraphe.
[2018.3.24]: Synchronisation complète de la barre d'opération après avoir cliqué, en gardant le style de texte et le style de barre d'opération actuel unifié.
[2018.3.29]: Complétez la fonction d'insertion de nouveaux styles et complétez initialement les fonctions de base de l'édition.
[2018.4.09]: fonction complète de style de paragraphe.
[2018.4.11]: Achèvement préliminaire de l'évasion de la syntaxe de Markdown.
Copyright 2017 [DrownCoder]
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.