文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vite+vue3使用ueditor,后端PHP

2023-09-01 11:05

关注

vite+vue3使用ueditor,后端PHP

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

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

npm i vue-ueditor-wrap@next

在main.js中引入并使用

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

使用

<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('

Vue + UEditor + v-model双向绑定

'
) 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>

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

找一个文件夹新建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"    ]}

写文件上传接口

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;    }

然后就可以使用了
在这里插入图片描述

来源地址:https://blog.csdn.net/lhkuxia/article/details/128882477

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯