大家好，我是梅利奥猪猪！不知道大家有没有得过这样一种病，叫做间接性踌躇满志！对没错，作为开源团队wangeEditor的一员，虽然是躺平选手，但出于对技术的追求，和菜鸡的自我安慰，我想出个简单的新手入门富文本编辑器的学习系列（争取高频率更新，学习要有输出，要闭环）！这个系列主要的目的就是，一是用来巩固自己的知识，温故而知新！二是带对富文本有兴趣的XDM（没兴趣也让你们有兴趣）入门，欢迎加入我们wangEditor团队！话不多说，开始我们的零基础教学的第一站 - Selection和Range之建立兴趣
初识（玩耍）Selection和Range
准备工作
为了让XDM先对他们（选择和范围）感兴趣，那就要先搞个有意思的案例，玩小游戏啦！来来来，我们分别打开火狐和谷歌，访问同一个链接
玩耍之游戏一
大家用鼠标（mac用触摸板）来选中为何选择wangEditor下面的所有原因，看下两个浏览器的表现，并在控制台打印document.getSelection()，先简单剧透下，这个方法就是获取选择的对象的哦！
什么破游戏，不是一模一样嘛，都能全部选中嘛，但XDM有些细微的差别，请看我的2个截图，是不是anchorOffset和focusOffset是反的，一个0和10，一个10和0，再次剧透，虽然选中一样，但我火狐是从头选到尾，但谷歌我是从尾选到头，是不是有点意思了，它竟然能这么精细的判断用户是怎么选内容的，这只是冰山一角，继续下个游戏
玩耍之游戏二
前面说了全选，那难道可以局部选几个原因嘛（mac按住command选，windows可能是ctrl），那好，选择wangEditor的原因这么多，那我们这次挑几个选，比如1，3，5这几个原因（建议先从火狐开始玩耍），当然还是要打印document.getSelection()
火狐可以，同时在控制台可以看到rangeCount字段的值是3，毕竟我们选择了3个原因嘛（wtf，这个水文作者又tm开始水字数讲废话了），而且我们可以根据索引(0，1，2)获取到对应的range对象，我们打印打印加alert调戏调戏
因为我们索引传了1，当然是我们选择的第二个原因，这个时候就看到range对象的庐山真面目了，且我们alert时能看到我们选中的内容，接下去玩下谷歌吧
垃圾游戏，谷歌怎么选不了多个，因为谷歌把多选禁用了，而且大多数浏览器基本都禁用了，所以大多数浏览器获取selection对象，属性rangeCount的值都是1，因为只能选一个范围啊
玩耍之游戏三
大家有没有发现，在前面的例子中，我们Selection对象有这么个属性type，然后值是Range，这次说的不是废话啦，记得记笔记，选择当然大多数情况是范围，但是它还有其他2个值（我当时觉得这个设计还真有意思，我选择还可以除了范围有其他2个type？），我们就直接用谷歌浏览器玩下吧，请打开控制台
- None - 刷新页面，直接打印
document.getSelection()
撒都不做，是None不是很正常嘛！
- Caret - 鼠标任意点击页面任意文字的位置，直接打印
document.getSelection()
因为我们没有选择范围就鼠标蜻蜓点水了下，所以不是none，而且大家注意看哦，有个isCollapsed字段，是否折叠，答案是true，我不选范围我就点点，所以你的范围就是折叠了!
- Range - 这个感觉不用说了，就是我们前面玩的那几个游戏，大多数都选择了Range
总结
今天就简单介绍了富文本有这么一对基佬，他们作为富文本的基础，所以一定要好好掌握他们！把他们比作游戏中的英雄，要玩好它们，就要熟悉他们是近战还是远程，技能是输出还是辅助！下次就开始细讲他们的属性和方法了，不知道XDM有没有兴趣了。不管咋样系列会继续更新！下次再见！