原文：http://coolketang.com/staticCoding/5a9950889f54540af9a41bde.html

1. 本节课将为您演示，如何借助网页视图，创建一个图文并茂的笔记本程序。在您的项目中已经导入了一些素材文件，该图片将作为删除按钮。 

2. 当用户点击刚刚的删除图标时，将删除和图标对应的图片内容。而这张素材则是在图片加载失败时显示的。 


3. 该图片将作为范例图片，被插入到笔记本中。 


4. 该图片将作为笔记本的背景图片。 


5. 您将在这个网页文件中，创建一个笔记本，点击打开该网页文件。 


6. 现在开始编写代码，创建一个可编辑的笔记本程序。 


7. 首先添加一对样式标签，用来设置笔记本中的各个元素的视觉样式。 


8. 星号表示对网页中的所有元素进行统一的设置，此处的样式是用来避免在低版本的操作系统上，当用户点击网页视图时，出现的短暂闪烁的现象。 


9. 接着设置网页的背景图片、间距、最小宽度和颜色等样式。 


10. 设置可编辑的Div标签的间距、最小高度和滚动条信息，其横向滚动条将始终不显示。该可编辑的Div标签，将作为我们的笔记本。 


11. 添加一个样式，用来设置Div标签内的文字尺寸，以及行距、边距等信息。 


12. 最后添加一个样式，用来设置所有图片的视觉样式。 


13. 添加一个脚本标签，用来编辑脚本代码。 


14. 添加一个脚本函数，当执行该函数时，往Div标签，即笔记本中，插入一张图片。 


15. 首先获得网页文档的选区对象。 


16. 接着获得选区的选择范围，当选区不存在时，选区就是光标所在的位置。 


17. 通过脚本语句创建一个新的容器标签，用来容纳一张图片。 


18. 设置标签的位置属性为相对定位。 


19. 然后创建一个字符串变量，用来加载项目中的一张图片。 


20. 再次创建一个字符串变量，用来加载项目中的删除图片，该删除图片将作为上一张图片的删除图标。当点击该图标时，将从网页中删除该图标及插入的图片。 


21. 接着将图片和删除图标，同时插入到Div标签中。 


22. 然后将光标插入到Div标签中。 


23. 接着将光标移至Div标签的右侧，从而当用户继续输入文字或插入图片时，将从刚刚插入的图片的后方开始输入。 


24. 添加一个函数，用来响应删除图标的点击事件。 


25. 当删除图标被点击时，将由该图标父节点的父节点，删除图标的父节点。从而删除包括被插入的图片和图标在内的多个元素。 


26. 接着执行模糊方法，使Div标签失去焦点。 


27. 添加一个函数，用来获得笔记本中的，包含图片和文字的所有内容。 


28. 在网页中添加一个Div标签，并设置其可编辑属性的值为真，该标签将作为笔记本所有内容的容器。然后在左侧的项目导航区，打开视图控制器的代码文件。 


29. 首先给类文件添加一个网页视图类型的属性。 


30. 获得当前设备的屏幕尺寸信息，并通过屏幕尺寸信息创建一个矩形区域。 


31. 然后通过矩形区域，初始化一个位于该显示区域的网页视图。 


32. 设置网页视图显示垂直滚动条，并将网页视图添加到当前控制器的根视图。 


33. 获得网页文件在项目中的路径，并将路径转换成网址的样式。 


34. 通过网页视图的加载请求方法，加载该网址路径下的网页文件。 


35. 添加一个按钮，当点击该按钮时，向笔记本中插入一张图片。 


36. 设置按钮在正常状态下的标题，以及按钮的背景颜色。 


37. 给按钮绑定点击事件，并将按钮插入到控制器的根视图中。 


38. 添加第二个按钮，当点击该按钮时，将获取笔记本中的所有内容，并保存这些内容。 


39. 同样设置第二个按钮在正常状态下的标题，以及按钮的背景颜色。 


40. 给按钮绑定点击事件，并将第二个按钮插入到控制器的根视图中。 


41. 添加一个方法，用来响应第一个按钮的点击事件。 


42. 通过调用网页视图的执行脚本的方法，执行网页中的插入图片的脚本函数。 


43. 接着添加一个方法，用来获取并保存笔记本中的内容。 


44. 通过调用网页视图的执行脚本的方法，执行网页代码中的获取笔记本信息的脚本函数，并在控制台输出笔记本信息。接着启动模拟器预览项目。 


45. 在网页视图中点击，开始笔记信息的输入。 


46. 在弹出的键盘提示区，点击以输入某个单词。 


47. 继续点击输入其它的单词。 


48. 


49. 然后点击插入图片按钮，将在输入文字的后方插入一张图片。 


50. 图片插入后，光标将自动移到图片的后方。点击键盘上的回车键，将光标移到图片的下方。 


51. 点击完成按钮，关闭键盘并观察当前的笔记本。 


52. 如果需要再次编辑笔记，只需再次点击网页视图即可。 


53. 然后输入其它的笔记信息。 


54. 点击第二个按钮，可以获得已经写入的笔记信息，同时留意控制台的日志输出。 


55. 在底部的控制台输出了所有的笔记内容，您可以保存这些内容，当需要时只需再次载入即可。最后点击左上角的[停止]按钮，关闭模拟器并结束本节课程。 

本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载