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

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

主要介绍了SpringBoot使用Editor.md构建Markdown富文本编辑器示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编

过来看看吧

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

前言前言

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

Markdown编辑器。

下载插件下载插件

<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键为准 -->

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"