[Swift通天遁地]一、超级工具-(7)创建一个图文并茂的笔记本程序

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10142695.html 
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

目录：[Swift]通天遁地Swift

本文将演示如何借助UIWebView(网页视图)，创建一个图文并茂的笔记本程序。

在项目中导入一些图片素材：

【deleteImage.png】,该图片将作为删除按钮，当点击删除图标时，将删除图标对应的图片内容。

【defaultError.png】该图片是其他图片加载失败时显示的。

【Coffee.png】该图片将作为范例图片，被插入到笔记本中。

【bg.png】该图片将作为笔记本的背景图片。

网页文件【NoteBook.hml】

<style>
*
{
    outline: 0px solid transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}
body
{
    background-image: url(bg.png);
    margin:0 auto;
    max-width:900px;
    color:clear;
}
.content
{
    margin:0px 0;
    min-height:430px;
    overflow-x:hidden;
}
div
{
    font-size:16px;
    line-height:18px;
    margin:5px 0;
}
img
{
    max-width:900px;
    width:100%;
}
</style>

<script>

function insertImage(imagePath)
{
    var selection = window.getSelection ? window.getSelection() : document.selection;
    var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
    
    var div = document.createElement("div");
    div.style.position = "relative";
    var insertingImage = "<img src='"+imagePath+"' onerror=\"this.src='defaultErrorPic.png'\"/>"
    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)'/>"
    div.innerHTML = deleteIcon+insertingImage;
    range.insertNode(div);
    selection.modify("move", "right", "word")
}

function removeImage(obj,e)
{
    obj.parentNode.parentNode.removeChild(obj.parentNode);
    document.getElementById("content").blur();
}

function getNote()
{
    return document.getElementById("content").innerHTML;
}
</script>

<div class="content" contenteditable="true" id="content"></div>

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

import UIKit

class ViewController: UIViewController {
    
    //添加一个网页视图对象，作为当前类的属性
    var webView:UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //获得当前设备的屏幕尺寸信息
        let bounds = UIScreen.main.bounds
        //通过屏幕尺寸信息创建一个矩形的显示区域
        let frame = CGRect(x: 0, y: 60, width: bounds.width, height: bounds.height-60)
        
        //初始化一个网页视图对象，并以矩形区域作为其显示区域
        webView = UIWebView(frame: frame)
        //设置网页视图显示垂直滚动条，并将网页视图添加到当前视图控制器的根视图
        webView.scrollView.showsVerticalScrollIndicator = true
        //将网页视图添加到当前视图控制器的根视图
        self.view.addSubview(webView)
        
        //获得网页文件在项目中的路径
        let path = Bundle.main.path(forResource: "NoteBook", ofType: "html")
        //并将路径转换成网址的样式
        let url = URL(string: path!)
        //通过网页视图的加载请求方法，加载该网址路径下的网页文件
        webView.loadRequest(NSURLRequest(url: url!) as URLRequest)
        
        //添加一个按钮，当点击该按钮时，向笔记本中插入一张图片
        let inserImage = UIButton(frame: CGRect(x: 0, y: 20, width: 160, height: 40))
        //设置按钮在正常状态下的标题文字
        inserImage.setTitle("Photo", for: UIControlState.init(rawValue: 0))
        //设置按钮的背景颜色为紫色
        inserImage.backgroundColor = UIColor.purple
        //给按钮绑定点击事件
        inserImage.addTarget(self, action: #selector(ViewController.inserImage), for: .touchUpInside)
        //将按钮添加到当前视图控制器的根视图
        self.view.addSubview(inserImage)
        
         //添加一个按钮，当点击该按钮时，获取并保存笔记本中的所有内容。
        let saveNote = UIButton(frame: CGRect(x: 160, y: 20, width: 160, height: 40))
         //设置按钮在正常状态下的标题文字
        saveNote.setTitle("Save", for: UIControlState.init(rawValue: 0))
        //设置按钮的背景颜色为橙色
        saveNote.backgroundColor = UIColor.orange
        //给按钮绑定点击事件
        saveNote.addTarget(self, action: #selector(ViewController.saveNote), for: .touchUpInside)
        //将按钮添加到当前视图控制器的根视图
        self.view.addSubview(saveNote)
    }
    
    //添加一个方法，向笔记本中插入一张图片
    func inserImage()
    {
        //通过调用网页视图执行脚本的方法，执行网页代码中的插入图片的函数
        webView.stringByEvaluatingJavaScript(from: "insertImage('Coffee.png')")
    }
    
     //添加一个方法，获取并保存笔记本中的所有内容。
    func saveNote()
    {
         //通过调用网页视图执行脚本的方法，执行网页代码中的获取笔记本信息的脚本函数
        let note = webView.stringByEvaluatingJavaScript(from: "getNote()")
        //在控制台输出笔记本信息
        print(note)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}