Recently, the company took on a project to use a rich text editor, starting with vue-quill-Editor, which is lightweight and easy to use. The most important thing is that it has a version that is specific to NuxT. It is easy to configure, and you can use it without worrying about bugs. When you encounter problems, you can also search the corresponding solutions on the Internet.
However, our project manager disliked this editor is too light, said can we change the Baidu? (then the inner MMP), gave him a bunch of reasons (Baidu’s editor is a little richer, the image uploading function vue-quill-editor also has ah, uEditor does not specifically on the SSR version of nuxT, there will be a series of bugs in the nuxT boot, etc.) but it is not useful, said let me do, At that time I was a little desperate, ORIGINALLY I was not a god, just a rookie, and at that time there were other tasks afraid of no time to do (to know the configuration of this kind of thing, very time-consuming), there was no way, finally only their own Baidu and then all kinds of mining pit.
Writing this article is mainly for those who need, if there is a mistake in the article, thank you for your courage to correct, well, nonsense no more to say, let’s look at the problem I this small white encounter:
1. How to reference relevant JS files in uEditor to nuxt project? Reference website: NuxT official documentation (zh.nuxtjs.org/)
First, go to the baidu rich text editing organs network (ueditor.baidu.com/website/) to download ueditor 1.4.3.3 JSP version utf-8 and next down to file your new folder in (in addition to the JSP folder)
Nuxt does not import external JS files in main.js like vue does. Nuxt does import external js files in nuxt.config.js
Of encapsulated into components form, please see this blog (https://www.cnblogs.com/ocean-sky/p/7132319.html), which is very detailed, bloggers in making the related code and packaging components according to the right, If there are any errors in your uEditor file, you can make a copy of it.
About the configuration of ueditor.config.js, post some pictures for you to see
After the uEditor is configured, uploading images and videos will not work normally, because the backend configuration is required (refer to the backend configuration in the previous blog post). After the backend configuration is completed, it will give you the return address, which is the unified request interface path of the server shown above
Note: the button to upload an image will only appear if the interface returns correctly as shown in the figure below, otherwise it will indicate that the backend configuration item has not loaded, blah blah blah blah
Then, there is the uploading problem. Didn’t I say THAT I tested a file called ueditor.all.js earlier? In this single image uploaded file has been modified, which is the place below
Finally, an error was returned by the image upload interface
