Preface: After a few months of project time. We ran into a front-end publishing feature that used rich text editing. The richeditor-Android third-party framework was finally adopted after some measurement. The realization principle is to realize front-end rich text through webView and JS. If you want to know, you can click on the link above and research it. While Richeditor-Android has implemented most of the core content for us, there are a lot of details that it hasn’t perfected, which is why its issues are over 170. I don’t know if it stopped. Next is the author stepped on the N pit, the function of the basic completion. It can be said that it is highly imitation of “Toutiao rich text editing”.


First, let’s see what functions have been completed

(Richeditor-Android will not be repeated here, only the details of completion will be explained.)


1.1. When there is no focus, take the initiative to get focus and pop up the soft keyboard

Revised:When you first open rich text editing, hit Bold, underline, or upload an image, actively grab focus and pop up the soft keyboard.


1.2. When the cursor returns to a certain place, TAB below selects the current style, and the same goes for undo and rollback

Revised:When the cursor changes, reverses, or deletes, the lower TAB will select the desired style based on the current style


1.3 upload picture, automatically wrap, and automatically scroll to the bottom. And it fills the screen

Revised:After selecting the picture, insert the picture to automatically wrap, automatically scroll to the bottom, and pop up the soft keyboard. (Picture fills the screen)


1.4. Click the picture to edit the picture (clipping) or delete the picture

Revised:Clicking on an image adds deletion and editing functions, and editing and clipping images mimics headlines. (Note: the picture selection and picture clipping here are from a third party, and the link will be attached later. After modification, the author added animation of proportion switch, adapted full screen and processed virtual keys.)


1.5. Modified the typesetting style of text, picture and serial number according to the typesetting style of the headline

Revised:The original model is less than ideal. After looking at the layout of the headlines, I changed the CSS style. Try to mimic the feeling of the first strip


1.6 after the text is selected, the selected text will remain unchanged until the screen is not clicked. Highly imitative headlines

Revised:If you hit 1 or 2 bold before, the selected text will go away. Now it is not active to click the screen, selected text will not cancel


1.7 when the author implemented this function, he also encountered a lack of SSL certificate, so the picture could not be displayed. Ignore SSL certificates have also been added

It has appeared in Huawei and Xiaomi. When it appeared, I failed to upload pictures using toutiao APP. After a while, the phone worked again. Anyway, plus ignoring SSL, it’s going to work.


2. Now let’s take a look at the function of reediting published articles.


Third, summary.

At this point, a rich text that mimics headlines was born. If you encounter or have any odd features that do not meet your requirements, please contact me.

  • The picture selection framework used in the article, suggested to use demo, is the author adapted to the full screen modification
  • Article used clipping framework, suggested to use demo, is the author adapted to the full screen modified
  • Please note: the picture of local path is used in this article. If it is a network map, it can be directly replaced by a network map
  • The result is HTML, which can be displayed at various ends of the front end

High copy toutiao rich text editor, published articles, github address

Want to grow up with me? Please follow my official account