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. DRF的版本、认证、权限

    DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们项目越来越更新~版本就越来越多~~我们不可能新的版本出了~ ...

  2. mmu介绍

    arm exynos4412平台mmu配置以及的简单创建． 1.mmu的全称是Memory Management Unit(内存管理单元) 2.mmu所在位置．mmu再arm核心．他不是一个外设,他是 ...

  3. MySQL DBA的修炼与未来（参考篇）

    转自:https://blog.csdn.net/xielingshao/article/details/77840101 MySQL DBA的修炼与未来 随着MySQL地位爆炸式的提升, MySQL ...

  4. spring MVC学习（一）---前端控制器

    1.spring MVC中的前段控制器就是DsipatcherServlet,它在spring MVC框架中的结构图如下: 2.DispatcherServlet其实就是一个Servlet,它继承了H ...

  5. 创建Java不可变型的枚举类型Gender

    创建Java不可变型的枚举类型,其实例如下: // 创建不可变型的枚举类 enum Gender { // 此处的枚举值必须调用对应的构造器来创建 MALE("男"), FEMAL ...

  6. C++学习笔记--名称空间

    名称空间是为了更好的控制名称的作用域,以管理不同的类库,避免发生冲突. 1.创建名称空间 如下,使用namespace关键字创建了pers和debts两个名称空间. #ifndef NAMESP_H_ ...

  7. git pull和git merge区别&&Git冲突：commit your changes or stash them before you can merge. 解决办法

    http://blog.csdn.net/sidely/article/details/40143441 原文: http://www.tech126.com/git-fetch-pull/ Git中 ...

  8. PL/SQL编程—存储过程

    SQL> create or replace procedure sp_pro3(name_in varchar2,id_in varchar2) is begin update mytest ...

  9. 4-es6的模块化编程

    诞生背景其他都是第三方库,只有es才是官方正宗的,如果es早就制定的话,也不至于现在的这么百花齐放(混乱)的局面了 核心规范一个文件就是一个模块export是暴露出模块的公开方法import是导入 实 ...

  10. html-4, form 表单 输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入

    <!-- form HTTP协议 action:提交的服务器网址 method:get(默认)| post(应用:登录注册.上传文件) 页面中的a img link 默认是get请求 input ...