WangEditor v4结合vue3实现编辑器内容(文字、图片
2023-01-03 本文已影响0人
晓晓_1931
效果
1.gif
安装
npm i wangeditor --save
前端编辑器
<template>
<div id="hello">
<!-- 放置富文本容器 -->
</div>
<button @click="submitHTML">提交</button>
</template>
<script setup>
import E from 'wangeditor'
import { onMounted } from "vue";
import axios from "axios"
let editor = null
onMounted(() => {
editor = new E(`#hello`)
editor.config.showLinkImg = false
editor.config.uploadImgShowBase64 = true
editor.config.showLinkVideo = false
editor.create()
});
const submitHTML = () => {
let text = {
context: editor.txt.html() + ''
}
axios.post('http://localhost:8089/fileUpload/uploadHTML', text).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
</script>
后台controller
@Controller
public class UploadController {
@Autowired
private HtmlMapper htmlMapper;
@ResponseBody
@PostMapping("/uploadHTML")
public String uploadHTML(@RequestBody String htmltxt) throws Exception {
ObjectMapper om = new ObjectMapper();
HtmlTxt ht = om.readValue(htmltxt, HtmlTxt.class);
System.out.println(ht);
htmlMapper.insertHtml(new Html(null, ht.getContext()));
return "ok";
}
@ResponseBody
@PostMapping("/getHTML")
public List<Html> getHtml() {
return htmlMapper.listHtml();
}
}
dao层接口
@Mapper
public interface HtmlMapper {
@Select("select * from html")
public List<Html> listHtml();
@Insert("insert into html(context) values(#{context})")
public int insertHtml(Html Html);
}
接收数据实体类
public class HtmlTxt {
private String context;
public String getContext() {
return context;
}
public void setContext(String context) {
this.context = context;
}
@Override
public String toString() {
return context;
}
}
封装数据实体类
public class Html {
private Integer uid;
private String context;
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
public String getContext() {
return context;
}
public void setContext(String context) {
this.context = context;
}
public Html(Integer uid, String context) {
super();
this.uid = uid;
this.context = context;
}
@Override
public String toString() {
return "Html [uid=" + uid + ", context=" + context + "]";
}
}
表情传到后台如果报错
(1)：修改mysql数据库的编码为uft8mb4
(2)：修改数据表的编码为utf8mb4
(ALTER TABLE TABLE_NAME CONVERT TO CHARACTER SET utf8mb4;)
(3)：修改连接数据库的连接代码
前端读取内容
<template>
<div class="about">
<h1 v-for="(item,index) in htmlContext" :key="index" v-html="item.context"> </h1>
</div>
</template>
<script setup>
import { ref,onMounted } from "vue";
import axios from "axios"
let htmlContext = ref([])
onMounted(() => {
axios.post('http://localhost:8089/fileUpload/getHTML').then((res)=>{
console.log(res)
htmlContext.value = res.data
}).catch((err)=>{
console.log(err)
})
});
</script>
建表语句
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for html
-- ----------------------------
DROP TABLE IF EXISTS `html`;
CREATE TABLE `html` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`context` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
PRIMARY KEY (`uid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
