RichEditor

Richeditor

Editor Teks Kaya

Mempertimbangkan bahwa pengeditan teks yang kaya perlu mendukung jenis teks yang panjang, sebagian besar teks kaya tidak dapat menggunakan kembali tampilan menggunakan EditText tunggal khusus. Oleh karena itu, editor teks kaya yang diimplementasikan berdasarkan daur ulang saat ini sedang dalam proses pengembangan.

Kata pengantar

Untuk implementasi editor teks kaya, kami pasti akan memikirkan beberapa fitur yang diperlukan yang dibutuhkan editor yang diimplementasikan untuk mendukung:

1. Ini melibatkan tampilan dan pengeditan sejumlah besar teks, gambar, dan gaya teks.
2. Melibatkan interaksi pengguna yang sangat kompleks .

Editor Teks Kaya yang Saya Tahu di GitHub Pada dasarnya diimplementasikan berdasarkan dua jenis:

• 1. Editor Teks Kaya Berdasarkan Ekspansi Webview.
• 2. Editor Teks Kaya Berdasarkan Penulisan Uang EditText.

Berikut adalah beberapa pendapat pribadi tentang dua solusi ini.

1. Implementasi WebView

Pertama -tama, satu kelemahan dari kinerja rendering WebView adalah. Kedua, ketika melibatkan interaksi komputer manusia yang sangat kompleks, akan lebih sulit untuk mengimplementasikan Webview. Poin lain adalah bahwa kompatibilitas WebView juga merupakan poin yang perlu dipertimbangkan.

2. EditText menulis ulang

Untuk menulis ulang editText tunggal, memang sangat terukur untuk interaksi, rendering teks, dan dukungan gaya. Namun, mengingat akan ada sejumlah besar gambar, situasi memori perlu diperhitungkan di sini. Untuk EditText, jelas tidak ada tampilan penggunaan kembali. Pada dasarnya, sebanyak memori seperti ada gambar, yang dibutuhkannya. Di sisi lain, TextView asli selalu dikritik karena membuat sejumlah besar teks, dan ada banyak solusi untuk optimalisasi kinerja TextView.

Implementasi Recyclerview

Jadi saya akhirnya memilih untuk menggunakan RecyclerView sebagai solusi implementasi untuk mengimplementasikan editor teks yang kaya. Meskipun ada jebakan, itu juga merupakan solusi yang layak. (Editor Doban diimplementasikan menggunakan Recyclerview)
Keuntungan : Pertama -tama, Recyclervie, sebagai komponen asli, memiliki kinerja yang sangat baik untuk tampilan sejumlah besar komponen UI. Kedua, mekanisme multiplexing Recyclerview memberikan dukungan yang baik untuk kontrol konsumsi memori.
Kerugian :: Tentu saja, ini bukan pilihan pertama untuk menerapkan editor teks kaya. Saya telah menemukan banyak jebakan besar dalam proses implementasi. Inilah beberapa:
1. Kontrol fokus
2. Data splicing
3. Penyimpanan Gaya
4. Posisi kursor
Dan banyak lagi ...
Untungnya, solusinya ditemukan pada akhirnya, jadi saya akan membagikan solusi implementasi ini di sini, dan memberikan solusi implementasi untuk orang yang membutuhkan.

Fungsi yang diimplementasikan

1. Bold, Italic, Underline, Midscore, Strikethrough, Hyperlink, Gaya Referensi, H1, H2, H3, H4 dari Teks.
2. Masukkan dan hapus gambar
3. Pilih teks untuk mengubah gaya secara real time
4. Jaga agar gaya dalam antrean di mana saja.
5. Hapus dua baris menjadi satu baris untuk mempertahankan gaya.
6. Tampilkan gaya teks secara real time dengan kursor ke panel kontrol.
7. Sisipkan gaya di posisi apa pun
8. Teks edit terakhir ditransfer ke markdown (ada bug ~ ...)
Tunggu. . .

Menyadari efeknya

Untuk implementasi Recyclerview, operasi pengembalian carriage yang sesuai adalah untuk menambahkan model, sehingga pembungkus jalur pengembalian carriage dan penghapusan membutuhkan banyak pemrosesan logis, dan juga melibatkan penyambungan dan segmentasi indeks gaya. Singkatnya, ini adalah lubang besar.

Setelah memilih, Anda perlu mengindeks kursor, gaya, jelas dan membagi gaya, dan menciptakan kembali dan menetapkan gaya. Lubang besar, lubang besar.

Ketika kursor sesuai dengan string gaya yang sesuai, panel di bawah ini mengubah gaya saat ini secara real time. Penting untuk menggunakan penilaian logis dari interval untuk membuat penilaian logis pada interval kursor dan gaya, dan ada semakin banyak jebakan. . .

Ada juga banyak pemrosesan interaktif yang kompleks, yang tidak ditampilkan di sini. Anda dapat memeriksa kode sumber untuk detailnya.

Galeri Proyek

Richeditor

Cara menggunakan

Proyek ini tidak diterbitkan ke Jitpack di sini, karena sebagai editor teks yang kaya, setiap orang memiliki kebutuhan unik dan metode interaksi mereka sendiri, dan tidak ada cara untuk mencapai teks kaya yang dapat memenuhi semua kebutuhan. Dan karena logika interaksi editor teks kaya memang kompleks, tidak mungkin untuk memastikan kompatibilitas dengan semua interaksi dan situasi, jadi di sini kita hanya melakukan yang terbaik untuk menerapkan situasi interaksi.

1. Memperkenalkan Lib Editor ke Project 2.xml untuk menambahkan editor

 <com.study.xuan.editor.widget.Editor
        android:id="@+id/editor"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Itu akan digunakan secara normal.

Canggih

Itu sangat sederhana sehingga dienkapsulasi dan digunakan untuk menggunakan 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);
}

Diagram Arsitektur

1.RichBuilder

Global Singleton, arsitektur yang mendasarinya, membantu mengimplementasikan fungsi keseluruhan dari Richeditor.

1.1 Ipanel

Panelbuilder kelas implementasi berisi dua kelas implementasi. Fontparambuilder mewakili gaya tipe karakter dan paragrafbuilder mewakili gaya jenis paragraf. Metode komunikasi antara Panle dan Editor adalah melalui Ipanel dalam Singleton Richbuilder yang mendasarinya.

1.2 IABSTRACTFACTORY

Kelas teknik abstrak, digunakan untuk membuat jenis rentang di lapisan luar. Di antara mereka, pabrik abstrak dibagi menjadi tiga pabrik bentang: icharacterstylefactory, iparagraphfactory, dan iupdateAppeargeFactory, yang sesuai dengan karakterfactory (pabrik gaya karakter), paragraffactory (pabrik gaya paragraf), dan (pabrik khusus tidak diimplementasikan).

1.3 ISEarchStrategy

Strategi pencarian digunakan untuk melintasi dan memproses gaya rentang dalam paragraf tertentu. Normalsearch mengimplementasikan ISEarchStrategy dan menggunakan pemrosesan traversal reguler (dapat menyesuaikan penyortiran cepat atau metode penyortiran yang efisien untuk pemrosesan)

1.4 IparamManager

Antarmuka manajemen parameter, mengimplementasikan ParamManager yang sesuai dengan kelas, yang digunakan untuk membandingkan dan memproses gaya saat ini dan gaya pra-input.

2.Editor

Kelas Implementasi Editor, diwarisi dari RecyclerView, adaptor sesuai dengan RichAdapter, dan model sesuai dengan RichModel.

2.1 ispanfilter

Input filter untuk pemrosesan gaya saat input dan penghapusan.
VESTEP1FILTER
Filter tingkat pertama digunakan untuk menangani pemrosesan SPAN_EXCLUSIVE_INCLUSIVE dan SPAN_EXCLUSIVE_EXCLUSIVE saat menangani gaya dan kebingungan.
BPRINTEP2FILTER
Filter tingkat kedua digunakan untuk menangani pembuatan dan pemeliharaan gaya, untuk mendapatkan semua set gaya teks saat ini, dan untuk merekam indeks gaya yang sesuai, dan untuk mempertahankannya di RichModel yang sesuai.

2.2 Parseasynctask

Pemrosesan asinkron, digunakan untuk memproses konversi data ke jenis konversi yang sesuai.
Parse
Mengonversi antarmuka
MarkdownParse
Pemrosesan logis dikonversi ke sintaks penurunan markdown, menggunakan ekspresi reguler.

2.3 Richmodelhelper

Kelas pemrosesan data, menggunakan pemrosesan data yang terkait dengan gaya gabungan, gaya pemrosesan, dll.

3.Panel

Panel mewakili panel operasi, dan panel menggunakan editorpanelalpha secara default. Panel diimplementasikan melalui Ipanel di Richbuilder untuk menautkan editor.

jadwal:

[2018.3.17]: Pengeditan teks kaya dalam baris teks.
[2018.3.19]: Lengkapi penghapusan beberapa baris teks, tambahkan satu baris, dan hapus baris berikutnya ke baris sebelumnya. Dan pertahankan gaya.
[2018.3.20]: Lengkapi penghapusan dan penambahan beberapa baris teks, termasuk baris penghapusan pertama dan input in-line, menjaga gaya teks yang kaya bergerak dengan paragraf.
[2018.3.24]: Sinkronisasi lengkap bilah operasi setelah mengklik, menjaga gaya teks dan gaya batang operasi saat ini bersatu.
[2018.3.29]: Lengkapi fungsi memasukkan gaya baru dan awalnya melengkapi fungsi dasar pengeditan.
[2018.4.09]: Fungsi gaya paragraf lengkap.
[2018.4.11]: Penyelesaian pendahuluan dari markdown sintaks Escape.

Lisensi

 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.