Preface: The first time using rich text directly use wangEditor. Encountered some problems and recorded their solutions. Little brother’s blog: leoon. Cn, the article was also first published in the blog Xi Xi

1. Toolbar customization

As you may have noticed, the rich text toolbar doesn’t have line breaks, because line breaks are so ugly that the author acquiesces that they are not allowed to. The handling method is also very simple and violent. F12 opens the toolbar to check what affects it, and constantly affects the layout style. Get the results.

<div style="width: 100% "> < div id =" editor "class =" editor "> < / div > / / this is my code, create a rich text width = 100% oh < / div > $(" w - e - toolbar"). The CSS (" flex - wrap ", "wrap");  // After creating the editor, modify the flex-wrap with JQCopy the code

So you can adapt directly. What? You still want height fill? Here’s what I did.

First go to the wangeditor.js file and navigate to line 4402 or so, or f12 yourself to see how quickly you can navigate to this body bar setting size. The author has already set the default size for his height to be around 300px, so I wrote something more flexible for him. The following figure

2. Code blocks and other style considerations

I don’t use emoticons, but code blocks are dead, so it’s easier to change. We can write blocks in rich text that have a border style, but when it comes to the foreground, it doesn’t. The reason is that we need to style the body in the foreground ourselves.

The code block is labeled pre;

Foreword: blockquote.

Of course you can f12 to see what it is, and then in rich text to see how it styles, you can also customize things like that

Note also that the foreground body image should always be set to max-width, otherwise the div will be split

3. Upload pictures, based on Express.

It’s been a long time. Directly attach the front and background code first, I am the front and back end separation. The main thing here is that the request path is different. Important: It is recommended that the first and second generation of wangEditor documents be viewed. Look at the cloud and click on the author and you can see three generations of documents. I looked at the document, added in github to see a big guy’s source code. **

And that should be it. Unfortunately, code highlighting is not fixed, it seems that 3 does not support highlight anymore, the source code in the beginning of the blog, the nuggets seem to compress automatically.