XF 2.1 Turn BBCode editor off by default on mobile devices

[adamgreenough]

I'm trying to work out how to load the editor in BbCode OFF mode on mobile devices. I'm hoping I can just create a few lines of JavaScript to hook in to this and flick it off each time. It provides a MUCH better experience on mobiles while this is turned off and is easily turned on if people need advanced options.



Detecting a mobile device is simple...

if( /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) {
 // run your code here
}

It is not as easy as just creating a click event on that button each time as it seems to remember the previous setting. I wonder if anybody here can help me with this?

 

[adamgreenough]

Ok, so I am disappointed with how long I spent in the Froala and XF docs to come up with such a simple solution!

if(/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
    window.localStorage.setItem('xf_editorDisabled', '1');
}

This sets the local storage BB toggle preference to disabled each time the page is loaded on mobiles. Perhaps not the best solution but it eases some of my frustration with it for now. Let me know if there's a better way!

This is in response to the errors pointed out here:

XF 2.1 - Major editor complaints

I have many users complaining about the post editor. Cursor jumping to beginning when backspacing or deleting wrong text iOS not keeping shift on when entering 2 line breaks and turning it on at seemingly random times (very annoying) Entering 2 line breaks on list does not close the list as...

xenforo.com

 

[Jim Fox]

Where is this code placed? And what is lost by not having the BBCode? I am trying to decide which is the worst evil?

 

[adamgreenough]

Not having BB code is just equivalent to hitting the 'cog' icon on the right of this post editor toolbar. It just turns the editor buttons off turning the postbox in to essentially a plaintext textarea. It disables things like bold, italic, underline, image embeds etc. oEmbeds, link unfurling and all the automatic stuff still happens.

I figure if people need it, they can flick it on again with one tap but on mobile people don't tend to faff with formatting anyway and I decided the plain text option was superior.

It has put my mobile editor complaints from several a week to zero since.

I put this in a script tag just before the closing </body> tag in PAGE_CONTAINER.

 

[Jim Fox]

Thanks Adam!

I personally will use some of the formatting options on the iPhone while I am out traveling and need to do a featured post or thread, or one of our contests and I like to highlight some of the text with different color, text size. But non of the users on my forum ever do it, so you are right in that most won't miss it, and I can simply click on the Cog when I need to personally turn on the formatting options.

 

[Jim Fox]

You mentioned you put that code in a script tag? Sorry for sounding the novice. Do I need to create a tag then for this? Or can I just paste this code before </body> ?

 

[adamgreenough]

I have mine like so.

PAGE_CONTAINER
...

    <script>
        if(/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
            window.localStorage.setItem('xf_editorDisabled', '1');
        }
    </script>
</body>

...

 

[gogo]

Thanks it works! Will it affect the page load speed?

 

[Rhody]

Most mobile devices are Android, but I see that included in the code. If the problem is only for IOS devices, do you see any harm taking the android line out of the code?

 

[Rhody]

BTW: THANK YOU, Adamgreenough!

I modified it a bit to remove Android (~87% of mobile market?) and WebOs (LG Smart TVs?), and so far it seems to be doing the job. If this will have any other consequences, or the format of my change is wrong, please advise.

Mike

; PAGE_CONTAINER template mod by Adamgreenough to toggle rich text editor OFF for IOS devices only. formatting bug
; was: if(/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {

<script>
if(/iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
window.localStorage.setItem('xf_editorDisabled', '1');
}
</script>