SpringBoot使用Editor.md构建Markdown富文本编辑器示例

2024-09-28 16:59:19

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

前言

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。本章将使用SpringBoot整合Editor.md构建Markdown编辑器。

下载插件

项目地址：Editor.md

解压目录结构：

配置Editor.md

将exapmles文件夹中的simple.html放置到项目中，并配置对应的css和js文件

配置编辑器

......
 <script src="${re.contextPath}/jquery.min.js"></script>
  <script src="${re.contextPath}/editor/editormd.min.js"></script>
  <link rel="stylesheet" href="${re.contextPath}/editor/css/style.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>
......
<!-- 存放源文件用于编辑 -->
 <textarea style="display:none;" id="textContent" name="textContent">
</textarea>
    <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
    <textarea id="text" class="editormd-html-textarea" name="text"></textarea>
  </div>

初始化编辑器

var testEditor;

  $(function () {
    testEditor = editormd("test-editormd", {
      width: "90%",
      height: 640,
      syncScrolling: "single",
      path: "${re.contextPath}/editor/lib/",
      imageUpload: true,
      imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL: "/file",
      //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });

这样就实现了最简单的editor.md编辑器，效果如下：

访问地址：http://localhost:8080/

图片上传

由于在初始化编辑器中配置的图片上传地址为imageUploadURL: "/file",，与之对应，我们在/file处理文件上传即可

@RestController
@RequestMapping("/file")
@Slf4j
public class FileController {

//  @Value("")
//  String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator;
  /**
   * 在配置文件中配置的文件保存路径
   */
  @Value("${img.location}")
  private String folder;

  @PostMapping
  public FileInfo upload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) throws Exception {
    log.info("【FileController】 fileName={},fileOrginNmae={},fileSize={}", file.getName(), file.getOriginalFilename(), file.getSize());
    log.info(request.getContextPath());
    String fileName = file.getOriginalFilename();
    String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
    String newFileName = new Date().getTime() + "." + suffix;

    File localFile = new File(folder, newFileName);
    file.transferTo(localFile);
    log.info(localFile.getAbsolutePath());
    return new FileInfo(1, "上传成功", request.getRequestURL().substring(0,request.getRequestURL().lastIndexOf("/"))+"/upload/"+newFileName);
  }

  @GetMapping("/{id}")
  public void downLoad(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) {
    try (InputStream inputStream = new FileInputStream(new File(folder, id + ".txt"));
       OutputStream outputStream = response.getOutputStream();) {
      response.setContentType("application/x-download");
      response.setHeader("Content-Disposition", "attachment;filename=test.txt");

      IOUtils.copy(inputStream, outputStream);
      outputStream.flush();
    } catch (Exception e) {

    }
  }
}

文件预览

表单POST提交时，editor.md将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台将这些HTML字符串持久化到数据库中。具体在页面显示做法如下：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>Editor.md examples</title>
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.preview.min.css" rel="external nofollow" />
  <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<!-- 因为我们使用了dark主题，所以在容器div上加上dark的主题类，实现我们自定义的代码样式 -->
<div class="content editormd-preview-theme" id="content">${editor.content!''}</div>
<script src="${re.contextPath}/jquery.min.js"></script>
<script src="${re.contextPath}/editor/lib/marked.min.js"></script>
<script src="${re.contextPath}/editor/lib/prettify.min.js"></script>
<script src="${re.contextPath}/editor/editormd.min.js"></script>
<script type="text/javascript">
  editormd.markdownToHTML("content");
</script>
</body>
</html>

预览地址：http://localhost:8080/editorWeb/preview/{id}

编辑地址：http://localhost:8080/editorWeb/edit/{id}

代码下载

从我的 github 中下载，https://github.com/longfeizheng/editor-markdown

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

编辑器Ueditor和SpringBoot 的整合方法

1.先导入ueditor所有的包:在springboot static下 2.导入需要的ueditor的js 3.配置ueditor.config.js的// 服务器统一请求接口路径://, serverUrl:(这个路径是个Java类,和config.js的内容相同) 4.js里面执行1.var ue = UE.getEditor('editor');函数 5.上传图片: /* Ueditor里面的上传图片 */ UE.Editor.prototype._bkGetActionUrl=UE.E
SpringBoot使用Editor.md构建Markdown富文本编辑器示例

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 前言 Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建.本章将使用SpringBoot整合Editor.md构建Markdown编辑器. 下载插件项目地址:Editor.md 解压目录结构: 配置Editor.md 将exapmles文件夹中的simple.html放置到项目中,并
vue2.0项目中使用Ueditor富文本编辑器示例代码

最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置首先把官网下载的Ueditor资源,放入静态资源src/static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.引入在main.js中引入 import '../static/UE/ueditor.
vue中使用ueditor富文本编辑器

最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <
Vue2.0中集成UEditor富文本编辑器的方法

在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载
vue-quill-editor富文本编辑器超详细入门使用步骤

目录首先放上效果图 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小参考文章: 总结首先放上效果图 1.安装 npm install vue-quill-editor -S 2.引入到项目中有两种挂载方式: 全局挂载和在组件中挂载,根据自己的项目需求选择,一般用到富文本编辑都是在某一个项目中,这里只写在项目中挂载的方式 import { quillEditor } from 'vue-
超漂亮的Bootstrap 富文本编辑器summernote

Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",
vue2.0 实现富文本编辑器功能

前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.简洁.易用,但是升级到 3.x 之后,不便于定制化开发.不过作者很勤奋,广义上和我是一家人,打个call quill:本身功能不多,不过可以
CKeditor富文本编辑器使用技巧之添加自定义插件的方法

本文实例讲述了CKeditor富文本编辑器使用技巧之添加自定义插件的方法.分享给大家供大家参考,具体如下: 首先就是在CKeditor的plugins目录下新建一个目录qchoice: qchoice目录下的结构如下: 然后, images中如下: dialogs中如下: 我们先来看plugins.js文件的内容: (function() { CKEDITOR.plugins.add("qchoice", { requires: ["dialog"], init:
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.
vue集成百度UEditor富文本编辑器使用教程

在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打

SpringBoot使用Editor.md构建Markdown富文本编辑器示例

相关推荐

随机推荐