整合富文本编辑器editor.md

首先下载editormd资源包，解压到自己项目资源目录
地址链接：editor.md

** 前端发送请求进入编辑页**
controller层

/**
* 文章编辑页方法
*
* @return
*/
@GetMapping(“/toEditor”)
public String toEditor(Model model) {
model.addAttribute(“admin”, redisUtils.hmget(“user”).get(“username”));
//editormd 为编辑页面html
return “editor/editormd”;
}

editormd.html

   <div id="layout"><header><h1>现在开始写文章吧~</h1></header><form name="mdEditorForm"><div align="center">文章标题：<input type="text" name="title"></div><div id="test-editormd"><textarea style="display:none;" id="textContent" name="content"></textarea><!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --><!--            <textarea id="text" class="editormd-html-textarea" name="text"></textarea>--></div></form>
</div>
<script th:src="@{../js/jquery.min.js}"></script>
<script th:src="@{../js/editormd.min.js}"></script>
<script type="text/javascript">var testEditor;$(function () {testEditor = editormd("test-editormd", {width: "90%",height: 640,syncScrolling: "single",emoji: true,path: "../editormd/lib/",//图片上传imageUpload: true,imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL: "/article/file/upload",onload: function () {console.log('onload', this);},toolbarIcons: function () {return ["undo", "redo", "|","bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|","h1", "h2", "h3", "h4", "h5", "h6", "|","list-ul", "list-ol", "hr", "|","link", "reference-link", "image", "code", "preformatted-text","code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|","goto-line", "watch", "preview", "fullscreen", "clear", "search", "|","help", "info", "releaseIcon"]},toolbarIconTexts: {releaseIcon: "<span bgcolor=\"gray\" >发布</span>",},toolbarHandlers: {releaseIcon: function (cm, icon, cursor, selection) {//表单提交mdEditorForm.method = "post";mdEditorForm.action = "/addArticle";//提交至服务器的路径mdEditorForm.submit();}}});});</script>
</body>
<div th:replace="~{commons/template :: js}"></div>
</html>

###自定义功能按钮(发布按钮)

toolbarIconTexts: {releaseIcon: "<span bgcolor=\"gray\" >发布</span>",// index : "<span bgcolor=\"red\">返回首页</span>",},toolbarHandlers: {releaseIcon: function (cm, icon, cursor, selection) {//表单提交mdEditorForm.method = "post";mdEditorForm.action = "/addArticle";//提交至服务器的路径mdEditorForm.submit();}

**新增文章方法
编辑的内容会封装进article

 /*** 文章新增方法** @param article* @param map* @return*/@PostMapping("addArticle")public String addArticle(Article article, Map map) {//获取编辑器内容map.put("content", article.getContent());//java日期对象转成数据库日期对象map.put("createdate", DateUtil.jtod(new Date()));map.put("adminid",redisUtils.hmget("user").get("userid"));int res = articleService.insert(map);//新增成功返回1，否则返回0 逻辑内容可自定义，这里不做书写}

查看编辑器内容

<div><!--文章头部信息：标题，作者，最后更新日期，导航--><h2 style="margin: auto 0" th:text="${article.title}"></h2><h3 th:text=" '作者：'+ ${article.author}"></h3><h3 th:text=" '日期：'+ ${article.createdate}"></h3><!--文章主体内容--><div id="doc-content" style="width: 80%"><textarea style="display:none;"  placeholder="markdown" th:text="${article.content}"></textarea></div></div><link rel="stylesheet" th:href="@{/css/editormd.preview.css}" />
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/js/editormd.min.js}"></script><script type="text/javascript">var testEditor;$(function () {testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的idhtmlDecode: "style,script,iframe",emoji: true,taskList: true,tocm: true,tex: true, // 默认不解析flowChart: true, // 默认不解析sequenceDiagram: true, // 默认不解析codeFold: true});});</script>

查看文章方法

    @RequestMapping("/article/{id}")public String show(@PathVariable("id") int id, Model model) {ArticleAdminVo article = articleService.getArticleById(id);log.info(article);model.addAttribute("article", article);return "admin/editor/article";}

到此为止就可以正常显示啦

解决图片上传问题

         //开启图片上传功能imageUpload: true,imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL: "/article/file/upload",onload: function () {console.log('onload', this);},

图片上传方法

/*** 处理图片上传** @param file* @param request* @return* @throws IOException*///博客图片上传问题@RequestMapping(value = "/file/upload")@ResponseBodypublic JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException{//上传路径保存设置//获得SpringBoot当前项目的路径：System.getProperty("user.dir")String path = System.getProperty("user.dir") + "/upload/";//按照月份进行分类：Calendar instance = Calendar.getInstance();String month = (instance.get(Calendar.MONTH) + 1) + "月";path = path + month;File realPath = new File(path);if (!realPath.exists()) {realPath.mkdirs();}//上传文件地址System.out.println("上传文件保存地址：" + realPath);//解决文件名字问题：我们使用uuid;String filename = "pg-" + UUID.randomUUID().toString().replaceAll("-", "") + ".jpg";File newfile = new File(realPath, filename);//通过CommonsMultipartFile的方法直接写文件（注意这个时候）file.transferTo(newfile);//给editormd进行回调JSONObject res = new JSONObject();res.put("url", "/upload/" + month + "/" + filename);res.put("success", 1);res.put("message", "upload success!");return res;}

此时还不能正常上传图片，下面开始编写配置文件

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {//这里涉及到需要配置虚拟路径映射访问，因为对服务器的保护措施导致的，服务器不能对外部暴露真实的资源路径。// 文件保存在真实物理路径/upload/下（即项目的物理地址下：F:/IDEA_Project_Location/自己/bookstore/upload/3月）// 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {//将物理地址upload下的文件映射到/upload下//访问的时候就直接访问http://localhost:9000/upload/文件名registry.addResourceHandler("/upload/**").addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");}
}

到此图片可正常显示了

springboot整合富文本编辑器相关推荐

使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
LAYUI 整合富文本编辑器
最近用layui搭一个后台, 在发文章的时候有用到富文本编辑器 ,这里记录一下. 本人用的是 kindeditor富文本编辑器,因为layui自带的富文本感觉功能不是很多. kindeditor 下载 ...
SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略
背景最近要用到一个富文本编辑器,记得遥远的年代,调过Kingeditor.Ueditor...但是那些都很重,,,于是最近经常再留意这件事,直到最近看到一个wangEditor,体验了一下,又轻又好 ...
easyUI整合富文本编辑器KindEditor详细教程
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
vue整合富文本编辑器tinymce
一.复制文本编辑器组件到项目文件夹里面二.在build下的webpack.dev.conf.js里面添加 templateParameters: {BASE_URL: config.dev.asse ...
spring boot2.0整合富文本编辑器summernote
summernote对上传图片,以及对图片大小细节,删除图片移除服务器资源等处理的比较完美. 整合过程,summernote的官网https://summernote.org/getting-star ...
Day08-整合富文本编辑器-p115
整合富文本编辑器-p115 一.Tinymce可视化编辑器二.在项目中整合文本编辑器 2.1.下载组件 2.2.在项目中的build/webpack.dev.conf.js文件中添加配置 2.3.引 ...
springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...

springboot整合富文本编辑器

springboot整合富文本编辑器：博客项目

整合富文本编辑器editor.md

springboot整合富文本编辑器相关推荐

最新文章

热门文章