优化移动端体验

[jakekwak]

And more toolbar option for testing.

[Vanessa219]

I tried some methods, but it didn't work out well. Do you have any good suggestions or demo?

[jakekwak]

I mean the toolbar is not showing when i try to click the editor pane.

[Vanessa219]

I know, but I don't have a good solution. Can you give some suggestions?

[jakekwak]

I want to test the vditor at the mobile. Is it mobile first? right?
When I click the editor pane at the demo, the toolbar pane have to be remained with more icon(same as desktop)

[jakekwak]

I want to test this editor using smartphone. please activate all toolbar.

[Vanessa219]

pls reload again

[jakekwak]

I don't know which one is good for mobile.
but my idea is like picture..(WYSIWYG mode)
or special charater icon ( Markdown mode)

[jakekwak]

@88250 I think the next plan will be mobile browser. android phone, iphone, android tablet, iPad etc.
What do you think about your next plan?

[88250]

@jakekwak Yes, you are right, it's time to keep moving on mobile-end. We can discuss it with @Vanessa219, decide the first thing we should do.

[stevapple]

I personally suggest the toolbar to keep floating on the top when it’s in a mobile(narrow) browser. When it comes to tablet side, the exisiting desktop experience may win. It works well with iPadOS.

[jakekwak]

@stevapple I'm testing various browser at mobile environment.
I think trix is good ui. https://trix-editor.org/

[stevapple]

@jakekwak I think trix is no better than vditor at the moment. Tested on iOS, the former has a problem of UI dislocation while the latter works pretty well.

vditor can consider to pin its bar onto the top of the screen and increase button sizes by a little bit. That’s the point.

[Vanessa219]

@stevapple @jakekwak do you like pin toolbar or floating bar?

[jakekwak]

How about the trix style. sticky toolbar style.

[Vanessa219]

@jakekwak pin toolbar is trix style

[jakekwak]

@Vanessa219 I tested the popular html editor. (froala, ckeditor4, Redactor, trix, summernote, tiptap etc.)
I think pin toolbar style is easier than others

[stevapple]

The improvements of top bar may introduce a new mode in which the height of the editor is set to be the full length of content (dynamically) and virtual scrolling (scrolling inside the editor instead of window) is disabled. When the user scrolls over the content, top bar is sticked to (pinned at) the top of the window. (Like the trix one, I’ve got the point)

When it comes to the floating bar (currently), I think the biggest problem now is the size...Too small for smartphones (fairly speaking, not even big enough for desktop), thus hard to touch.

I think the size issue is more urgent, as full-screen mode is a fine substitute except for button sizes.

[88250]

So, is the "pin bar" the best design on the mobile-end? Can I consider that we have reached an agreement? 😃

[stevapple]

I think so. Just pin it on the top of the window If it should be above. 😄

[jakekwak]

@88250 Me, yes.
What is the best tesing env for smartphone? When I use the ngrok, the error msg is "invalid Host Header",
Can I disable this error temporarily? or any other good testing env.

[stevapple]

@jakekwak What do you mean by “testing env”? Running the dev server on a PC and trying it out on a phone within the same LAN is easy and stable enough.

[jakekwak]

If possible, could you make experimental branch for IR mode.
Can type special symbols that are difficult to type on the keyboard.

[88250]

@jakekwak I agree with @stevapple: use the same WiFi with phone and PC should work.

[jakekwak]

@stevapple @88250 thanks.

[Vanessa219]

If possible, could you make experimental branch for IR mode.
Can type special symbols that are difficult to type on the keyboard.

you can set the toolbar yourself.

toolbar: [
    {
      name: "point",
      prefix: ".",
      icon: ".",
      tip: 'point',
      tipPosition: 'ne',
      click: () => {
        vditor.insertValue('.', false)
      },
    }
  ],

[jakekwak]

@Vanessa219 Thanks, Can I put custom svg icon instead of text icon(icon: ".".)?

[Vanessa219]

@jakekwak of course, like this https://hacpai.com/article/1549638745630#options-toolbar

[lhlyu]

like:

[stevapple]

@lhlyu Since vditor is a web-based editor, it cannot copy the approach of designing a native editor app which provides heavy functions nested in the same button. Also, it should consider the experience consistency between desktop and mobile-end.

However, a bottom bar may be introduced in the full-screen mode to provide text inserts (as long as there are APIs to pin the bar above the soft keyboard), like the one @jakekwak suggests.

[Vanessa219]

Maybe there is no API, so the pin top may be better than compatible with the bottom calculation?

[stevapple]

It’s necessary to pin the top bar. Meanwhile, @jakekwak is adding some text insertion buttons on it, which may make it a little bit messy. @jakekwak, can the existing buttons like heading and bold satisfy your need? They work well on iOS.

[jakekwak]

@stevapple Always I don't know which method is good.
but if make some experimental branch for testing at every device.
Everybody can test which one is good.
My first idea is that user can select normal toolbar for wysiwyg mode or text toolbar for ir mode.
I try to test custom toolbar option (combined toolbar).
if I may not find it, but I am trying to find an easier way than current input method.

[jakekwak]

Here is some demo at android phone(chrome).

1. sticky toolbar and touch friendly button.
2. custom toolbar for indent, outdent like trix
3. When touched the bottom after code, can not input
   

[Vanessa219]

@jakekwak how does trix customize indent and outdent?

[jakekwak]

@Vanessa219 I mean the user can do to put the indent in the toolbar.

[Vanessa219]

@jakekwak you mean this issue #286

[jakekwak]

@Vanessa219 Yes, Thank you