Hello, I’m Melio Piggy! I do not know whether we have had such a disease, called indirect smug! Yes, as a member of the open source team wangeEditor, although I am a lying flat player, but out of the pursuit of technology, and the comfort of the vegetarian, I came up with a simple beginner rich text editor learning series (strive for high frequency updates, learning to have output, to close the loop)! The main purpose of this series is, one is to consolidate their knowledge, review the old to learn new! The second is to get started with XDM who are interested in rich text. Welcome to join our wangEditor team! Without further discussion, let’s begin our first stop in zero-based teaching – interest building in Selection and Range

First encounter (play) Selection and Range

The preparatory work

In order to get XDM interested in them (options and scope) first, make an interesting case and play a mini-game! So let’s go to Fox and Google and go to the same link

A game of play

Use your mouse (touchpad for MAC) to select all the reasons why you want to select wangEditor. Take a look at both browsers and print document.getSelection() on the console.

Look at my two screenshots. Are anchorOffset and focusOffset reversed? One is 0 and 10, and the other is 10 and 0. But isn’t it a little interesting that Google is picking from the bottom, and that’s just the tip of the iceberg, moving on to the next game

The second game of play

WangEditor: 1,3,5 (firefox is recommended to start with) Of course I’m gonna print document.getSelection()

Firefox does, and on the console you can see that the range ount field is 3, after all we chose 3 reasons (WTF), and we can get the corresponding range object based on the index (0,1,2), so we print and alert to play with it

Because we’ve indexed it to 1, which is of course the second reason we chose it, so now we can see what the range object looks like, and when we alert we can see what we’ve selected, so let’s go ahead and play Google

Google disables multiple selection, and most browsers disable multiple selection, so most browsers get a selection object and the property rangeCount is 1, because you can only select one range

Play game 3

Did you notice that in the previous example, we had a Selection object that had a property called type, and then a value called Range, and I’m not talking about anything here, so take notes, select and of course most of the time it’s a Range, but it also has two other values. Can I choose to have 2 other types besides range? Let’s just play it in Chrome, open the console

  • None – Refreshes the page and prints directlydocument.getSelection()

“None” is None.

  • Caret – Click any text position on the page to print directlydocument.getSelection()

Not none because you don’t have an area so you can see an isCollapsed field and the answer is true, so if I don’t choose an area I click on it, so your area isCollapsed!

  • Range – Needless to say, most of the previous games we played were Range

conclusion

Today simply introduced the rich text has such a pair of gay men, they as the foundation of the rich text, so be sure to master them! Think of them as heroes in the game. To play them well, you need to know whether they are melee or ranged, whether their skills are output or support! Next time we will start to detail their properties and methods, I wonder if XDM is interested. The series will continue to be updated anyway! See you next time!

Reference link – you can see first play, the series slowly updated

  • MDN-selection
  • MDN-range
  • caniuse-selection
  • caniuse-range