铜仁住房和城乡建设局网站,网站开发建设公司电话,想自己做网站吗,网站每天一条推送怎么做的1.引入 我们常常在各种网页软件中编写文档的时候#xff0c;常常会有富文本编辑器#xff0c;就比如csdn写博客的这个页面#xff0c;包含了富文本编辑器#xff0c;那么怎么实现呢#xff1f;下面来详细的介绍#xff01; 2.安装wangeditor插件 在Vue工程中#xff0c;…1.引入 我们常常在各种网页软件中编写文档的时候常常会有富文本编辑器就比如csdn写博客的这个页面包含了富文本编辑器那么怎么实现呢下面来详细的介绍 2.安装wangeditor插件 在Vue工程中安装一个叫作wangeditor的插件时得先回退到根目录然后再下载如下 #回退到根目录
cd ..
#下载wangeditor
npm install wangeditor --save安装好的效果如下 3.导入wangeditor插件 在script标签内导入插件 import E from wangeditor 在data封装数据区中添加editor变量 editor:null, 一般来说我们的富文本编辑器都会添加在新增文档页面将样式添加到添加新闻的样式里如下 在这个新增新闻样式对应的函数处添加以下程序如下 this.$nextTick(() {...}): 这行代码调用$nextTick方法传入一个回调函数。这个回调函数将在DOM更新完成后执行。简单地说就是这个函数里的代码会在整个页面加载完之后再执行 this.editor new E(#editor):创建一个E实例并将其给刚刚我们在data数据区里创建的editor变量参数是刚刚我们在新增新闻那一块写的div的id this.editor.create():创建富文本编辑器 4. 样式展示 5.完善功能
5.1.销毁编辑器 如果不销毁编辑器那么下一次点开里面的内容还会停留在上一次关闭的时候如下内容部分还是上一次编辑的内容按理来说应该清空下面来看看怎么实现 Element UI中的dialog对话框有一个close事件这是在关闭对话框之后会执行的事件给我们自己的对话框添加上这个事件 然后在函数里添加销毁编辑器的代码如下 //销毁编辑器closeDialog(){this.editor.destroy()this.editor null;},
5.2.将新闻内容添加到数据库中 在提交函数中添加以下程序 第一行获取编辑框的内容第二行将获取的内容赋值给data数据区里的content 之后请求会将addPatientInfo交给后端用来向数据库提交新闻内容详情代码看之前的博客 //获得编辑框的内容
let content this.editor.txt.html()
this.addPatientInfo.content content
5.3.编辑新闻功能 同样的将之前create富文本编辑器的代码在编辑函数中ctrlc/v一个这样当我们点击编辑按钮时也能看到这个富文本编辑器同时代码还添加了一个回显功能在插槽中使用我们自定义的scope参数可以访问到插槽内的数据scope.row是获取一行的数据它作为参数传到了handleEdit里 5.4.解决新闻内容样式问题 在列表的内容模块会显示新闻的内容但是如果新闻内容较多那么在这个列表中再显示就显得不太美观并且其显示的格式影响观看如下 所以我们要把这个内容模块加一个按钮点击按钮之后单独来到一个对话框进行显示代码如下 !--对话框代码--
el-dialog title新闻内容 :visible.syncformVisable1 stylewidth: 100%divdiv v-htmlcontent/divdiv slotfooter classdialog-footerel-button typeprimary sizemini clickformVisable1 false确 定/el-button/div/div/el-dialog 添加一个插槽即可并且像刚刚上面讲得编辑功能那样获取新闻内容并且在对话框里显示出来 将函数获取的content交给全局变量content然后在在对话框里的v-html中绑定起来就能实现在对话框里展示新闻内容效果如下 还有一个问题当我们点开展示内容按钮之后发现格式不对我写的时候明明是用的表格但是这里展示的格式却不匹配 编辑的时候 点击显示内容的时候 那么如何修复这个问题呢 进入到能显示富文本格式的页面比如编辑新闻的页面查看页面元素找到富文本表格样式跟前的代码然后找到下面一个类名 w-e-text 我们把这个类名添加到我们自己显示新闻内容的div处如下 这样就ok了 当我们在再次点击展示内容的按钮后所展示的样式就匹配了,如下所示 5.5.上传图片功能 原本的富文本编辑器的上传文件的功能只能是输入图片的url路径来上传这样太烂了所以要扩展下这个上传功能 给前端创建富文本编辑器的函数里添加下面的代码 //图片上传的配置
this.editor.config.uploadImgServer http://localhost:8082/file/editor/upload
this.editor.config.uploadFileName file 其中第一行是wangeditor提供的请求接口后面的url写后端接口地址第二行是上传的文件名称和后端接口的参数名称保持一致当有了这两行代码之后我们就开始写后端的接口程序如下 //上传图片PostMapping(/editor/upload)public Dict editorUpload(MultipartFile file) throws IOException {//获取文件原始名称String originalFilename file.getOriginalFilename();//获取文件后缀(含这个.)String suffixFileName originalFilename.substring(originalFilename.lastIndexOf(.));//使用UUID重新给文件命名为了防止重名String currentFileName UUID.randomUUID().toString() suffixFileName;//创建一个文件目录对象File dir new File(filePath);//如果这个路径不存在,就创建一个if (!dir.exists()){dir.mkdir();}//将file指向的文件移动到由basePathfileName指定的新路径file.transferTo(new File(filePath currentFileName));//返回文件链接这个链接就是文件的下载地址这个下载地址是后台提供的String url http://localhost:8082/file/download/ currentFileName;System.out.println(url);//hutool提供的HashMapreturn Dict.create().set(errno,0).set(data,CollUtil.newArrayList(Dict.create().set(url,url)));} 这个文件上传的程序在我之前的博客里有详细的讲解这里只是解释下针对这个富文本编辑器而添加的部分 首先是采用了Hutool工具类下的一个HashMap叫作Dict然后按照wangeditor官方提供的后端返回类型编写程序对应上面程序的return的部分如下{ errno: 0, data: [ { url: 这里是URL的值 } ] } 演示如下 5.6.上传视频功能 有了图片上传那么视频上传也得有 同样的上传视频原本的格式非常不方便 我们同样的在前端创建富文本编辑器的函数里添加wangeditor提供的上传视频的配置代码 //视频上传的配置this.editor.config.uploadVideoServer http://localhost:8082/file/editor/video/uploadthis.editor.config.uploadVideoName file 添加了之后前端视频上传样式就会发生变化 接着来写后端接口的代码与上传图片后端接口代码唯一的区别就是wangeditor要求返回的格式不一样如下 { errno: 0, data: { url: 这里是URL的值 } } //上传视频PostMapping(/editor/video/upload)public Dict editorVideoUpload(MultipartFile file) throws IOException {//获取文件原始名称String originalFilename file.getOriginalFilename();//获取文件后缀(含这个.)String suffixFileName originalFilename.substring(originalFilename.lastIndexOf(.));//使用UUID重新给文件命名为了防止重名String currentFileName UUID.randomUUID().toString() suffixFileName;//创建一个文件目录对象File dir new File(filePath);//如果这个路径不存在,就创建一个if (!dir.exists()){dir.mkdir();}//将file指向的文件移动到由basePathfileName指定的新路径file.transferTo(new File(filePath currentFileName));//返回文件链接这个链接就是文件的下载地址这个下载地址是后台提供的String url http://localhost:8082/file/download/ currentFileName;System.out.println(url);//hutool提供的HashMapreturn Dict.create().set(errno,0).set(data,Dict.create().set(url,url));} 如果在之前的业务里加了JWTtoken验证那么在前端的请求头要加上token代码如下
