本文將演示如何藉助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 }