个人博客项目(spring+vue)整合富文本编辑器(markdown)

1、描述

之前写了一个用SpringBoot+Vue的个人博客,用若依框架做了后台开发。但是博客数据是纯文本,这次在之前纯文本的基础上,将发布文章功能、文章正文回显功能变为富文本显示。

2、核心目标

     2.1、在Vue项目(管理端)中整合v-md-editor插件, 能够保存富文本数据

     2.2、在展示端,能够回显富文本数据。

3、有用的借鉴文章:

https://www.cnblogs.com/wjw1014/p/11778159.html

在 Vue3 中使用 markdown 编辑器组件 - 掘金

介绍 | v-md-editor

4、前提

因为我对富文本的要求是有文本+图片,因此你需要自己有一个上传图片的接口。

接口要求:上传图片,返回图片可访问的地址。

SpringBoot结合阿里云OSS实现图片或文件接口-CSDN博客

5、实现

由于我的管理端为vue2,展示端为vue3。因此以下只列举一种版本的配置方法,详细可查看官方文档。

5.1发布文章实现富文本

步骤:

5.1.1安装v-md-editor(具体可看官方手册中Vue2还是Vue3的,这里是vue2)
 npm install mavon-editor --save
5.1.2在Vue项目的main.js中进行组件注册
// mavonEditor全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//markdown
Vue.use(mavonEditor)
5.1.3在vue页面中使用

在需要使用的位置上使用<mavon-editor>,其中v-model绑定的是富文本数据,@imgAdd绑定的是图片添加的处理方法。

  <mavon-editor ref=md  v-model="formData.content" @imgAdd="$imgAdd" @imgDel="$imgDel"/>

 在使用标签的页面的js中(vue页面的method区),其中的url要换成你上传图片的接口,url.data值的是你返回的图片地址(要根据你实际的修改)。

同时,在后端接受参数的时候,这里的图片参数在image变量中。在对应的java后台,接受的变量名应该一致或者指定,否者接受不到图片。

$imgDel(){},
     // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'http://localhost:8081/',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例,可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
               */
              console.log("url是")
              console.log(url)
               this.$refs.md.$img2Url(pos, url.data);
           })
      

5.2文章正文实现富文本回显

5.2.1安装v-md-editor(具体可看官方手册中Vue2还是Vue3的,这里是vue3)

npm i @kangc/v-md-editor@next -S

5.2.2在Vue项目的main.js中进行组件注册

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
app.use(VueMarkdownEditor);

5.2.3在vue页面中使用

这里v-model是绑定的保存的富文本数据,mode="preview"的作用是只展示富文本数据,而不用编辑。

   <v-md-editor v-model="articleDetail.article_detail"  mode="preview"></v-md-editor>

6、结果:

管理端(发布文章)实现之前:

管理端(发布文章)实现之后:

展示端实现之前:

展示端实现之后:

  • 37
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
# 项目特点 - 前台参考"Hexo"的"Butterfly"设计,美观简洁,响应式体验好。 - 后台参考"element-admin"设计,侧边栏,历史标签,面包屑自动生成。 - 采用Markdown编辑器,写法简单。 - 评论支持表情、GIF动图输入回复等,样式参考Valine。 - 前后端分离部署,适应当前潮流。 - 接入第三方登录,减少注册成本。 - 留言采用弹幕墙,更加炫酷。 - 支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。 - 搜索文章支持高亮分词,响应速度快。 - 新增文章目录、推荐文章等功能,优化用户体验。 - 新增在线聊天室,支持撤回、语音输入、统计未读数量等功能。 - 新增aop注解实现操作日志功能。 - 支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。 - 后台管理支持修改背景图片,博客配置等信息,操作简单,支持上传相册。 - 代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上传模式(OSS或本地),可支持配置。Elasticsearch占内存较高,如果服务器配置太低,不建议使用。 - 新增网站导航功能,页面优雅美观。可自行添加自己常用的网站进行分类和排序。 - 新增聊天管理功能,方便清理垃圾聊天内容。 - 新增登录日志功能,随时查看用户的登录信息。 - 前台页面重新布局重构,页面布局更加简洁,首页加载速度更快。 - 前台首页文章列表顶部新增滚动消息,超级炫酷。 - 新增了监控用户是否授权的功能、增加了用户的体验性。 - 增加图片删除后也将该路径的图片删除的功能、大大提高了文件存储的利用率。 - 将接口进行**axios**二次封装、更利于接口的请求和响应。 - 新增本博客配套的**微信小程序**,可随时用手机浏览文章。并且接入微信登录,减少注册成本。 - **微信小程序**新增每日新闻热搜功能、可随时查看热搜。 - 新增本博客配套的**App**,同时接入qq、微博登录,使用更加方便。 - 代码遵循阿里巴巴开发规范,利于开发者学习。 ## 技术介绍 **前端:** vue + vuex + vue-router + axios + vuetify + element + echarts + uniapp + uview + Html + Css + JavaScript **后端:** SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket **其他:** 接入QQ,微博、微信第三方登录,接入腾讯云人机验证、websocket ## 运行环境 ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
Spring中实现UEditor图片上传可以参考以下步骤: 1. 在前端Vue代码中配置UEditor富文本编辑器,并对上传图片做出相关设置。 2. 在Spring后端代码中编写图片上传的控制器,处理前端传递的图片文件信息。 3. 在Spring配置文件中配置文件上传的相关参数。 下面是具体的实现方法: 1. 前端代码: 在Vue组件中引入UEditor富文本编辑器,可以使用UEditor官网提供的Vue UEditor Wrapper组件。并在UEditor配置项中设置上传图片的相关参数,如下所示: ``` <template> <div> <vue-ueditor-wrap v-model="content" :config="ueditorConfig" :z-index="100" ></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap'; export default { components: { VueUeditorWrap }, data () { return { content: '', ueditorConfig: { UEDITOR_HOME_URL: '/static/UEditor/', serverUrl: '/api/upload', maximumWords: 50000, initialFrameWidth: '100%', initialFrameHeight: 500, autoHeightEnabled: false, autoFloatEnabled: false, toolbars: [ ['source', 'bold', 'italic', 'underline', 'strikethrough', 'removeformat', 'formatmatch', 'forecolor', 'backcolor', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'touppercase', 'tolowercase', 'link', 'unlink', 'insertimage', 'emotion', 'scrawl', 'music', 'insertvideo', 'attachment', 'map', 'gmap', 'insertcode', 'template', 'background', 'date', 'time', 'spechars', 'searchreplace', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts' ] ] }, }; }, }; </script> ``` 在上述代码中,通过`serverUrl`参数设置了上传图片的后端接口地址为`/api/upload`。 2. 后端控制器代码: 在Spring中,可以通过编写一个控制器方法来实现UEditor上传图片的功能。具体代码如下: ``` @RequestMapping(value = "/api/upload", method = RequestMethod.POST) @ResponseBody public String uploadImage(HttpServletRequest request, HttpServletResponse response) throws Exception { request.setCharacterEncoding("utf-8"); response.setHeader("Content-Type", "text/html"); String rootPath = request.getSession().getServletContext().getRealPath("/"); String contextPath = request.getContextPath(); String basePath = rootPath + File.separator + "upload" + File.separator; String savePath = contextPath + "/upload/"; String[] fileType = {".gif", ".png", ".jpg", ".jpeg", ".bmp"}; String upfile = "upfile"; JSONObject result = new JSONObject(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Iterator<String> iterator = multipartRequest.getFileNames(); while (iterator.hasNext()) { MultipartFile file = multipartRequest.getFile(iterator.next()); if (file != null) { String fileName = file.getOriginalFilename(); String fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); boolean isAllow = false; for (String ext : fileType) { if (ext.equals(fileExt)) { isAllow = true; break; } } if (!isAllow) { result.put("state", "不支持的文件类型!"); return result.toJSONString(); } String newFileName = UUID.randomUUID().toString() + fileExt; File uploadedFile = new File(basePath, newFileName); if (!uploadedFile.getParentFile().exists()) { uploadedFile.getParentFile().mkdirs(); } file.transferTo(uploadedFile); result.put("state", "SUCCESS"); result.put("url", savePath + newFileName); result.put("title", newFileName); result.put("original", fileName); result.put("type", fileExt); result.put("size", file.getSize()); } } return result.toJSONString(); } ``` 3. Spring配置文件: 在Spring的配置文件中,需要配置文件上传的相关参数。具体代码如下: ``` <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"/> <property name="defaultEncoding" value="UTF-8"/> <property name="resolveLazily" value="true"/> </bean> ``` 其中,`maxUploadSize`参数设置了上传文件的最大大小,单位为字节。 至此,我们就完成了在Spring+Vue中实现UEditor图片上传的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值