I developed Wangeditor-mobile's story

Wangeditor-mobileis a rich text editor for mobile phone, finger operation, Wangeditor-mobile official website 1. Write in front

In fact, I did not want to do at the beginning of the mobile phone-side operation of the rich Text editor.

Wangeditor is a rich text editor I started in November 2014, with code hosted on GitHub, open source, share, and talk to people. With my year of maintenance, upgrade, share some technical blog, but also slowly for the wangeditor saved a handful of users.

Among them, one user put forward: "Do a mobile phone, now their project needs the editor of the mobile side." In fact, there are not many people who put forward such demand, and most people think that the mobile phone editor Rich text content, too much effort, no one will do so.

After I got this reminder, who's opinion I did not listen to, I was myself quietly thinking about some time, feel very necessary to do! The main reasons are:

• Mobile is already a trend, and the flow of each product is moving toward the end. All things, everyone is looking for how to use mobile phone easy to solve.
• If, as some people say, no one will edit rich text content on the mobile side, then office, Evernote, Youdao Cloud notes why the app?
• Now the Internet is suitable for the mobile phone side of the Rich Text editor, (no matter how easy to use) for the time being, this is the opportunity.

The decision is going to be done, it's muddy water I'm going to go!

2. The burning brain design process

The next thing to consider is how to do it, and the most burning thing is how the menu bar is designed.

scenario One, like the PC side, the menu bar is placed above or below the content area , such as:

If this is placed on a mobile phone, the screen can not find a scrolling menu bar, how to use? Must have been given up. Now there are wangeditor users with the PC version of the phone, but you may do the project so that can be done, but I do is the product, no user experience, I absolutely do not do.

Here, let me spit out some of those rich text editor products that generate support for mobile, such as XXX. You take the PC-side editor on your phone, and use it to suck up your milk, also called "Support"? What is the user experience?

Scenario Two, worship iOS, menu bar close to the virtual keyboard . Such as:

In fact, NetEase cloud notes are also used this way. I was very fond of it, and also very determined this way, the user experience of this way is the best, not one! Unfortunately, they are all native apps or native app support, and I only do web-side, JavaScript and CSS, do not have this effect.

After a period of time to find the results but eventually fruitless, I like a vent of the ball ...

During that time I was looking for another suitable answer, but I never found it. Sometimes forcing yourself to come up with some strange-looking way, and then I gave up 1 minutes later.

......

In fact, the best use of things, often also the most concise. Here the "good" and "concise" have a common feature-0 study cost!

scenario three, simulate the way the browser menu . Such as:

I have now forgotten how to think of this kind of solution. And the above forcing themselves to think out of the different, this program is really inadvertently out of the mind. Some people may wonder: how stupid, so simple things, it took so long to think out? --I want to say: Zhuge Liang has no say in hindsight. No matter how simple it is, no one has done so at the moment.

Then I took the program and spent some time developing, writing documents, optimizing, and doing compatibility, and finally came out. Because I think this is the best solution beyond scenario 2-the best user experience!

After you have finished browsing the demo, please continue to look at the following points.

Product View

Wangeditor-mobile This product also represents my understanding of the current mobile internet "fast food culture". Although it is a "rich Text" editor, it has very little functionality and is very simple to operate.

If a user wants to write a structured contract or a tender, he must not write it on a mobile phone or pad. I've done this kind of work, with Office Word finished, and I have to fix several versions to publish. Then the user writes the thing with the handset, certainly is compares the life, the sex thing, for example record mood, the remark and so on. And these, wangeditor-mobile these functions can satisfy you completely.

seize the user's core needs . Everything is in line with the 2/8 principle, I want to do 20% of the functions to meet 80% of the users, the remaining 20% of users I do not consider.

finally

At present, this product has been started to pay attention to and try to use, but after all, mobile demand is not large, or my promotion ability limit only so many people can see it.

In addition, the mobile web is known for the compatibility of the various browsers in the Android system, I am now also more difficult, and will not be gradually improve the solution.

Interested in joining our QQ group: 164999061 Wangeditor-mobile

-------------------------------------------------------------------------------------------------------------

Please follow my tutorials:

"Using grunt to build a fully automated web front-end development environment" " from design to Mode" "Json2.js Source Interpretation video"

"In- depth understanding of JavaScript prototype and closure series " "CSS know how Much" "Microsoft petshop4.0 Source Interpretation Video"

------------------------------------------------------------------------------------------------------------

Wangeditor, lightweight web Rich Text editor

Wangeditor-mobile, a rich text editor for mobile phones

-------------------------------------------------------------------------------------------------------------

I developed Wangeditor-mobile's story