Has anyone found html textarea plugin that works with iPad?
If i use any plug-in to convert textarea to html rich editor, it hides textarea and adds iframe in place of it. When i click on iframe in windows i can add/edit text like a textarea. Where as in iPad i click on it it doesn't pop up keyboard as its not a textbox or textarea instead its iframe.
i need it for jquery based chat which can run on both computer and iPad. So i need to allow simple formating of text like bold, italic, font etc.
Mobile Safari in iOS prior to version 5 doesn't support contenteditable or designMode, which is the built-in browser editing functionality that underpins most JavaScript rich text editors. You'll need to find another way, such as drawing your own caret and collecting input in a (possibly off-screen) textarea, which is what Google Docs, ACE and CodeMirror do. This is quite involved though.
Another alternative is the Stack Overflow approach, which uses Markdown in a textarea with formatting buttons.
I just stumbled on MarkItUp, which seems to provide a good fall-back HTML (and BBCode) editing mode for mobile browsers that don't support contenteditable properly yet.
Looks like a good alternative solution if you want to give you mobile users a slightly better experience than just editing raw HTML.
Related
It seems to be impossible to copy text and then paste it into a TinyMCE editor using right-click paste with Firefox if you have the "paste" plugin. Why is this?
I'm using:
Firefox 33.1.1 (although users have complained of the issue with FF 29)
TinyMCE 4.1.1 with the "paste" plugin
I can right-click paste into these without error:
an element with the contenteditable="true" attribute (same method as TinyMCE), tested on http://html5demos.com/contenteditable
a normal textarea
TinyMCE 4.1.1 without the "paste" plugin
Users have discussed on the TinyMCE forum as far back as 2007, and mention an alert that says "Copy/Cut/Paste is not available in Mozilla and Firefox" which I do not receive with FF 33. No one mentions why this problem occurs, and the TinyMCE admins claim "this is not a bug". I'm interested in knowing what change was made to either Firefox or TinyMCE that causes this, and why (security?).
This question -- tinymce mouse paste not working -- has an answer of how to fix the issue: remove the "contextarea" plugin or any plugin that is based on it. But I'm interesting in knowing why it happens in the first place.
A co-worker got me on the right track and I found these two links:
https://developer.mozilla.org/en-US/Firefox/Releases/29/Site_Compatibility#Security
The removal of allowclipboard policy support broke the copy/paste buttons on some rich text editors like CKEditor. The standard Clipboard API's click-to-copy support will be implemented in the near future. The general keyboard shortcuts, Ctrl+C and Ctrl+V, should always work.
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
By default, JavaScript is not allowed to read or set your clipboard data for security and privacy reasons. This is because websites scripts can erase and replace what you currently have in your clipboard (data loss issue) and they can read whatever you have in your clipboard (security and privacy issue); as such, you should grant access with caution.
Maybe someone with TinyMCE expertise can provide more information on how it accesses the clipboard.
Good follow-up questions might be: Why don't the other browsers do this? Why is ctrl+v safer?
I'm working on a Markdown text editor using a contenteditable and Rangy to easily add links and images. The problem is that rangy.createRange();, an important function in the Rangy library, cancels the ability to undo an action (text added in the contenteditable in my case).
I have browsed the Web to find a solution and I have found UndoManager, but I cannot find information about how to use it and if it has been added in Chrome (I'm working on a Chrome Packaged App so I don't care if Safari does not support it).
If somebody knows something about this piece of HTML5 it would be amazing.
Thanks in advance.
According to this link , none of the current browsers support the UndoManager spec. You can test that in your browser by trying to access document.undoManager which undefined in Chrome
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!
Greetings,
http://marijn.haverbeke.nl/codemirror/jstest.html works on Safari on PC, but not on an Ipad. Which is a shame, since I wanted to use it for an app. My question is not only why does it not work, but how should I go about analyzing things that break on Ipad Safari ?
T.
CodeMirror2 works mostly fine on an iPad;
You can add text, remove text and move the cursor around.
You can however not hilite words and cut / copy / paste (as of today 2012-06-27).
The editor in CodeMirror is actually an iframe, and not a native text input form element. The problem here I suspect is that the browser on the iPad does not know if the keyboard should be activated because some DOM element has key events bound to it.
To do that, Safari would have to analyze the source code to deduce key bindings and when should the keyboard be activated - which sound hugely problematic to me.
perhaps it used an iframe in the past, but I have codemirror on my website now and I see no iframes at all contained inside it.
this is almost one year later though, so perhaps now the situation has changed.
I have embedded openwysiwyg editor in web application. The things work perfectly fine in Firefox. So the exact scene is I select a drop-down option for email and text area shows up. This text area is replaced by openwysiwyg editor for email formatting. So this looks perfect in Firefox, but doesn't work correctly in Internet Explorer 7. In IE7, the editor shows up even before I select drop-down option. How does IE7 render JavaScript differently from Firefox?
I suggest dropping that editor, which doesn't support Google Chrome (v.14.0.835.202 as of this writing), for a more popular open-source WYSIWYG editor called TinyMCE.
TinyMCE will most likely give your users a more consistent browser experience, and I've personally used this in my projects with great success.
You only have to include the plugins you need, which can make it much more simplified if you want.