11
elementUi+vue+php 引入wangeditor
source link: https://surest.cn/archives/152/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jun 8, 2020 at 05:53 pm
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK