I have seen some write about making a UIWebView editable. I would like to be able to compose a message containing both text and images the WYSIWYG way, and I thought that I might do it with a UIWebView.
Is this a good solution and how do I do this? I have searched the web for examples, but found none.
Thank you
UIWebView content can be made editable starting with iOS 5.0+.
A very nice tutorial can be viewed here: http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-1/
The tutorial goes beyond the question, so here's a resume of how to make the UIWebView editable:
//index.html
<html>
<body>
<div id="content" contenteditable="true" style="font-family: Helvetica">This is out Rich Text Editing View </div>
</body>
</html>
//somewhere.m
NSBundle *bundle = [NSBundle mainBundle];
NSURL *indexFileURL = [bundle URLForResource:#"index" withExtension:#"html"];
[webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];
Anyway, I suggest reading the tutorial, since it shows how to do other stuff as well (changing fonts, colors, embedding images etc.)
You could use the loadHTML:baseURL method from the UIWebView class reference:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html
Place this in the textViewDidEndEditing: delegate method of the UITextView:
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITextView_Class/Reference/UITextView.html
Actually UIWebView way is so painful, mobile safari does not support WYSIWYG rich text editor area.
From Zoho FAQ :
I can't create or edit documents on my iPhone, the keyboard doesn't show up when opening iZoho on iPhone. What's the problem?
It is an issue with the iPhone as the safari browser doesn't seem to recognize the rich text editor area and hence the keyboard isn't appearing. This is not an iZoho specific problem as all the applications that use a WYSIWYG editor face the same issue. We hope that Apple will address this issue soon and come up with the next version of iPhone's Safari that supports rich text editing. As a workaround, we may give a plain text editor for users to edit/create their documents if this isn't corrected in Safari's next version.
You should implement rich text editing by yourself :(
Related
I want to get the HTML code for the selected text (or text and images) in a UIWebView.
Someone suggested to me the selecteddomrange function of the WebKit framework, but it works with Mac OS, and I need it in iOS.
Is there any way in iOS that I can get the HTML code for the selected text (or text and images) from a webview?
You can use UIWebViews
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
and get the innerHTML element property via a JS expression.
Have a look at the JS function window.getSelection()
I've not tested this but you most likely have to do it somehow via JS on iOS since the UIWebView API is much more limited than it's OSX counterpart.
Have a look at the DOM Range Spec
as you know the Mail app in iOS 5 have a rich text editor is there any possible way to use this feature for a regular UITextView ?
I know of two fundamental approaches to creating a rich text editor in iOS 5:
Use Core Text and a custom view. I don't have any experience with this approach.
Use a UIWebView (instead of a UITextView) and the contentEditable HTML attribute. The basic idea is to load a custom HTML document from your app resources directory. The bare minimum that it needs is this:
<div contentEditable>TEXT_PLACEHOLDER</div>
To initialize the rich text editor view:
1. Load the contents of this file into an NSMutableString and replace the TEXT_PLACEHOLDER string with the text you want to edit.
2. Send the loadHTMLString:baseURL: message to the UIWebView with that HTML string.
Now you have a UIWebView displaying your text inside a div with contentEditable. At this point, you should be able to run your app tap on the text, and be presented with a cursor and be able to add/remove text. The next step is to add rich text formatting functionality. This is done with a set of simple javascript function calls. See the Mozilla documentation on contentEditable for a great reference. You will also want to add a Javascript function to your HTML template file like this:
function getHtmlContent() { return document.getElementById('myDiv').innerHTML; }
So you can easily retrieve the edited text as HTML using [myWebView stringByEvaluatingJavaScriptFromString:#"getHtmlContent()"]. You can also add custom context menu items like you show in the screen shot in your question.
If you have access to the Apple iOS dev center, the WWDC session Rich Text Editing in Safari on iOS talks all about this approach.
A variation of this approach is to use a third-party rich text editor like TinyMCE. I've heard of some success with integrating this into a UIWebView in iOS 5. Again this relies on the contentEditable attribute.
Here is my implementation. Still haven't added UIMenuController functionality, but it's planned to be added soon.
https://github.com/aryaxt/iOS-Rich-Text-Editor
The iOS 5 rich text edit control is also present in the notes app in iOS 4 (make a rich text note on the computer and sync it to see).
This is a custom Apple-made control which they use in their own apps, but it is not published in any official developer API. It's probably in the SDK somewhere, but because it is undocumented, even if you find it and use it, Apple will reject your app.
Basically, if you want a rich text control you will have to make your own.
Edit: Try using this: https://github.com/omnigroup/OmniGroup/tree/master/Frameworks/OmniUI/iPad/Examples/TextEditor/. I haven't used it, so I don't know how well it will work. (Link from this question)
look at https://github.com/gfthr/FastTextView which is more good open source editor than Omni editor
Hi similar to the facebook and iphone app, i have an # function which should link to the users page. My question is how do i go about doing this, what control should be used, for instance i may have some text like this;
"hey #pablo are you and #paul coming over tomorrow"
In that text #pablo and #paul should be clickable.
I hope i am making sense?. Thanks
I have written an article on an interactive rich text UILabel and included full source-code... enjoy!
As promised article is here.....
You can use a uiwebview to do it and add the text with html to the webview.
So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.
I am developing an application for iphone which needs to load some description to a UIWebView. But text that loads into the UIWebView shows some html tags like <p></p>.Is there any way to remove these type of tags?
Thanks in advance
I asked a similar question the other day and got some good responses. I imagine one of these could suit your needs.
anyway to delete all <a href=> tags with javascript after the page loads on an iPad?
Hope it is helpful!
This is the best answer and is exactly what you are looking for ...
Write the following script in the webView delegate method. ( UIWebviewdidfinishLoading)
NSString *myText = [webView stringByEvaluatingJavaScriptFromString:#"document.documentElement.textContent"];