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
Related
We have an embedded HTML form type editor in a macOS app that needs to be filled by the user. We are using WKWebView with Swift and it's all working fine but we are not able to get the spell check working in WKWebView. I mean it does work and corrects some words but doesn't show red dotted underline on misspelled words like WebView.
WebView shows dotted redline where WKWebView does not. Found that WebView has property as isContinuousSpellCheckingEnabled but no such property is available in WKWebView.
My simple requirement to highlight misspelled words, please help if there's anything available.
I did not found it yet: so far no such property is available in WKWebView.
From apple
Description Daniel Bates 2018-08-21 11:23:20 PDT
We should render misspelled words with the spelling correction dots in
iOS WebKit (i.e. when using WKWebView). Currently we only support this
in iOS WebKit Legacy (i.e. when using UIWebView).
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
Is there a way to directly use HTML tags in iPhone SDK? I was wondering how could I display the following text using HTML in a UILabel :
My name is Nitish and I am 24 years old.
It does not seem to be allowed. Look at following post as well:
iPhone - UILabel containing text with multiple fonts at the same time
Look at this alternative as well:
iPhone - UILabel containing text with multiple fonts at the same time (another asnwer)
You can't use UILabel to display richtext, you will have to move to CoreText.
https://github.com/Cocoanetics/NSAttributedString-Additions-for-HTML will allow you to create NASttributeString from HTML source.
This library might help.
https://github.com/elijahdou/RTLabel
Simple rich text display for iOS using html-like markups
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 :(
I am having the "Futura.ttf" font file.
I am displaying a HTML page in the UIWebView, but my requirement is that i want to use the custom font in my css file.
so is there any way that i can use the custom font in my css file ???
All suggestions are welcomed.
Thanks.
It is possible to load custom fonts into your UIWebView in iOS3.2 and above. Add the font to your bundle (see here) then just reference the font in your UIWebView's stylesheet like you would any other font:
<style type='text/css'>font { font-family: DroidSerif; } </style>
You have Cufon and sIFR as your options.
Typeface.js is a pure JavaScript Replacement
Cufon is a pure JavaScript Replacement
sIFR is Flash and Java font implementation,
FLIR JavaScript and PHP implementation
Some Comparisons
http://thatguynamedandy.com/blog/text-replacement-comparison
http://thinkclay.com/technology/cufon-sifr-flir
http://aaronwinborn.com/blogs/aaron/cufón-alternative-sifr-image-replacement
Below is taken from this question Worth reading the whole thread, has greatdetails.
Typeface.js
Advantages:
User doesn’t have to have Flash
plugin installed on their browser
Easier to create with just a few
lines of Javascript
For page loading it just needs to
load the Javascript
Disadvantages:
Text is not selectable because it
outputs it like an image. I looked at
some examples, right clicked on a
word and had to view as an image.
Every single word had this behaviour.
Big thumbs down.
Usage for body copy will slow down
loading time, so it is recommended to
use only for headlines.
Cannot be read by screen readers
Visual looks blurry
Not all browser compliant and still
has a lot of development left to be
done
sIFR
Advantages:
Can be read by screen readers as a
normal headline because it is a
behaviour layer on top of the markup
and styling.
Text is selectable
SEO friendly
Displays text as is like any other
web font. Crisp and not blurry!
Has addons like jQuery sIFR Plugin!
Disadvantages:
Requires Javascript to be enabled
Flash plugin must be installed in the
browser
Need Adobe Flash Studio to create it
BUT there is a pretty nifty sIFR
generator that creates the file for
you!
For page loading, it has to request
for Flash, Javascript and CSS files
attached to it, which can potentially
get bogged down if you are using sIFR
in too many places.
Cannot display on an iPhone. Yet…
Cufón (similar to Typeface.js)
Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.
There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.
Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.
The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.