editormd生成博客编辑页面

最新推荐文章于 2022-05-13 00:29:13 发布
最新推荐文章于 2022-05-13 00:29:13 发布
阅读量806 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/upcdxlq/article/details/98785251
版权 
<!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 directory
    
                                editor.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>

 

upcdxlq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
设计一个博客页面
zhanghangqian的博客
05-10 1050
1.设计博客列表页 总代码：这里面的link标签是CSS修改颜色样式的文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device..
博客页面编辑
dezhilian4808的博客
07-17 140
阅读了《共享一下我的自定义CSS博客皮肤》这篇博文后，很受益。编辑博客后，也能让自己的博客变得好看些。 按照博文的内容，尝试了一下代码，效果如下： 这是文章的一级标题 这是文章的二级标题 这是文章的三级标题 这是文章的摘要 1、这里是需要注意的内容2、这里是需要注意的内容 3、这里是需要注意的内容 转载于:https://www.cnblogs.com/congxin/p...
编辑页面
weixin_45135790的博客
09-24 927
1.点击编辑，页面跳转到edit.html return [ '<a class="btn active" href="javascript:;" οnclick="School.edit(\'ID\')">编辑</a>', '<a class="btn active" href="#">档案&...
spring boot+vue个人博客六：博客页面，观看博客，博客编辑功能
殷志鹏的博客
07-23 761
文章目录一、博客展示1、api接口2、代码二、博客编辑1、整合mavon-editor编辑器2、博客编辑页面 一、博客展示 1、api接口 import request from '@/utils/request.js' export default { limitSelect(current,size) { return request({ url: `/service_blog/m-blog/limitSelect/${current}/${size}`, met
使用Editor.md实现博客markdown功能
qq_44972847的博客
10-04 200
建个人博客需要实现markdown功能。我最终在github上找到了相关方法。 Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。 github：https://github.com/pandao/editor.md 官网：https://pandao.github.io/editor.md/ 安装 Editor.md       用法 Markdown编辑器   官方写法 <link rel="st.
一个Angular指令集成editormd的markdown编辑器到Angular中
08-10
editormd是一款基于JavaScript的开源Markdown编辑器，它不仅支持Markdown语法，还提供了代码高亮、图表绘制、公式编辑等高级功能。其直观的界面和丰富的功能使得它在开发中颇受欢迎。 3. **集成步骤** - **安装...
editormd.zip
10-18
editor.md基本使用及上传代码，请放在服务器上运行，不要直接在文件资源管理器中打开 教程查看https://blog.csdn.net/sinat_37390744/article/details/120823214
NET使用editormd
05-18
Editormd是一款强大的在线Markdown编辑器，它提供了丰富的功能，如代码高亮、图表绘制、流程图等，同时也支持插入emoji表情。在.NET环境中使用editormd，可以为开发者提供一个用户友好的文本编辑界面，方便他们编写...
editormd插件资源
01-12
**编辑器MD (Editor.md)** 是一款开源的Markdown在线编辑器，它支持预览、代码高亮、图表、流程图等功能，广泛应用于个人博客、笔记系统以及文档管理系统中。这款编辑器以其高度自定义和良好的用户体验深受开发者...
springboot引入editormd文本编辑器-附件资源
03-02
springboot引入editormd文本编辑器-附件资源
editor.md编辑器demo(含本地图片上传)
09-06
editor.md支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能。根据开源代码写了一个小demo
新浪博客HtmlEditor在线编辑器
11-05
新浪博客HtmlEditor在线编辑器新浪博客HtmlEditor在线编辑器
editor.md
zhuzi51的专栏
05-23 482
参考 https://blog.csdn.net/lovejavaydj/article/details/73692917
pandao editor.md 学习笔记
千霜的博客
05-18 1798
底层使用了marked和CodeMirror，marked是一个比较底层的markdown编辑器和解析器，CodeMirror提供代码高亮。 使用时需引入editormd的css、js，引入editormd的js代码依赖jquery，因此也要提前引入jquery。 简单使用： //第一个参数为挂载点的ID，第二个为配置选项对象 var editor = editormd("e...
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
DarkAndGrey的博客
05-13 2954
文章目录前言博客系统 前言 前面的博客，只是快速带着大家过了一下前端。 学习了一些最简单，最常用的前端知识。 1、HTML的常用标签 2、CSS选择器 + 常用样式 3、JS的基础语法 4、DOM API 常用方法 真的要讲明白的话，光一个 CSS，要写的博客至少 10篇起步。 【以我的博客质量为基准】 但是！博主是后端的，不会学得太深入， 走前端方向的朋友，自己报个班，深入学习， 我是比较推荐 报比特的。 因为 我就是 比特的一份子。   博客系统 我们是仿照 CSDN 实现一个 最简化的版
[文档编辑工具]Markdown生成目录
Martin.Mu `s Special Column
08-20 3787
Markdown生成目录简介这边文章主要关注的是如何在Markdown中生成目录，由于我最近在公司写技术文档，随着篇幅的增加，为了方便查阅和管理就有了这篇文章，这里就分享给大家。
markdown学习笔记之md编辑器实现目录效果
荆楚小胡的博客
12-07 578
文章目录第四章 常规及复杂控制技术4.1 数字控制器的连续化设计技术4.1.1 数字控制器的连续化设计步骤 第四章 常规及复杂控制技术 4.1 数字控制器的连续化设计技术 4.1.1 数字控制器的连续化设计步骤 ...
如何在页面中显示editor.md
fationopen的博客
01-12 405
首先需要导入一些相应的css与js <link rel="stylesheet" href="/editor.md/css/editormd.css" /> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="/editor.md/editormd.js"></script> <script type="text/ja
springboot 365编辑器
最新发布
09-17
springboot集成editor.md是一个用于开发markdown编辑器的项目。你可以在博客地址https://blog.csdn.net/weixin_43653670/article/details/112095132中找到该项目的源码。在这个项目中，使用了SpringToolSuite4、JDK1.8和MySQL5.6进行开发。该编辑器实现了发布界面和带图片编辑等功能。 为了使用editor.md编辑器，你需要在页面加载完成后进行初始化。可以通过以下代码进行初始化： ```javascript var contentEditor; $(function() { contentEditor = editormd({ id :'md-content', width : '100%', height : 640, syncScrolling : 'single', path : '/mylib/editormd/lib/' }); }); ``` 如果想要使用editor.md编辑器，你需要先下载相应的资源包并将相关资源文件拷贝到项目的static目录下。然后在页面中引入editor.md的核心css和js文件，还需要先引入jquery，因为editor.md依赖于jquery。可以通过以下代码进行引入： ```html <link rel="stylesheet" href="/mylib/editormd/css/editormd.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/mylib/editormd/editormd.min.js"></script> ``` 在html标签中，使用以下代码来创建一个编辑区域： ```html <div id="md-content" style="z-index: 1 !important;"> <textarea placeholder="博客内容" rows="20" name="content" style="display:none;"></textarea> </div> ``` 以上就是springboot集成editor.md开发markdown编辑器的主要内容。如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值