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. googlr 黄金法则 监控

    googlr   黄金法则  监控

  2. Java 代码实现Http 的GET和POST 请求

    先来个传统的,不过这个里面有些类已经标明 deprecated,所以之后还有更好的方法,起码没有被标明 deprecated的类和方法. 前两个方法是有deprecated的情况.后面用HttpURL ...

  3. 搭建wordpress

    https://www.themepark.com.cn/xcjxgwordpressdzdyglyd.html

  4. Flask的配置与路由

    配置管理 flask中的配置文件是一个flask.config.Config对象(继承字典),默认配置为:    {        'DEBUG':                    get_de ...

  5. python爬虫系列（2）—— requests和BeautifulSoup

    本文主要介绍python爬虫的两大利器:requests和BeautifulSoup库的基本用法. 1. 安装requests和BeautifulSoup库 可以通过3种方式安装: easy_inst ...

  6. 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

  7. （0）linux下的Mysql安装与基本使用（编译安装）

    一.大致操作步骤 环境介绍: OS:center OS6.5 mysql:5.6版本 1.关闭防火墙 查看防火墙状态:service iptables status 这样就意味着没有关闭. 运行以下命 ...

  8. POJO，简单的Java对象

    POJO = "Plain Ordinary Java Object",简单的Java对象,是为了避免和EJB混淆所创造的简称,是MartinFowler等发明的一个术语,用来表示 ...

  9. Java栈之链式栈存储结构实现

    一.链栈 采用单链表来保存栈中所有元素,这种链式结构的栈称为链栈. 二.栈的链式存储结构实现 package com.ietree.basic.datastructure.stack; /** * 链 ...

  10. 20165324 《Java程序设计》 第六周

    学号 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第八章 常用实用类 String类 构造String对象:常量对象:String对象:引用String常 ...