there is no problem with the introduction and display of wangeditor, components installed by npm in vuecli, but when the server is packaged, it shows that there is no wangeditor,. I can package locally, but I will also report an error in packaging after I clone the git code to install dependencies, and I find that there is no him in packjson.
<template>
<div id="wangeditor">
<div
ref="editorElem"
style="text-align:left"
></div>
</div>
</template>
<script>
import E from "wangeditor"
export default {
name: "editorElem",
data() {
return {
editorContent: "",
uploading:
process.env.baseUrl + "/anonVerify/account/file/wangEditorUpload",
editor: null
}
},
props: ["catchData", "content"], //
created() {
this.editorContent = this.content
console.log(this.content)
},
watch: {
content() {
this.editor.txt.html(this.content)
}
},
mounted() {
this.editor = new E(this.$refs.editorElem) //
this.editor.customConfig.onchange = html => {
this.editorContent = html
this.catchData(html) //htmlcatchData
}
this.editor.customConfig.uploadImgServer = this.uploading
this.editor.customConfig.uploadFileName = "file"
// editor.customConfig.uploadImgHeaders = {
// Accept: "*/*",
// Authorization: "Bearer " + token //token
// }
this.editor.customConfig.menus = [
//
"head",
"list", //
"justify", //
"bold",
"fontSize", //
"italic",
"underline",
"image", //
"foreColor", //
"undo", //
"redo" //
]
this.editor.create()
console.log(this.content)
this.editor.txt.html(this.content)
//
this.editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
//
// xhr XMLHttpRequst editor files
// {prevent: true, msg: "xxxx"}
// return {
// prevent: true,
// msg: ""
// }
},
success: function(xhr, editor, result) {
//
// xhr XMLHttpRequst editor result
this.imgUrl = Object.values(result.data).toString()
},
fail: function(xhr, editor, result) {
//
// xhr XMLHttpRequst editor result
},
error: function(xhr, editor) {
//
// xhr XMLHttpRequst editor
},
timeout: function(xhr, editor) {
//
// xhr XMLHttpRequst editor
},
// {errno:0, data: [...]}
// JSON
customInsert: function(insertImg, result, editor) {
//
// insertImg editor result
// : {url:"...."} :
let url = Object.values(result.data) //result.data
JSON.stringify(url) //JSON
insertImg(url)
// result JSON
}
}
}
}
</script>