Use Baidu editor ueditor in Vue

ueditor does not support installation through npm, so you need to go to the official website to download and decompress it and put it in your project public or static directory.

1. Download address: GitHub - fex-team/ueditor at v1.4.3.3

Sometimes I can't get in,

Link: https://pan.baidu.com/s/15bUMrmCBt8I69P4lzNZtIA
Extraction code: 5ybv

2. Unzip the downloaded compressed package and install the dependencies (the node_modules folder will appear after the dependency installation is complete)

npm i

3. Install grunt

npm install -g grunt-cli

4. Build dist

grunt default

After completion, the directory structure is as follows:

5. Rename the generated dist package to ueditor, and put it under the project file public or static (vue-cli3 is under public, vue-cli2 is under static)

The directory structure of dist is as follows:

I put it under public/static, the name is UEditor

6. Install vue-ueditor-wrap

npm i vue-ueditor-wrap

7. Introduced into the page for use

<template>
  <div class="ue">
    <vue-ueditor-wrap v-model="data" :config="myConfig"></vue-ueditor-wrap>
  </div>
</template>
 
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
 
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      data: "dome",
      myConfig: {
        // 设置编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 320,
        // 初始容器宽度
        initialFrameWidth: "1000",
        // 可以放后台存放路径--需要后端配合设置
        serverUrl: "http://111.111.1.11:8088/config",
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: "/static/ueditor/",
      },
    };
  },
};
</script>

Note: serverUrl requires back-end configuration to generate a link address that can dynamically access config.json. Specifically, the back-end can refer to this article for the most detailed springboot vue UEditor integration in history (including various pits encountered)_kshon's blog- CSDN blog

If the serverUrl is not configured properly , an error will be reported after running the project "request background configuration item http error, upload function will not work properly!"

Problem 1: When uploading a single image, the interface returns that the upload was successful, but an upload error is displayed on the page, and the image cannot be displayed on the page.

Solution:

Because the vue-ueditor-wrap plug-in directly calls ueditor.all.min.js, so first change ueditor.all.js to ueditor.all.min.js, the original ueditor.all.min.js can be deleted directly up.

Then modify it according to the method on the Internet (I haven’t tried it, find it yourself, there are still many, try them all)

However, after I changed it, the uploaded single image was grayed out, and it can no longer be used. If you know the reason, please let me know~

So, I found another package, but I couldn’t find the original blog. He downloaded it on Baidu Netdisk, so I’ll share it too!

Baidu Netdisk

Link: https://pan.baidu.com/s/1o7srXjyrb9S3DuSd5Pjsaw
Extraction code: 6s76

After downloading the package, import the project directly, and change ueditor.all.js to ueditor.all.min.js.

This package should have been modified. If there are still problems, it may be caused by different return parameters given to you by the backend. Debug it slowly by yourself.

Mainly locate the following code

Use Baidu editor ueditor in Vue

Guess you like