博主分享免费Java教学视频,B站账号:Java刘哥
目前接触的富文本编辑器很多,最喜欢的是 froala富文本编辑器、simditor 富文本编辑器、summernote富文本编辑器这几个。本文介绍一个支持 Markdown 语法的编辑器——SimpleMDE。
官网地址:https://simplemde.com/
效果图如下
下面简单讲下如何集成
JS
JS
获得编辑器的内容
包含HTML标签的
一、下载包并引用
1.下载 官网地址:点此 下载解压后,主要将 simplemde.min.js 和 simplemde.min.css 拿出来放到 static 目录 2.引用 HTML文件引用 CSS- <link rel="stylesheet" href="/static/plugins/simplemde/simplemde.min.css">
- <script src="/static/plugins/jquery/jquery.min.js"></script>
- <script src="/static/plugins/simplemde/simplemde.min.js"></script>
二、具体代码
HTML- <div id="markdown-editor">
- <textarea id="editorarea" style="display:none;"><#if post??>${post.postContent?if_exists}</#if></textarea>
- </div>
- <script>
- /**
- * 加载编辑器
- */
- var simplemde = new SimpleMDE({
- element: document.getElementById("editorarea"),
- autoDownloadFontAwesome: false,
- autofocus: true,
- autosave: {
- enabled: true,
- uniqueId: "editor-temp-page-<#if post??>${post.postId}<#else>1</#if>",
- delay: 10000
- },
- renderingConfig: {
- codeSyntaxHighlighting: true
- },
- showIcons: ["code", "table"],
- status: true,
- status: ["autosave", "lines", "words"],
- tabSize: 4
- });
- </script>
- simplemde.value(),
- simplemde.markdown(simplemde.value())
- 微信
- 交流学习,有偿服务
- 博客/Java交流群
- 资源分享,问题解决,技术交流。群号:590480292
2019年03月08日 14:20:24
655558555555啊
2019年01月17日 11:32:42
可以,我去体验一下