[Swift通天遁地]1、超級工具-(7)建立一個圖文並茂的筆記本程序

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-tpbadmxq-gd.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

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