In the last article, I briefly introduced the use of WangEditor and the basic functions such as configuring image uploads. In theory, this is enough for basic use. But reality is often harsher than you think. There is a saying “you have your plan, the world has another plan”. Welcome to the harsh reality.
Readers interested in the previous article can visit the following link: juejin.cn/post/684490…
The editor has been created above, and this is just the first step. This article focuses on what problems you encountered using the editor, how you solved them, and why they occurred. Step by step, from problem finding to problem solving to the root of the problem, to give you a deeper understanding of the editor.
The contents involved are as follows:
- Table processing (obviously there is a border when editing, why did not render)
- Editor to delete pictures, server to delete
- How to set the width and height of the picture (compare with wechat editor)
- A scheme for changing font size
1. Processing of forms
If you need to insert a table while editing content, you’ll notice when you render it to the page that the border of the table is missing. WTF? It was there when I was editing it, and then it’s gone?
From the analysis of the phenomenon, must be related to CSS style, can affect the border that must be the border attribute.
If we select the table and view the element, we will find that we set the border property of the table to 0.
However, if you look closely, something else seems to be wrong. Why do you see borders in the editor? If the editor doesn’t take the blame, won’t it be his turn? No way!
The border property is definitely the only one that can affect the border, but styles can be overridden. The only truth is that there is an extra border style for the table in the editor. Looking at the element again, you see an additional Settings table style:
.w-e-text table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
Copy the codeYeah, that’s the culprit, the editor.
You think this is the end of it? Naive! The editor also had something to say: “Look at the styling again, how come there are only top and left borders?” On closer inspection, oh, my God, it is. In the same way, you’ll end up with not only additional styles on the table, but also bottom and right border styles on the column labels (th and TD).
Once the cause of the problem is found, the corresponding solution is easy. Is the rendering area also an area? So I’m just going to style the tables in this area individually yes or no.
Learn to style your content properly, and you’ll find it useful to keep that in mind.
2. Editor to delete pictures, server to delete
This shouldn’t be a question, but there are a lot of people asking in the group. Check out the following questions and you may know if it’s necessary at all.
First, the size of the picture will affect the loading time on the Internet and affect the experience, so the picture should not be too large, so the space occupied will not be much.
Two, in order to achieve the server at the same time to delete the picture function, how much effort to spend? In terms of implementation, you need to know the action of deleting the image, and then call the background interface to delete the corresponding image on the server. Even the most basic two steps, knowing exactly what you’re doing to delete an image, are difficult enough. Do you have a good idea? And even if it did, what good would it do? Save some storage space? So I have to spend extra resources to find the location of the file and then delete it. Is that another waste of resources?
So, you have to think about the input/output ratio, which is ROI.
Third, if the picture is not uploaded locally, but selected from the material library, can it be deleted? This is related to the fact that an image may be cited in multiple articles. If you delete the image, will other articles not be able to load the image? Don’t think the material library will not exist, in my opinion, do a material library function than the server to delete the picture function suitable for 100 times!
If the above several questions have been seriously thought about, but also want to achieve such a demand, then I can’t, wish you good luck.
3. How to set the width and height of the picture
In fact, the width and height of the image cannot be set by the editor, the same method to examine the elements, you will find that the image has an inline style – set the maximum width of the image to 100%.
What’s the advantage of that?
It is well known that for an image to be complete you need to maintain an aspect ratio, that is, if you set the style to either the width or the height, the image will automatically remain equally scaled. On the other hand, if the image exceeds the width and height of the original image, it will feel blurred, so it doesn’t matter if the image is full size or scaled down.
So how big can a picture be at most? That’s the entire width of the parent container. However, if the width of the image is smaller than that of the parent container, it may be blurred when full, which means that most of the images inside the content need to be cropped or customized.
Compare the editor of wechat public account, which also has a “self-adapting screen width of mobile phone” and “cropping function”. Think carefully about whether you really need to set the width and height of the picture in the editor.
So if you don’t set it in the editor, where else can you set it? Remember the table manipulation mentioned above, would it be more appropriate to use styles to control the width and height of the image in the render? How about that? It’s really important to use style wisely.
4. Plan to change font size
For this, WangEditor does not provide a custom configuration. Students who do not give up can go to see the source code, for the size in the source code has been written dead, and does not provide modified configuration.
When you look at the source code, you will find that the font size attribute values are small, nomal, etc., instead of numbers and px units.
In fact, I also think this point is not appropriate, after all, look at these keywords can not know exactly the size of the font. Compared with the editor of wechat public number, it is found that the size is very clear, which is worth learning.
Since the editor of wechat public number is so sweet, what do I want to do? Of course you can do it yourself.
There is no way to directly modify the configuration to achieve this, the door is already blocked. Then change your mind and go through the window.
Anyway, it is to do their own, that can be the original menu of the size configuration removed. Then put a drop-down box on the outside with a list of the fonts you want. Then select the content that needs to change the size, select the corresponding size from the drop-down list, and set the size style attribute of the content. Then, when editing content, update the corresponding drop-down list size of the content in time, so that users can see at a glance the size of my current line of text, isn’t it quite easy?
It’s not that I can sit and type, but if you look closely at the WangEditor documentation, you’ll see that it’s totally doable. Of course, you have to have something like this in the first place to make you look for a solution.
The code implementation part will not be posted here, I found that the last article has too many code blocks, I feel that the reading experience is not good, so here only give the implementation ideas. Of course, in order to prevent you from saying that I just do not do mouth handle type, I deliberately to achieve a simple case to write this article, well prepared!
Case link: gitee.com/hotstrip/Wa…
The above is the main content of this article, a brief summary. This article does not post how to achieve the code, but focuses on finding the problem and finding the cause of the problem, because I think finding and understanding the problem is a very important skill. Solving a problem is usually easy. What’s hard is how and why it works — it all boils down to not knowing where the problem came from.
Just like a doctor, you have to ask about your condition and do a comprehensive examination with all kinds of instruments before prescribing medicine for you.
When encountering problems, find out the reasons for the problems, how to verify them and eliminate the influence of each variable. The ability to find and solve problems is worth cultivating.