本文将演示如何借助UIWebView(网页视图)，创建一个图文并茂的笔记本程序。
在项目中导入一些图片素材：
【deleteImage.png】,该图片将作为删除按钮，当点击删除图标时，将删除图标对应的图片内容。
【defaultError.png】该图片是其他图片加载失败时显示的。
【Coffee.png】该图片将作为范例图片，被插入到笔记本中。
【bg.png】该图片将作为笔记本的背景图片。
网页文件【NoteBook.hml】
1 <style> 2 * 3 { 4 outline: 0px solid transparent; 5 -webkit-tap-highlight-color: rgba(0,0,0,0); 6 -webkit-touch-callout: none; 7 } 8 body 9 { 10 background-image: url(bg.png); 11 margin:0 auto; 12 max-width:900px; 13 color:clear; 14 } 15 .content 16 { 17 margin:0px 0; 18 min-height:430px; 19 overflow-x:hidden; 20 } 21 div 22 { 23 font-size:16px; 24 line-height:18px; 25 margin:5px 0; 26 } 27 img 28 { 29 max-width:900px; 30 width:100%; 31 } 32 </style> 33 34 <script> 35 36 function insertImage(imagePath) 37 { 38 var selection = window.getSelection ? window.getSelection() : document.selection; 39 var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0); 40 41 var div = document.createElement("div"); 42 div.style.position = "relative"; 43 var insertingImage = "<img src='"+imagePath+"' onerror=\"this.src='defaultErrorPic.png'\"/>" 44 var deleteIcon = "<img src='deleteImage.png' style='width:30px;height:30px;margin-top:9px;position:absolute;z-index:10;right:5px' contenteditable='false' onclick='removeImage(this)'/>" 45 div.innerHTML = deleteIcon+insertingImage; 46 range.insertNode(div); 47 selection.modify("move", "right", "word") 48 } 49 50 function removeImage(obj,e) 51 { 52 obj.parentNode.parentNode.removeChild(obj.parentNode); 53 document.getElementById("content").blur(); 54 } 55 56 function getNote() 57 { 58 return document.getElementById("content").innerHTML; 59 } 60 </script> 61 62 <div class="content" contenteditable="true" id="content"></div>
在项目导航区，打开视图控制器的代码文件【ViewController.swift】
1 import UIKit 2 3 class ViewController: UIViewController { 4 5 //添加一个网页视图对象，作为当前类的属性 6 var webView:UIWebView! 7 override func viewDidLoad() { 8 super.viewDidLoad() 9 // Do any additional setup after loading the view, typically from a nib. 10 11 //获得当前设备的屏幕尺寸信息 12 let bounds = UIScreen.main.bounds 13 //通过屏幕尺寸信息创建一个矩形的显示区域 14 let frame = CGRect(x: 0, y: 60, width: bounds.width, height: bounds.height-60) 15 16 //初始化一个网页视图对象，并以矩形区域作为其显示区域 17 webView = UIWebView(frame: frame) 18 //设置网页视图显示垂直滚动条，并将网页视图添加到当前视图控制器的根视图 19 webView.scrollView.showsVerticalScrollIndicator = true 20 //将网页视图添加到当前视图控制器的根视图 21 self.view.addSubview(webView) 22 23 //获得网页文件在项目中的路径 24 let path = Bundle.main.path(forResource: "NoteBook", ofType: "html") 25 //并将路径转换成网址的样式 26 let url = URL(string: path!) 27 //通过网页视图的加载请求方法，加载该网址路径下的网页文件 28 webView.loadRequest(NSURLRequest(url: url!) as URLRequest) 29 30 //添加一个按钮，当点击该按钮时，向笔记本中插入一张图片 31 let inserImage = UIButton(frame: CGRect(x: 0, y: 20, width: 160, height: 40)) 32 //设置按钮在正常状态下的标题文字 33 inserImage.setTitle("Photo", for: UIControlState.init(rawValue: 0)) 34 //设置按钮的背景颜色为紫色 35 inserImage.backgroundColor = UIColor.purple 36 //给按钮绑定点击事件 37 inserImage.addTarget(self, action: #selector(ViewController.inserImage), for: .touchUpInside) 38 //将按钮添加到当前视图控制器的根视图 39 self.view.addSubview(inserImage) 40 41 //添加一个按钮，当点击该按钮时，获取并保存笔记本中的所有内容。 42 let saveNote = UIButton(frame: CGRect(x: 160, y: 20, width: 160, height: 40)) 43 //设置按钮在正常状态下的标题文字 44 saveNote.setTitle("Save", for: UIControlState.init(rawValue: 0)) 45 //设置按钮的背景颜色为橙色 46 saveNote.backgroundColor = UIColor.orange 47 //给按钮绑定点击事件 48 saveNote.addTarget(self, action: #selector(ViewController.saveNote), for: .touchUpInside) 49 //将按钮添加到当前视图控制器的根视图 50 self.view.addSubview(saveNote) 51 } 52 53 //添加一个方法，向笔记本中插入一张图片 54 func inserImage() 55 { 56 //通过调用网页视图执行脚本的方法，执行网页代码中的插入图片的函数 57 webView.stringByEvaluatingJavaScript(from: "insertImage('Coffee.png')") 58 } 59 60 //添加一个方法，获取并保存笔记本中的所有内容。 61 func saveNote() 62 { 63 //通过调用网页视图执行脚本的方法，执行网页代码中的获取笔记本信息的脚本函数 64 let note = webView.stringByEvaluatingJavaScript(from: "getNote()") 65 //在控制台输出笔记本信息 66 print(note) 67 } 68 69 override func didReceiveMemoryWarning() { 70 super.didReceiveMemoryWarning() 71 // Dispose of any resources that can be recreated. 72 } 73 }