vite+vue3使用ueditor，后端PHP

爱被打了一巴掌 2024-03-27 13:18 70阅读 0赞

## 声明：如效果实现不符，请自己研究，不要随意甩锅 ##

#### vite+vue3使用ueditor，后端PHP ####

*  ==声明：如效果实现不符，请自己研究，不要随意甩锅==
 *  前端
 *  后端

综合所有前端能用的富文本编辑器，功能最好最多的还是百度的富文本编辑器（ueditor）

## 前端 ##

1、下载[ueditor][]，将其放在public中  
2、安装vue-ueditor-wrap最新3.x版本

> npm i vue-ueditor-wrap@next

3、在main.js中引入并使用

import VueUeditorWrap from 'vue-ueditor-wrap'
    createApp(App).use(VueUeditorWrap).mount('#app')

4、使用

<template>
      <div>
        <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
        <div v-html="msg"></div>
      </div>
    </template>
    <script>
    import {
           ref } from 'vue'
    export default {
          
      setup() {
          
        let msg = ref('<h2><img src="//i2.wp.com/img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>')
        let myConfig = {
          
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 450,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: '/api/upload/index',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
          UEDITOR_HOME_URL: '/ueditor/'
        }
        return {
          
          myConfig,
          msg
        }
      }
    }
    </script>

5、配置代理，否则会报错且无法使用上传图片等功能，具体看我博客中配置代理部分

## 后端 ##

1、找一个文件夹新建config.json，写入以下代码

{
        
        "imageActionName": "uploadimage",
        "imageFieldName": "upfile",
        "imageMaxSize": 2048000,
        "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
        "imageCompressEnable": true,
        "imageCompressBorder": 1600,
        "imageInsertAlign": "none",
        "imageUrlPrefix": "",
        "imagePathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}",
        "videoActionName": "uploadvideo",
        "videoFieldName": "upfile",
        "videoPathFormat": "/uploads/{yyyy}{mm}{dd}/{time}{rand:6}",
        "videoUrlPrefix": "",
        "videoMaxSize": 102400000,
        "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
        "fileActionName": "uploadfile",
        "fileFieldName": "upfile",
        "filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
        "fileMaxSize": 102400000,
        "fileAllowFiles": [
            ".png", ".jpg", ".jpeg", ".gif", ".bmp",
            ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
            ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
            ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
            ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml", ".crx"
        ]
    }

2、写文件上传接口

public function index()
        {
        
            $action = $this->request->param('action');
            switch($action){
        
                case 'config':
                    $result = file_get_contents(ROOT_PATH.'/public/assets/addons/ueditorbjq/config.json');// json文件的路径
                    break;
                case 'uploadimage':
                    $file = $this->request->file('upfile');
                    if($file){
        
                        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                        $res = $info->getInfo();
                        $res['state'] = 'SUCCESS';
                        $res['url'] = '/uploads/'.$info->getSaveName();
                        $result = json_encode($res);
                    }
                    break;
                case 'uploadvideo':
                    $file = $this->request->file('upfile');
                    if($file){
        
                        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                        $res = $info->getInfo();
                        $res['state'] = 'SUCCESS';
                        $res['url'] = '/uploads/'.$info->getSaveName();
                        $result = json_encode($res);
                    }
                    break;
                case 'uploadfile':
                    $file = $this->request->file('upfile');
                    if($file){
        
                        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'file');
                        $res = $info->getInfo();
                        $res['state'] = 'SUCCESS';
                        $res['url'] = '/uploads/file/'.$info->getSaveName();
                        $result = json_encode($res);
                    }
                    break;
                default:
                    break;
            }
            return $result;
        }

然后就可以使用了  
![在这里插入图片描述][67d7c0c81d79482cb591d222f30415a1.png]

[ueditor]: https://download.csdn.net/download/lhkuxia/86246200
[67d7c0c81d79482cb591d222f30415a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9bf2d095665748f4af8b2d06ca2206ff.png