Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Contenteditable on IOS: control/prevent selection toolbar?

I've got my own toolbar for contenteditable. On ipad the system generates its own pop-up toolbar when text is selected. This prevents the use of my toolbar, which has options not included in the built-in one.

Is there a way to disable/hide/edit the behaviour of this toolbar?

enter image description here

like image 824
Diodeus - James MacFarlane Avatar asked Mar 27 '14 16:03

Diodeus - James MacFarlane


People also ask

Is Contenteditable safe to use?

Its totally secure. The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false.

What is false about Contenteditable attribute?

The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. This enumerated attribute can have the following values: ' true ' indicates that the element is contenteditable . ' false ' indicates that the element cannot be edited.

What does Contenteditable attribute do?

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

How do I make my website Contentable editable?

To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element's content is editable by the user or not. This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.


2 Answers

You can add the following style to your content editable div: -webkit-user-modify: read-write-plaintext-only;.

Note this has the byproduct of preventing "ctrl+b", "ctrl+i" etc as well. This is probably a good thing.

like image 120
Parris Avatar answered Oct 18 '22 05:10

Parris


I reported this issue in the WebKit issue tracker, bug 147406 as it seems there is no way to control this.

The impossibility to hide the toolbar completely is one problem, another one is that BIU (Bold/Italic/Underline) should not be always enabled as not always such formatting is enabled in a wysiwyg editor. For example in CKEditor the list of accepted tags can be configured via Advanced Content Filter), so if one disables <b>/<strong>, B should not appear in the contextual toolbar as well.

like image 42
Wiktor Walc Avatar answered Oct 18 '22 05:10

Wiktor Walc