ElementUi+Vue+Php 引入Wangeditor

效率

后端实现

public function image(Request $request)
{
    $files = $request->file();
    $paths = [];
    array_map(function ($file) use (&$paths){
        $path = Storage::putFile('upload', $file);
        $paths[] = env('APP_URL') . "storage/app/$path";
            $bashPaths[] = storage_path('app/') . $path;
        }, $files);
        $path = Arr::first($paths);

        return $this->success(compact('path'));
    }
}

前端实现

<template>
  <div>
    <div ref="editorElem"></div>
  </div>
</template>

import E from "wangeditor";
export default {

  data() {
    return {
      editor: null,
      api: null
    };
  },

  methods: {
    // 插入html
    toHtml(videoUrl) {
      this.editor.txt.append(`<iframe src=${videoUrl}></iframe>`);
    },
    
    // 设置文本
    setHtml(html) {
      this.editor.txt.html(html);
    },
  },
  
  mounted() {
    let that = this;
    this.api = "api/upload/image";
    this.editor = new E(this.$refs.editorElem);
    this.editor.customConfig.uploadImgServer = this.api
    this.editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            var url = result.data.path
            insertImg(url)
        }
    }
    this.editor.customConfig.onchange = html => {
      this.$emit("updateTitle", html);
    };
    this.editor.create();
    this.editor.txt.html(this.title);
  },

  watch: {
    dialogFormVisible() {
      this.editor.txt.html(this.title);
      this.$refs.qiniuUpload.init()
    }
  }

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Mar 22, 2021 at 04:46 pm