editormd生成博客编辑页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head><meta charset="UTF-8"><title>写文章</title><link rel="stylesheet" href="https://amazeui.clouddeep.cn/css/amazeui.min.css"/>
<!--    <link rel="stylesheet" href="https://amazeui.clouddeep.cn/css/admin.css">--><link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"><script src="http://editor.md.ipandao.com/examples/js/jquery.min.js"></script><link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/codemirror.min.css" /><link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/addon/dialog/dialog.css" /><link rel="stylesheet" href="http://editor.md.ipandao.com/lib/codemirror/addon/search/matchesonscrollbar.css" /><script src="http://editor.md.ipandao.com/lib/codemirror/codemirror.min.js"></script><!-- Or, You can also one by one load CodeMirror modes & addons. --><script src="http://editor.md.ipandao.com/lib/codemirror/addons.min.js"></script><script src="http://editor.md.ipandao.com/lib/codemirror/modes.min.js"></script><script src="http://editor.md.ipandao.com/lib/marked.min.js"></script><!-- if setting previewCodeHighlight == true --><script src="http://editor.md.ipandao.com/lib/prettify.min.js"></script><!-- if setting flowchart == true, or sequence-diagram == true --><script src="http://editor.md.ipandao.com/lib/raphael.min.js"></script><script src="http://editor.md.ipandao.com/lib/underscore.min.js"></script><script src="http://editor.md.ipandao.com/lib/sequence-diagram.min.js"></script><script src="http://editor.md.ipandao.com/lib/flowchart.min.js"></script><script src="http://editor.md.ipandao.com/lib/jquery.flowchart.min.js"></script><!-- if setting tex == true --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" /><script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script><link rel="stylesheet" href="http://editor.md.ipandao.com/css/editormd.css" /><script src="http://editor.md.ipandao.com/editormd.js"></script>
</head>
<body><!--引入共有头部--><header class="am-topbar admin-header"><div class="header"><div class="am-topbar" style="margin-bottom: 0"><h1 class="am-topbar-brand"><a class="blogTitleName" href="/"><img class="imgStyle" src="" />天地任逍遥</a></h1><!--手机适配导航显示按钮--><button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}" style="background-color: #CCCCCC;border-color: white;border-radius: 6px"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button><div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse"><ul class="am-nav am-nav-pills am-topbar-nav"><li><a class="top_bar" href="/" style="cursor: pointer;"><span class="am-icon-home"></span>&nbsp;首页</a></li><li><a class="top_bar" href="/categories" style="cursor: pointer;"><span class="am-icon-th"></span>&nbsp;分类</a></li><li><a class="top_bar" href="/archives" style="cursor: pointer;"><span class="am-icon-archive"></span>&nbsp;归档</a></li><li><a class="top_bar" href="/tags" style="cursor: pointer;"><span class="am-icon-tags"></span>&nbsp;标签</a></li><li><a class="top_bar" href="/update" style="cursor: pointer;"><span class="am-icon-calendar-plus-o"></span>&nbsp;更新</a></li><li><a class="top_bar" href="/friendlylink" style="cursor: pointer;"><span class="am-icon-street-view"></span>&nbsp;友链</a></li><li><a class="top_bar" href="/aboutme" style="cursor: pointer;"><span class="am-icon-user"></span>&nbsp;关于我</a> </li></ul><div class="am-topbar-right"><a class="am-btn am-btn-primary am-topbar-btn am-btn-sm" href="/logout" style="color: white">退出</a></div><div class="am-topbar-right am-topbar-brand"><a href="/editor" style="text-decoration: none" target="_blank"><span class="write-word">写博客</span></a></div><div class="am-topbar-right am-topbar-brand"><a href="/reward" style="text-decoration: none"><span class="reward-word">公益募捐</span></a></div></div></div></div></header><!--文章标题--><div class="container"><div class="row clearfix"><div class="col-md-10  column"><input  id="editor-title" type="text" class ="form-control"  placeholder="输入文章标题"></div><div class="col-md-2 column"><button type="button" class="btn btn-warning btn-default">发布博客</button></div></div></div><!--内容编辑区域--><!-- content start --><div class="admin-content"><div class="admin-content-body"><div id="layout"><div id="test-editormd"><textarea style="display:none;">[TOC]#### Disabled options- TeX (Based on KaTeX);- Emoji;- Task lists;- HTML tags decode;- Flowchart and Sequence Diagram;#### Editor.md directoryeditor.md/lib/css/scss/tests/fonts/images/plugins/examples/languages/editormd.js...```html&lt;!-- English --&gt;&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;&lt;!-- 繁體中文 --&gt;&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;```</textarea></div></div></div></div><script src="http://editor.md.ipandao.com/examples/js/jquery.min.js"></script><script src="http://editor.md.ipandao.com/editormd.min.js"></script><script type="text/javascript">var testEditor;$(function() {testEditor = editormd("test-editormd", {width: "100%",height: 640,syncScrolling: "single",path: "../lib/",autoLoadModules : false // Manually load modules});});</script>
</body>
</html>

editormd手动引入依赖：http://editor.md.ipandao.com/examples/manually-load-modules.html

下方呈现出的效果并非页面写好的元素，而是由js代码生成嵌入的。

情景描述二

当我们完成利用md编写博客并存储到数据库中，要将md博客内容从数据库中读取出来显示时，必然要面临一个问题，那就是怎么把md变成html放到页面中显示呢？

思路

好在已经有现成的方案能够解决这一问题，那就是marked这一js库（https://github.com/markedjs/marked）

<!doctype html>
<html>
<head><meta charset="utf-8"/><title>Marked in the browser</title>
</head>
<body><div id="content"></div><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script>document.getElementById('content').innerHTML =marked('# Marked in the browser\n\nRendered by **marked**.');</script>
</body>
</html>

editormd生成博客编辑页面相关推荐

Hexo编译静态资源生成博客图文教程
Hexo编译静态资源生成博客图文教程一.前提 1.node环境二.安装 1.初始化 2.运行一.前提 1.node环境首先,安装 nodejs, 因为Hexo是基于 Node.js 驱动的一款 ...
Hugo的安装和生成博客中遇到的问题
Hugo的安装和生成博客中遇到的问题一.安装问题 1.软件下载速度下载软件Git和Windows10版的hugo的时候网速过于缓慢,后来我到网上一查才明白是被国内限速了,因为GitHub的服务器是 ...
hexo博客生成博文，当生成的文章数量超过1000时，耗尽所有内存资源后出现out of memory
问题当hexo生成博文的时候,你的文章数量超过1000.2000或3000时,就是文章数量很多时,会出现生成不了的情况,具体的错误是out of memory,具体的错误如下: ATAL ERROR ...
Mac平台上的一个MarkDown编辑器和静态博客生成工具-mweb mac最新版下载
MWeb for Mac是一款Markdown + 文档管理 + 静态网页生成,集大成的 Markdown 应用.MWeb界面简洁高效.功能强大,全面支持 Github Flavored Markdo ...
hugo博客html创建目录,使用Hugo来生成静态博客
关于Hugo Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成 ...
自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统
目录前言一.一点建网站的背景知识二.个人博客系统介绍 1.核心功能和数据库 2.前端页面 3.后端 servlet service层 dao层配置文件参考资料前言这篇博主会介绍下我用ja ...
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
文章目录前言博客系统博客列表页紧急修改一下背景图片,虽然上面那张图很美,但是小了.特别的模糊,我就在替换一下背景图 html 代码部分通用 css 代码部分博客列表页专属 css文件博客 ...
博客系统程序(页面设计)
咱们学习javaEE的目的就是完成一个网站.在当前学习的基础上,已经可以完成我们的博客系统的页面的设计了!!! 首先我们要进行统筹规划: 首先我们的博客页面将会有4个页面: 1.博客列表页 2.博客详 ...
前端从头搭建个人博客
项目介绍几乎每个程序员都有一个博客梦.抱着学习前后端技术的心态花一个月左右的时间来完成这个个人项目. 这是一个使用vue2做前端框架,koa2做后端,mongodb数据库,搭建的单页面应用.网站 ...
springboot前后端分离项目（图书+博客+聊天室）
一.项目简介项目名称:blc management system(blc MS) 基于Vue CLI4 + SpringBoot开发的前后端分离项目. 基本功能:对博客和书籍进行增删改查,在聊天室点 ...

editormd生成博客编辑页面

editormd生成博客编辑页面相关推荐

最新文章

热门文章