Yesterday I saw an article explaining how visual editors work, so I joined in

  • Preview the address

Our implementation idea is the same, the principle is almost the same, I will not repeat [leant smile], I will focus on the part he did not implement

  1. The text font
  2. Cover around ruler and edit area

1. Text fonts

There is nothing to say about the font Settings. Use CSS @font-face to reference the font. Note that the point is “extract the text from the font file to form a new font file.”

We know that a font file such as “Pingfangsc.ttf” can be several megabytes or even tens of megabytes in size. If several fonts are used in one page, then the published page may need to load dozens or hundreds of megabytes of fonts. This is not reasonable, so font extraction is used. Here introduce a js font extraction library Fontmin first look at the effect

There are two scenarios

  1. When editing an edit, the backend extraction interface is asked to return a Base64 encoded extracted font after editing
  2. Publishing Merges the text of the same font when publishing, and then requests the batch font extraction interface to return an array of extracted font file urls

This is what it looks like after it’s publishedAs you can see, the total resource is less than 300KB after publication.The font is only 8KB

2. Coverings around ruler and editing area

  1. The ruler first looks at the effect

It can be seen that there will be a light design line when the mouse moves to the ruler. After clicking, a design line will be displayed at the clicked positionThe values displayed on the ruler are design dimensions, which are different from the actual pixels of the design area

And then how does the ruler on the left, look at the DOM structure and CSS code hereYou can see that the absolute positioning box has some fixed height P tags inside, and the vertical display of the text uses CSS styles

writing-mode: vertical-rl;
Copy the code
  1. Around the block as usual first look at the effect

You can see that the layer moves outside of the design area and there is a gray overlay, which is actually quite simple, surrounded by four absolutely positioned translucent divs,Why does a div have the following element selected above itIt’s because the CSS properties are set

pointer-events: none;
Copy the code

This is a nice CSS property