在前端往后端发送数据进行修改的时候 需要转换为JSON格式 转换后打印出来的JSON是没有问题的 但是在调用接口回显的时候使用JSON.parse报错 VM26580:1 Uncaught (in promise) SyntaxError: Expected ',' or '}' after property value in JSON at position 32
这是我自己实现的一个富文本编辑器 修改属性后在style上面动态添加css 我是这样实现的
<template>
<div>
<div class="editor">
<!-- <quill-editor
id="quillEditor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onContentChange($event)"
@ready="onEditorReady($event)"
>
</quill-editor> -->
<div class="head" id="head" :style="{visibility:status}">
<el-select v-model="fontFamily" placeholder="请选择" @change="handleFontFamilyChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input class="fontSize" type="text" v-model="fontSize" @change="handleSizeChange"></el-input>
<i class="el-icon-arrow-up" style="position:absolute;
top:3px;
left:175px;" @click="jia"></i>
<i class="el-icon-arrow-down" style="position:absolute;
top:15px;
left:175px;" @click="jian"></i>
<i class="iconfont icon-jiacu" style="margin-left:30px;" @click="jiacu"></i>
<i class="iconfont icon-zitixiahuaxian" style="margin-left:15px;" @click="xiahuaxian"></i>
<i class="iconfont icon-italic" style="margin-left:15px;" @click="italic"></i>
<i class="iconfont icon-zitiyanse" style="margin-left:15px;" @click="fontColor=true"></i>
<input type="color" v-model="color" v-show="fontColor" @change="handleChangeColor"/>
<i class="iconfont icon-kaisuohuansuo" style="margin-left:15px;"></i>
<i class="iconfont icon-shanchu" style="margin-left:15px;"></i>
</div>
<div class="body">
<span class="body" v-html="content" @change="onEditorChange"></span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
status:'',
fontColor:false,
color:'#000000',//默认选择颜色
colorList:[], // 选择过的颜色数组
familyList:[], // 选择过的字体种类数组
sizeList:[], // 选择过的字体大小数组
sizeJiaList:[], // 选择过的字体大小加数组
sizeJianList:[], // 选择过的字体大小减数组
content:'',
names:this.name,
}
},
props:{
name:''
},
created(){
},
mounted(){
this.content="<p style=''>学员姓名</p>"
},
methods:{
// 字体大小
handleSizeChange(){
var size = this.content.split('font-size')
this.sizeList.push(this.fontSize)
console.log(size)
if(size.length==1){
var res = this.content.split('style=')
res[0]=res[0]+`style=font-size:${this.fontSize}px;`
this.content=res[0]+res[1]
}else{
console.log(this.sizeList[this.sizeList.length-2])
console.log(this.sizeList)
var res = this.content.split(`font-size:${this.sizeList[this.sizeList.length-2]}px;`)
console.log(res)
res[0] = res[0]+`font-size:${this.sizeList[this.sizeList.length-1]}px; `
this.content = res[0]+res[1]
}
console.log(this.content)
console.log(this.family)
},
// 内容改变事件
onEditorChange(val) {
if(this.names=='@info-studentName@'){
let res = val.split('学员姓名')
val = res[0]+'@info-studentName@'+res[1]
}
this.$emit('editorChange',val)
},
},
watch:{
content(newVal,oldVal){
console.log(newVal,oldVal)
this.onEditorChange(newVal)
}
}
}
</script>
<editor v-if="nameShow" :style="{position:'absolute',left:data.studentLeft+'px',top:data.studentTop+'px'}" v-on:editorChange="editorNameChange" name="@info-studentName@" v-draggable="{set:setStudent}" ></editor>
// 编辑框名称传值
editorNameChange(value) {
console.log(value)
this.data.studentName = value
},
在页面中调用接口：
that.form.template = JSON.stringify(that.form.template)
console.log(that.form.template)
putObj(that.form)
.then((data) => {
if (data.data.code === 0) {
that.$message.success('保存成功')
that.certificateNameShow = false
} else {
that.$message.error(data.data.msg)
}
})
.catch(() => {
})
通过接口访问回显：
console.log(this.tableData.template)
this.tableData.template = JSON.parse(this.tableData.template)
修改时的template打印：
[
{
"type":1,
"content":"<p style=font-size:19px;\"\">@info-studentName@</p>",
"image":"",
"dx":-75,
"dy":-97
}
]
接口回显时打印template：
[
{
"type":1,
"content":"<p style="font-size:19px;">@info-studentName@</p>",
"image":"",
"dx":-75,
"dy":-97
}
]
此时 style后自动添加了双引号 报错Uncaught (in promise) SyntaxError: Expected ',' or '}' after property value in JSON at position 32
