6 changed files with 62 additions and 120 deletions
@ -1,75 +1,66 @@ |
|||
<template> |
|||
<!-- <div id="editorSection"></div> --> |
|||
<div> |
|||
<editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar> |
|||
</div> |
|||
<template lang="html"> |
|||
<div id="editor" name="productcontent"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Editor from "tui-editor"; /* ES6 */ |
|||
import "tui-editor/dist/tui-editor.css"; // editor's ui |
|||
import "tui-editor/dist/tui-editor-contents.css"; // editor's content |
|||
import "codemirror/lib/codemirror.css"; // codemirror |
|||
import "highlight.js/styles/github.css"; // code block highlight |
|||
import { init } from "echarts/lib/echarts"; |
|||
import EditorBar from './editoritem' |
|||
export default { |
|||
components: { EditorBar }, |
|||
props:{ |
|||
content:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isClear: false, |
|||
detail:"" |
|||
} |
|||
}, |
|||
watch: { |
|||
content(val){ |
|||
if(val){ |
|||
this.setValue(val) |
|||
import {BASE_API} from '../../config'; |
|||
import E from 'wangeditor' |
|||
export default { |
|||
name: 'editoritem', |
|||
props:{ |
|||
content:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.initialize(); |
|||
// this.$nextTick(() => { |
|||
// this.setValue(this.content) |
|||
// }) |
|||
}, |
|||
beforeDestroy() { |
|||
this.tuieditor = null; |
|||
delete this.tuieditor; |
|||
}, |
|||
methods: { |
|||
change(val) { |
|||
console.log(val) |
|||
|
|||
}, |
|||
initialize() { |
|||
if (this.$el) { |
|||
this.tuieditor = new Editor({ |
|||
el: document.querySelector("#editorSection"), |
|||
initialEditType: "wysiwyg", |
|||
previewStyle: "vertical", |
|||
height: "800px", |
|||
}); |
|||
this.tuieditor.getHtml(); |
|||
data() { |
|||
return { |
|||
// uploadPath, |
|||
editor: null, |
|||
} |
|||
}, |
|||
|
|||
getValue() { |
|||
return this.tuieditor.getHtml() |
|||
watch: { |
|||
content(val){ |
|||
if(val){ |
|||
this.editor.txt.html(val) |
|||
} |
|||
} |
|||
}, |
|||
setValue(val) { |
|||
this.tuieditor.setHtml(val); |
|||
mounted() { |
|||
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> |
|||
|
|||
<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> |
|||
|
@ -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