|
|
|
|
@ -0,0 +1,113 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div style="border: 1px solid #ccc;">
|
|
|
|
|
<Toolbar
|
|
|
|
|
ref="editor"
|
|
|
|
|
style="border-bottom: 1px solid #ccc"
|
|
|
|
|
:editor="editor"
|
|
|
|
|
:defaultConfig="toolbarConfig"
|
|
|
|
|
:mode="mode"
|
|
|
|
|
/>
|
|
|
|
|
<Editor
|
|
|
|
|
style="height: 500px; overflow-y: hidden;"
|
|
|
|
|
v-loading="Loading"
|
|
|
|
|
v-model="html"
|
|
|
|
|
:defaultConfig="editorConfig"
|
|
|
|
|
:mode="mode"
|
|
|
|
|
@onCreated="onCreated"
|
|
|
|
|
@onChange="onChange"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import "@wangeditor/editor/dist/css/style.css"
|
|
|
|
|
import { DomEditor } from '@wangeditor/editor'
|
|
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
|
|
export default {
|
|
|
|
|
components: { Editor, Toolbar },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
editor: null,
|
|
|
|
|
html: '',
|
|
|
|
|
Loading: false,
|
|
|
|
|
toolbarConfig: {
|
|
|
|
|
excludeKeys: [
|
|
|
|
|
'group-video',
|
|
|
|
|
'insertImage',
|
|
|
|
|
'emotion',
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
editorConfig: {
|
|
|
|
|
placeholder: '请输入内容...',
|
|
|
|
|
MENU_CONF: {
|
|
|
|
|
uploadImage:{
|
|
|
|
|
// 上传图片配置
|
|
|
|
|
server: process.env.VUE_APP_BASE_API + '/common/upload',
|
|
|
|
|
fieldName: "file",
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: "Bearer " + getToken()
|
|
|
|
|
},
|
|
|
|
|
customInsert(res,insertFn){
|
|
|
|
|
// console.log(res);
|
|
|
|
|
// console.log(insertFn);
|
|
|
|
|
insertFn(res.url,res.originalFilename,res.url)
|
|
|
|
|
// console.log("=======customInsert=======");
|
|
|
|
|
},
|
|
|
|
|
onBeforeUpload(file){
|
|
|
|
|
console.log(this.Loading);
|
|
|
|
|
// console.log("=======onBeforeUpload=======");
|
|
|
|
|
},
|
|
|
|
|
// onSuccess(file,res){
|
|
|
|
|
// console.log('onSuccessFile',file);
|
|
|
|
|
// console.log('onSuccessRes',res);
|
|
|
|
|
// console.log("=======onSuccess=======");
|
|
|
|
|
// },
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mode: 'default', // or 'simple'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
/* 编辑器的内容 */
|
|
|
|
|
value: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
value: {
|
|
|
|
|
handler(val) {
|
|
|
|
|
this.html = val
|
|
|
|
|
},
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
onCreated(editor) {
|
|
|
|
|
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
const toolbar = DomEditor.getToolbar(editor)
|
|
|
|
|
const curToolbarConfig = toolbar.getConfig()
|
|
|
|
|
// console.log( curToolbarConfig.toolbarKeys ) // 当前菜单排序和分组
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onChange(editor){
|
|
|
|
|
let html = editor.getHtml();
|
|
|
|
|
// console.log("html", html);
|
|
|
|
|
this.$emit('input',html);
|
|
|
|
|
// console.log('content', editor.children)
|
|
|
|
|
},
|
|
|
|
|
destroy() {
|
|
|
|
|
const editor = this.editor
|
|
|
|
|
if (editor == null) return
|
|
|
|
|
editor.destroy() // 组件销毁时，及时销毁编辑器
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
</style>
|
