Ionic-framework: bug: Contenteditable can’t scroll in ios/android and difficult to get focus

[Nick-The-Uncharted]

Type: bug

Platform: mobile webview

I normally need to click twice to focus on the contenteditable div , and if my input was long enough ,there is no scroll bar showed up (it's normal in safari). If wraped this div with ion-scroll, then it can't get focus at all. That's my div:

<div contenteditable="true" data-tap-disabled="true" overflow-scroll="true" style="height:200px;overflow:scroll;background-color:red"></div></span>

[mhartington]

It's not really recommended to use contenteditable divs. Use a textarea instead.

[Nick-The-Uncharted]

@mhartington But I am trying to integrate a editor like quill into my app.TextArea seems only support plain text.

[Nick-The-Uncharted]

@mhartington If move div out of ion-content then it works fine. But part of my page will overlap with header, I can fix this by adjust it's position though. Maybe ionic prevent event like swipe ?

[mhartington]

So the overall issue here is that the scrolling/tap logic ionic doesn't play well with contenteditable divs. Ion-content is a big part of that since it's our js-scrolling. If you could provide a codepen of what you have I can load it on a device and test it out.

[Nick-The-Uncharted]

@mhartington This is my codepen(run it in emulator , it is normal in safari/chrome).When creating it I found my div can scroll if keyboard is not shown.So maybe keyboard is the reason when it act abnormally.

[KillerCodeMonkey]

@mhartington
i recognized similar things.
I have tried to to use something like wysiwyg editors and they are using contenteditable divs or iframes with a textarea. The contenteditable div works better than the iframe+textarea.

[TonyLuo]

+1. when press enter, the new line of the text cannot be focused. looking forward to seeing this issue be fixed

[TheMattRay]

+1

[b3na]

+1. Having a rough time implementing a WYSIWYG editor, mainly in iOS, so this fix or maybe ionic creating a custom text editor would be great.

[ghost]

+1 for the text editor with tagging.

[jgw96]

Hello all! I am going to close this as it is not recommended to use contenteditable divs (not only with ionic, but with the web in general). Textareas are the way to go, especially for mobile, and some of the best web based editors ive seen (https://ace.c9.io/#nav=about) are wrapped with a textarea. Thanks for using Ionic!

[franbueno]

Hi @jgw96,

I´m still figuring out the best approach to create a rich editor. Basically, i need to add texts, videos and images. You said that you don't recommended to use contenteditable but have no idea how to do it without contenteditable... any hint? Thanks :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.