[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-pGwiTCRn":3,"public-project-articles-pGwiTCRn":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},1281,"pGwiTCRn",49,"14. Springboot3+Vue3实现富文本编辑器功能","## 先做一个模块\n旅游攻略：封面图、标题、**攻略内容**、发布时间\n\n```sql\nCREATE TABLE `introduction` (\n  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',\n  `img` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '封面图',\n  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '攻略标题',\n  `content` longtext COLLATE utf8mb4_unicode_ci COMMENT '攻略内容',\n  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '发布时间',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='旅游攻略表';\n```\n\n## wangeditor官网\n[https:\u002F\u002Fwww.wangeditor.com\u002F](https:\u002F\u002Fwww.wangeditor.com\u002F)\n\n## 安装\n```javascript\n\u002F\u002F cd vue\nnpm install @wangeditor\u002Feditor --save\nnpm install @wangeditor\u002Feditor-for-vue@next --save\n```\n\n## 引入\n```javascript\nimport '@wangeditor\u002Feditor\u002Fdist\u002Fcss\u002Fstyle.css' \u002F\u002F 引入 css\nimport {onBeforeUnmount, reactive, ref, shallowRef} from \"vue\";\nimport { Editor, Toolbar } from '@wangeditor\u002Feditor-for-vue'\n```\n\n## 初始化（表单中）\nwangEditor 5 富文本字段可以直接和form中的字段使用v-model进行绑定\n\n```html\n\u003Cel-form-item prop=\"content\" label=\"攻略详情\">\n  \u003Cdiv style=\"border: 1px solid #ccc; width: 100%\">\n    \u003CToolbar\n        style=\"border-bottom: 1px solid #ccc\"\n        :editor=\"editorRef\"\n        :mode=\"mode\"\n    \u002F>\n    \u003CEditor\n        style=\"height: 500px; overflow-y: hidden;\"\n        v-model=\"data.form.content\"\n        :mode=\"mode\"\n        :defaultConfig=\"editorConfig\"\n        @onCreated=\"handleCreated\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fel-form-item>\n```\n\n```javascript\n\u002F* wangEditor5 初始化开始 *\u002F\nconst editorRef = shallowRef()  \u002F\u002F 编辑器实例，必须用 shallowRef\nconst mode = 'default' \nconst editorConfig = { MENU_CONF: {} }\n\u002F\u002F 图片上传配置\neditorConfig.MENU_CONF['uploadImage'] = {\n  headers: {\n    token: data.user.token,\n  },\n  server: 'http:\u002F\u002Flocalhost:9999\u002Ffiles\u002Fwang\u002Fupload',  \u002F\u002F 服务端图片上传接口\n  fieldName: 'file'  \u002F\u002F 服务端图片上传接口参数\n}\n\u002F\u002F 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏\nonBeforeUnmount(() => {\n  const editor = editorRef.value\n  if (editor == null) return\n  editor.destroy()\n})\n\u002F\u002F 记录 editor 实例，重要！\nconst handleCreated = (editor) => {\n  editorRef.value = editor\n}\n\u002F* wangEditor5 初始化结束 *\u002F\n```\n\n```html\n\u003Cel-table-column prop=\"content\" label=\"攻略内容\">\n  \u003Ctemplate v-slot=\"scope\">\n    \u003Cel-button type=\"primary\" @click=\"viewContent(scope.row.content)\">点击查看\u003C\u002Fel-button>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n\n\u003Cel-dialog title=\"攻略信息\" v-model=\"data.viewVisible\" width=\"60%\" destroy-on-close>\n  \u003Cdiv v-html=\"data.content\" style=\"padding: 0 20px\">\u003C\u002Fdiv>\n\u003C\u002Fel-dialog>\n```\n\n```javascript\nconst data = reactive({\n  content: null,\n  viewVisible: false,\n})\n\nconst viewContent = (content) => {\n  data.content = content\n  data.viewVisible = true\n}\n```\n\n## 后端文件上传接口\n```java\n\u002F**\n * wang-editor编辑器文件上传接口\n *\u002F\n@PostMapping(\"\u002Fwang\u002Fupload\")\npublic Map\u003CString, Object> wangEditorUpload(MultipartFile file) {\n    String flag = System.currentTimeMillis() + \"\";\n    String fileName = file.getOriginalFilename();\n    try {\n        String filePath = System.getProperty(\"user.dir\") + \"\u002Ffiles\u002F\";\n        \u002F\u002F 文件存储形式：时间戳-文件名\n        FileUtil.writeBytes(file.getBytes(), filePath + flag + \"-\" + fileName);\n        System.out.println(fileName + \"--上传成功\");\n        Thread.sleep(1L);\n    } catch (Exception e) {\n        System.err.println(fileName + \"--文件上传失败\");\n    }\n    String http = \"http:\u002F\u002Flocalhost:9999\u002Ffiles\u002Fdownload\u002F\";\n    Map\u003CString, Object> resMap = new HashMap\u003C>();\n    \u002F\u002F wangEditor上传图片成功后， 需要返回的参数\n    resMap.put(\"errno\", 0);\n    resMap.put(\"data\", CollUtil.newArrayList(Dict.create().set(\"url\", http + flag + \"-\" + fileName)));\n    return resMap;\n}\n```\n\n","coding",1,4578,1528,"2025-02-26 16:04:58","2026-05-03 22:49:02","带小白做毕设2025系列课程","graduation-project-2025",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,63,70,77,84,91,98,105,112,119,120,127,134,141,148,155],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},766,"XmlcAcY0","00. 带小白做毕设2025课程介绍",19012,1512,"2025-02-22 15:29:01","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},767,"nmjXCdVH","01. 前端Vue3 框架的快速搭建以及项目工程的讲解",15797,1513,"2025-02-13 17:13:40",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},768,"pMdPrVeH","02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架",15959,1514,"2025-02-14 11:25:07",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},771,"8PikYMQU","03. Springboot3框架的快速搭建以及项目工程的讲解",12768,1517,"2025-02-21 17:21:51",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},772,"Q1TCG9Jj","04. Springboot3整合MyBatis实现数据库操作",11144,1518,"2025-03-07 15:50:30",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},773,"De7YPnEc","05. Springboot3+vue3实现增删改查、分页查询、批量删除（上）",10827,1519,"2025-02-22 15:09:19",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},774,"YKEHfsPd","06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）",7760,1520,"2025-02-22 22:00:02",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},775,"sNDKpWVJ","07. Springboot3+Vue3实现excel批量导入导出",6552,1521,"2025-02-23 10:49:24",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},776,"1uMP9O6C","08. Springboot3+vue3实现登录注册功能",7964,1522,"2025-02-23 18:14:13",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},777,"WahvQp1v","09. Springboot3+vue3实现JWT登录鉴权",7151,1523,"2025-02-23 21:58:00",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},778,"QFFAqZh1","10. Springboot3+vue3实现文件上传和下载",6171,1524,"2025-02-24 14:16:27",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},1278,"S2eL2g5L","11. Springboot3+vue3实现个人中心、修改密码",5945,1525,"2025-02-24 18:10:59",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},1279,"LkN8Mmsn","12. Springboot3+Vue3实现系统公告功能",4967,1526,"2025-02-25 11:50:13",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},1280,"i7wziuEN","13. Springboot3+Vue3实现角色权限控制",4446,1527,"2025-02-25 11:51:38",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},1282,"tZ8iDql5","15. Springboot3+Vue3实现模块之间的关联",4454,1529,"2025-02-26 18:28:55",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1283,"gb01JPC2","16. Springboot3+Vue3实现echarts数据统计",4307,1530,"2025-03-03 16:58:21",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1284,"59bDkSFf","17. Springboot3+Vue3实现提交审核业务功能",3793,1531,"2025-03-04 11:58:16",{"id":142,"uuid":143,"project_id":6,"title":144,"type":9,"status":10,"public_enabled":10,"views":145,"sort":146,"created_at":147,"updated_at":14,"project_title":15,"project_slug":16},1285,"gApyb58X","18. Springboot3+Vue3实现预约审核业务功能",3332,1532,"2025-03-05 20:07:24",{"id":149,"uuid":150,"project_id":6,"title":151,"type":9,"status":10,"public_enabled":10,"views":152,"sort":153,"created_at":154,"updated_at":14,"project_title":15,"project_slug":16},1286,"XfpY5re0","19. Springboot3+Vue3实现前台首页的设计",3508,1533,"2025-03-05 20:08:12",{"id":156,"uuid":157,"project_id":6,"title":158,"type":9,"status":10,"public_enabled":10,"views":159,"sort":160,"created_at":161,"updated_at":14,"project_title":15,"project_slug":16},1287,"BnSPRBOc","20. Springboot3+Vue3实现前台轮播图和详情页的设计",4062,1534,"2025-03-17 17:13:36"]