vue 中使用 富文本编辑器;带图片上传时后台报错JSON parse error: Unexpected character ('\' (code 92)): was expecting comma to separate Object entries;
使用的是 wangEditor
vue安装好后,在 components 文件夹下创建一个创建一个类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div ref="editor"></div> </template> <script> import E from 'wangeditor'; export default { props: { value: { type: String, default: '', }, meanArray: { // 自定义菜单 type: Array, default: null, }, }, model: { prop: 'value', event: 'change', }, watch: { value: function (value) { if (value !== this.editor.txt.html()) { this.editor.txt.html(this.value); } }, //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 }, data() { return { // 默认有这么多菜单,meanArray有值以meanArray为准 defaultMeanus: [ 'head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'video', 'table', 'code', 'splitLine', 'undo', 'redo', ], editor: '', }; }, methods: { init() { const _this = this; this.editor = new E(this.$refs.editor); this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片 this.setMenus(); //设置菜单 this.editor.config.onchange = (html) => { _this.$emit('change', html); // 将内容同步到父组件中 }; this.editor.create(); //创建编辑器 }, setMenus() { // 设置菜单 if (this.meanArray) { this.editor.config.menus = this.meanArray; } else { this.editor.config.menus = this.defaultMeanus; } }, getHtml() { // 得到文本内容 return this.editor.txt.html(); }, setHtml(txt) { // 设置富文本里面的值 this.editor.txt.html(txt); }, }, mounted() { let that = this; that.$nextTick(function () { that.init(); }); }, }; </script>
实际使用
<editor ref="editorOne" v-model="form.chengxiao" @change="change" style="height: 400px"></editor>
import Editor from '@/components/wangEditor'
components: { Editor },
change(val) {
//console.log(val.length)
},
提交的时候后台报错 JSON parse error: Unexpected character ('\' (code 92)): was expecting comma to separate Object entries;
富文本中没有图片的话就不会报错,但也不会保存样式;
解决办法,从框架的官网上找的;
@RequestMapping("/system/baosong")
排除连接后边加上 system/baosong 即可,图片跟样式都能保留了。