1、官网下载：http://pandao.github.io/editor.md/

2、使用例子：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>添加编辑广告图</title>

    <link rel="stylesheet" type="text/css" href="../../css/editormd.css">

    <script type="text/javascript" src="../../js/editormd.min.js"></script>

<div class="editormd" id="test-editormd">

                <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>

                <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->

                <textarea class="editormd-html-textarea" name="text"></textarea>

            </div>
</body>
</html>
$(function() {

    editormd("test-editormd", {

        width : "90%",

        height : 640,

        syncScrolling : "single",

        //你的lib目录的路径，

        path    : "../../../statics/lib/",

        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。

        saveHTMLToTextarea : true,

        imageUpload : true,

        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],

        imageUploadURL : "/upload/image",

    });

});

java 上传后台代码：

package com.bbkj.admin.upload.controller;

import org.apache.commons.io.FileUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.File;

import java.io.IOException;

/**

 * Created by Administrator on 2016/12/23.

 */

@Controller

@RequestMapping("/upload")

public class UploadController {

    @RequestMapping(value="/image",method= RequestMethod.POST)

    public void hello(HttpServletRequest request, HttpServletResponse response,

                      @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach) {

        try {

            request.setCharacterEncoding("utf-8");

            response.setHeader("Content-Type", "text/html");

            String rootPath = request.getSession().getServletContext().getRealPath("/upload/editor/");

            /**

             * 文件路径不存在则需要创建文件路径

             */

            File filePath = new File(rootPath);

            if (!filePath.exists()) {

                filePath.mkdirs();

            }

            //最终文件名

            File realFile = new File(rootPath + File.separator + attach.getOriginalFilename());

            FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile);

            //下面response返回的json格式是editor.md所限制的，规范输出就OK

            response.getWriter().write("{\"success\": 1, \"message\":\"上传成功\",\"url\":\"/upload/editor/" + attach.getOriginalFilename() + "\"}");

        } catch (Exception e) {

            try {

                response.getWriter().write("{\"success\":0}");

            } catch (IOException e1) {

                e1.printStackTrace();

            }

        }

    }

}

最后效果：

Editor.md的安装使用(MarkDown)的更多相关文章

  1. editor.md实现Markdown编辑器

    editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...

  2. JAVA WEB项目中使用并改造editor.md实现Markdown编辑器

    Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...

  3. Markdown编辑器editor.md的使用---markdown上传图片

    http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...

  4. Markdown编辑器Editor.md使用方式

    摘要: 搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下. Editormd下载地址:http://pandao.github.io/editor.md/ 由于前 ...

  5. thinkphp5使用Markdown编辑器Editor.md并上传图片

    Editor.md官网:https://pandao.github.io/editor.md/index.html 下载后解压放到项目内,和引入ueditor差不多 1.引入项目资源 <!--m ...

  6. Markdown编辑器editor.md的使用

      目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...

  7. java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载

    java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...

  8. 解决Editor.md通过代码块原样输出Emoji被强制解析问题

    Editor.md是一款优秀的开源Markdown 编辑器,在使用中遇到的一些问题和功能改进分享给需要的伙伴. 项目地址 https://github.com/pandao/editor.md 问题 ...

  9. springboot结合开源editor.md集成markdonw编辑器

    今天来实现一个简单的功能,通常blog后台编辑大多使用的是富文本编辑器,比如百度的Ueditor,比较轻巧的wangEditor,那么如何使用开源editor.md的markdown呢? 搭建一个sp ...

随机推荐

  1. 微信开发 获取用户openId 与路由控制

    w实践,满足当前需求. www.w.com www.w.com/w1.php $wxurl='https://open.weixin.qq.com/connect/oauth2/authorize?a ...

  2. 用linux c求最大公约数

    我写了两中函数,一个是辗转相除法一个是更相减损法,主要代码如下: /*辗转相除法*/int gcd(int a, int b) { ) { return b; } else { return gcd( ...

  3. Echarts树图定制详解

    本文讲的是如何定制Echarts的tree图.主要包括下载.全局变量名修改.左键菜单添加.右键菜单添加.内容缩放.文本过滤高亮等. 一 说明 Echarts中提供了tree图,但实际项目中,该tree ...

  4. shell awk实战

    一.文本处理 1.按行提取关键字频次(如取第5列) awk 'BEGIN{FS="|"} {a[$5]+=1;} END {for(i in a) print i ":& ...

  5. 通过virt-manager 利用NFS创建、迁移虚拟机2

    前面一篇文章介绍了利用NFS创建虚拟机的过程,本文就介绍下如何利用NFS对虚拟机进行动态迁移. 动态迁移就是把一台虚拟机在不停止其运行的情况下迁移到另一台物理机上.这看起来似乎不太可能,不过还好kvm ...

  6. Python之配置文件读写

    ConfigParser模块 一.创建配置文件 在D盘建立一个配置文件,名字为:test.ini 内容如下: [baseconf] host=127.0.0.1 port=3306 user=root ...

  7. maven加载第三方jar包

    <dependency> <groupId>com.yeepay</groupId> <artifactId>yop-sdk</artifactI ...

  8. JavaWeb—基于Token的身份验证

    传统身份验证的方法 HTTP Basic Auth HTTP Basic Auth简单点说明就是每次请求API时都提供用户的username和password,简言之,Basic Auth是配合RES ...

  9. SDUT1574：组合数的计算

    题目描述 给定n组整数(a,b),计算组合数C(a,b)的值.如C(3,1)=3,C(4,2)=6. 输入 第一行为一个整数n,表示有多少组测试数据.(n <= 100000) 第2-n+1行, ...

  10. PHP程序执行时间过长,超时了怎么办

    解决办法:修改php.ini文件,把最大的执行时间改为0,0表示不限制时间. max_execution_time = 0