详解vue.js+UEditor集成 [前后端分离项目]

详解 vue.js+UEditor 集成 [前后端分离项目] 的完整攻略，具体步骤如下：

1. 前置准备

在开始之前，我们需要先准备好以下工具和环境：

• Vue.js 2.0+
• UEditor 1.4.3.3+
• Vue-UEditor-wrapper 插件
• Node.js 8.0+
• Vue CLI 3.0+
• Webpack 4.0+

2. 安装 Vue-UEditor-wrapper 插件和 UEditor

在项目目录下打开终端，执行以下命令：

npm install vue-ueditor-wrapper --save

然后，在 public/index.html 中添加 UEditor 所需的资源文件引入：

<script type="text/javascript" src="/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="/UEditor/ueditor.all.min.js"></script>

3. Vue.js 中使用 UEditor

在 Vue.js 文件中，先引入 Vue-UEditor-wrapper 插件：

import VueUeditorWrap from 'vue-ueditor-wrapper'
import 'vue-ueditor-wrapper/dist/vue-ueditor-wrapper.min.css'

然后，创建一个组件，并在 script 标签中使用 UEditor：

<template>
  <div>
    <vue-ueditor-wrap id="editor" :content="content" @content-change="contentChange"></vue-ueditor-wrap>
  </div>
</template>

<script>
export default {
  name: 'VueUeditorWrapDemo',
  data () {
    return {
      content: ''
    }
  },
  components: { VueUeditorWrap },
  methods: {
    contentChange (content) {
      this.content = content
    }
  }
}
</script>

以上代码中，VueUeditorWrap 是 Vue-UEditor-wrapper 的组件名，通过 id 属性给 UEditor 添加一个唯一标识符，:content 绑定了 UEditor 的内容，@content-change 注册了 UEditor 内容改变时的回调函数。

4. 后端 API 接口

后端 API 接口需要对 UEditor 提交的数据进行处理，具体示例代码如下：

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class UEditorController extends Controller
{
  public function uploadImage(Request $request)
  {
    $file = $request->file('file');
    if ($file->isValid()) {
      $filename = $file->getClientOriginalName();
      $path = Storage::putFileAs('/', $file, $filename);
      return response()->json([
        'state' => 'SUCCESS',
        'url' => 'http://' . request()->getHttpHost() . '/' . $path,
        'title' => $filename,
        'original' => $filename
      ]);
    }

    return response()->json([
      'state' => 'ERROR'
    ]);
  }
}

以上代码为 Laravel 框架下的 UEditor 图片上传 API 实现，首先获取 file 参数，对上传图片进行验证，将图片保存到指定目录，并返回图片上传成功的状态结果。

5. 完整示例

我们可以使用 Vue CLI 创建一个新的 Vue.js 项目，然后按照上述步骤进行配置和编码。完整的示例代码请见下面：

<template>
  <div>
    <h1>Vue.js + UEditor集成演示</h1>
    <vue-ueditor-wrap id="editor" :content="content" @content-change="contentChange"></vue-ueditor-wrap>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrapper'
import 'vue-ueditor-wrapper/dist/vue-ueditor-wrapper.min.css'

export default {
  name: 'VueUeditorWrapDemo',
  data () {
    return {
      content: ''
    }
  },
  components: { VueUeditorWrap },
  methods: {
    contentChange (content) {
      this.content = content
    },
    submit () {
      const formData = new FormData()
      formData.append('file', blobToFile(this.content))
      const xhr = new XMLHttpRequest()
      xhr.open('POST', '/api/v1/ueditor/uploadImage')
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const res = JSON.parse(xhr.responseText)
          if (res.state === 'SUCCESS') {
            alert('上传成功')
          } else {
            alert('上传失败')
          }
        }
      }
      xhr.send(formData)
    }
  }
}

function blobToFile (blob) {
  const file = new File([blob], 'upload.jpg', { type: 'image/jpeg' })
  return file
}
</script>

同时，后端 API 接口的完整示例代码也在上面提供了。在使用过程中，需要注意的是，我们需要根据实际情况修改相应的资源路径和接口地址。