安装
npm install vue-quill-editor --save //下载Vue-Quill-Editor
npm install quill --save /下载quill(Quill-Editor的赖)
代码
<el-form-item label="" sortable label="" autosize>
<div class="edit_container" autosize>
<el-upload
accept="image/png,image/jpeg,image/jpg,image/gif"
class="avatar-uploader quill-img"
action="/admin/upEditeFile" //图片上传地址
:show-file-list="false"
:on-success="uploadSuccess"
>
</el-upload>
<quill-editor //编辑器
style="width:400px"
v-model="store.project_desc"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</div>
</el-form-item>
<script>
//设置工具栏
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
// [{'direction': 'rtl'}],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{'color': []}, {'background': []}],
// [{'align': []}],
['image','video'],
['clean']
]
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import handleTreeData from '../../utils/handleTreeData'
export default {
name: "TopMain",
components: {
quillEditor
},
data() {
return {
store: {},
roles: 0,
content:null,
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'snow
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.quill-img input').click()
} else {
this.quill.format('image', false);
}
}
}
}
},
}
}
},
methods: {
/* county CollectEdit Page */
onEditorReady(editor) { // 准备编辑器
},
uploadSuccess(res) { //把已经上传的图片显示回富文本编辑框中
console.log(res);
//res返回的格式是{url:"图片的路径"},这个是后台接口返回的
let quill = this.$refs.myQuillEditor.quill
quill.focus();
quill.insertEmbed(quill.getSelection().index, 'image', res); //在编辑器中显示上传的图片
console.log(res);
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){
}, // 内容改变事件
escapeStringHTML(str) {
str = str.replace(/</g, '<');
str = str.replace(/>/g, '>');
return str;
},
formSave() {
this.store.save = true;
this.$http.post("/admin/county/collectEdit", this.store).then(({data = {}}) => {
if (data.code === 200) {
this.$notify({
title: '提示',
message: 'OK',
position: 'bottom-right'
});
let url = this.roles == 1 ? "#/county/store" : "#/county/collect";
setTimeout(function () {
location.href = url;
}, 2000);
} else if (data.code === 400) {
this.$message("错误:" + data.message);
}
}).catch((err) => {
this.$message("服务端错误" + err);
})
},
//获取数据
getMsg() {
this.$http.get("/admin/county/collectEdit", {params: {id: this.$route.params.id}}).then(({data = {}}) => {
this.store = data.data.store;
this.roles = data.data.roles;
}).catch((err) => {
this.$message("错误:" + err);
})
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
mounted() {
let content = ''; // 请求后台返回的内容字符串
this.str = this.escapeStringHTML(content);
},
created() {
this.getMsg();
}
}
</script>
php
/**
*富文本编辑器上传图片
*/
public function upEditeFile(Request $request)
{
if ($request->isMethod('POST')) {
$fileCharater = $request->file('file');
if ($fileCharater->isValid()) {
$ext = $fileCharater->getClientOriginalExtension();
//获取文件的绝对路径
$jpg = (string) Image::make($fileCharater)->encode('jpg',90);
$filename = 'images/'.date('Ymd').'/'.date('YmdHis').rand(100, 999).'.'.$ext;
Storage::disk('public')->put($filename, $jpg);
$filename = \App\Components\Common::upImg($filename);
$filename = \App\Components\Common::showImg($filename);
return $filename;
}
}else{
return \App\Components\Common::fail('编辑失败',400);
}
}