vue-ueditor-wrap php UEditor富文本编辑器配置说明

最新推荐文章于 2026-05-22 09:49:46 发布

原创

最新推荐文章于 2026-05-22 09:49:46 发布 · 2.5k 阅读

本文档详细介绍了如何在Vue项目中集成PHP Laravel后台的UEditor富文本编辑器，包括设置VUE的headers以携带token，区分开发与生产环境的serverUrl和UEDITOR_HOME_URL配置，以及解决ueditor.all.js中跨域问题的代码调整。同时，文中提到了PHP Laravel后台的两个关键路由：一个用于获取配置，另一个用于文件上传。

官方地址：https://github.com/HaoChuan9421/vue-ueditor-wrap

VUE:

 <el-form-item label="内容" prop="content">
                  <vue-ueditor-wrap
                    v-model="postForm.content"
                    :config="config1"
                    style="line-height:20px"></vue-ueditor-wrap>

</el-form-item>

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

......................
data() {
        
        return {


          ...........................


            config1: {
                // FIXME headers token无效190921
                headers: {
                    Authorization: 'Bearer ' + getToken() // 服务端指定使用了Bearer类型的access token，所以客户端必须使用这种格式将access token传给资源服务器。
                },
                serverUrl: (process.env.NODE_ENV === 'development') ? '/dev-api/v1/upload.ueditor?container_name=CMS' : process.env.VUE_APP_BASE_API+'/v1/upload.ueditor?container_name=CMS', // 上传图片的地址   开发环境有API
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: (process.env.NODE_ENV === 'development') ? '/UEditor/' : '/admin/UEditor/'  // TODO 必须要用对应:F:\web\x60\code-admin\public\UEditor     public目录引用时 使用根目录
            }
        }
    },

注意:

1 headers 携带上token

2 serverUrl,开发模式和线上生产连接后端地址分别设置

3 UEDITOR_HOME_URL 发模式和线上生产调用地址,分别设置

ueditor.all.js文件修改:

              /* 发出ajax请求 */
                    me._serverConfigLoaded = false;

标签

#vue #php #lavarel

最低0.47元/天解锁文章