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. 在nginx启动后，如果我们要操作nginx，要怎么做呢 别增加无谓的上下文切换 异步非阻塞的方式来处理请求 worker的个数为cpu的核数 红黑树

    nginx平台初探(100%) — Nginx开发从入门到精通 http://ten 众所周知,nginx性能高,而nginx的高性能与其架构是分不开的.那么nginx究竟是怎么样的呢?这一节我们先来 ...

  2. /dev/poll, kqueue(2), event ports, POSIX select(2), Windows select(), poll(2), and epoll(4)

    /dev/poll, kqueue(2), event ports, POSIX select(2), Windows select(), poll(2), and epoll(4) libevent ...

  3. 剑指Offer——不用加减乘除做加法

    题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 分析: "^"是不带进位的加法. "&"可以得到所有进位位组 ...

  4. 剑指Offer——二叉搜索树与双向链表

    题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 分析: 二叉搜索树,中序遍历就是排序的. 所以我们利用中序遍历,将前后两 ...

  5. Elven Postman---hdu5444（二叉树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5444  有一个序列,由这个序列可以画出一颗二叉树(每个节点的左边(W)都比它大,右边(E)都比它小), ...

  6. java_基础——用代码编译.java文件+加载class文件

    [本文介绍] 本文不是深入理解和使用java编译器,只是在代码里编译.java文件的helloWorld.这种技术还是蛮有意思的,说不定在将来的某些只能化项目会运用到!^_^ [简单编译的流程] [j ...

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

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

  8. phpcms 添加稿件到栏目 add_content

    private $db; private $content_model; public function __construct() { parent::__construct (); $this-& ...

  9. CentOS 6下OpenCV的安装与配置

    自己按照网上的教程一步一步来的 http://www.jb51.net/os/RedHat/280309.html 虚拟机环境 CentOS 6.5 内核版本:4.1.14 64位 gcc,gcc 4 ...

  10. SDUT1607:Number Sequence(矩阵快速幂）

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1607 题目描述 A number seq ...