6 changed files with 62 additions and 120 deletions
@ -1,75 +1,66 @@ |
|||||
<template> |
<template lang="html"> |
||||
<!-- <div id="editorSection"></div> --> |
<div id="editor" name="productcontent"></div> |
||||
<div> |
|
||||
<editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Editor from "tui-editor"; /* ES6 */ |
import {BASE_API} from '../../config'; |
||||
import "tui-editor/dist/tui-editor.css"; // editor's ui |
import E from 'wangeditor' |
||||
import "tui-editor/dist/tui-editor-contents.css"; // editor's content |
export default { |
||||
import "codemirror/lib/codemirror.css"; // codemirror |
name: 'editoritem', |
||||
import "highlight.js/styles/github.css"; // code block highlight |
props:{ |
||||
import { init } from "echarts/lib/echarts"; |
content:{ |
||||
import EditorBar from './editoritem' |
type: String, |
||||
export default { |
default: '' |
||||
components: { EditorBar }, |
|
||||
props:{ |
|
||||
content:{ |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
isClear: false, |
|
||||
detail:"" |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
content(val){ |
|
||||
if(val){ |
|
||||
this.setValue(val) |
|
||||
} |
} |
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
// this.initialize(); |
|
||||
// this.$nextTick(() => { |
|
||||
// this.setValue(this.content) |
|
||||
// }) |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
this.tuieditor = null; |
|
||||
delete this.tuieditor; |
|
||||
}, |
|
||||
methods: { |
|
||||
change(val) { |
|
||||
console.log(val) |
|
||||
|
|
||||
}, |
}, |
||||
initialize() { |
data() { |
||||
if (this.$el) { |
return { |
||||
this.tuieditor = new Editor({ |
// uploadPath, |
||||
el: document.querySelector("#editorSection"), |
editor: null, |
||||
initialEditType: "wysiwyg", |
|
||||
previewStyle: "vertical", |
|
||||
height: "800px", |
|
||||
}); |
|
||||
this.tuieditor.getHtml(); |
|
||||
} |
} |
||||
}, |
}, |
||||
|
watch: { |
||||
getValue() { |
content(val){ |
||||
return this.tuieditor.getHtml() |
if(val){ |
||||
|
this.editor.txt.html(val) |
||||
|
} |
||||
|
} |
||||
}, |
}, |
||||
setValue(val) { |
mounted() { |
||||
this.tuieditor.setHtml(val); |
this.seteditor() |
||||
|
this.editor.txt.html(this.content) |
||||
|
}, |
||||
|
methods: { |
||||
|
seteditor() { |
||||
|
this.editor = new E( document.getElementById('editor') ) |
||||
|
this.editor.config.height = 800 |
||||
|
this.editor.config.uploadImgShowBase64 = false // base 64 存储图片 |
||||
|
this.editor.config.uploadImgServer = `${BASE_API}/file/uploadImg`// 配置服务器端地址 |
||||
|
this.editor.config.uploadVideoServer = `${BASE_API}/file/uploadAudio` |
||||
|
this.editor.config.uploadVideoName = 'file' |
||||
|
this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名 |
||||
|
this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M |
||||
|
this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片 |
||||
|
this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间 |
||||
|
|
||||
|
this.editor.create() |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
}; |
|
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style lang="css"> |
||||
|
.editor { |
||||
|
width: 100%; |
||||
|
margin: 0 auto; |
||||
|
position: relative; |
||||
|
z-index: 0; |
||||
|
} |
||||
|
.toolbar { |
||||
|
border: 1px solid #ccc; |
||||
|
} |
||||
|
.text { |
||||
|
border: 1px solid #ccc; |
||||
|
min-height: 500px; |
||||
|
} |
||||
</style> |
</style> |
||||
|
@ -1,53 +0,0 @@ |
|||||
<template lang="html"> |
|
||||
<div id="editor" name="productcontent"> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import {BASE_API} from '../../config'; |
|
||||
import E from 'wangeditor' |
|
||||
export default { |
|
||||
name: 'editoritem', |
|
||||
data() { |
|
||||
return { |
|
||||
// uploadPath, |
|
||||
editor: null, |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.seteditor() |
|
||||
this.editor.txt.html(this.value) |
|
||||
}, |
|
||||
methods: { |
|
||||
seteditor() { |
|
||||
this.editor = new E( document.getElementById('editor') ) |
|
||||
this.editor.config.uploadImgShowBase64 = false // base 64 存储图片 |
|
||||
this.editor.config.uploadImgServer = `${BASE_API}/file/upload`// 配置服务器端地址 |
|
||||
this.editor.config.uploadImgHeaders = { |
|
||||
'Content-Type': 'multipart/form-data' |
|
||||
}// 自定义 header |
|
||||
this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名 |
|
||||
this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M |
|
||||
this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片 |
|
||||
this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间 |
|
||||
this.editor.create() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="css"> |
|
||||
.editor { |
|
||||
width: 100%; |
|
||||
margin: 0 auto; |
|
||||
position: relative; |
|
||||
z-index: 0; |
|
||||
} |
|
||||
.toolbar { |
|
||||
border: 1px solid #ccc; |
|
||||
} |
|
||||
.text { |
|
||||
border: 1px solid #ccc; |
|
||||
min-height: 500px; |
|
||||
} |
|
||||
</style> |
|
Loading…
Reference in new issue