精华内容
下载资源
问答
  • 一、富文本编辑器介绍 什么是富文本编辑器? 我们平时在博客园,或者CSDN等平台进行写作的时候,他们的编辑器就是富文本编辑器。 其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器。这个文章有很多...

    Editor.md入门

    一、富文本编辑器介绍

    什么是富文本编辑器?
    我们平时在博客园,或者CSDN等平台进行写作的时候,他们的编辑器就是富文本编辑器。在这里插入图片描述
    其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器。这个文章有很多介绍https://blog.csdn.net/davidhzq/article/details/100815332想了解的小伙伴可以看一下这里就不一一列举了。
    下面进入我们的主题Editor.md

    二、Editor.md介绍

    Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费

    官网:https://pandao.github.io/editor.md/
    在这里插入图片描述
    我们在官网下载它的压缩包,解压以后,在examples目录下面,可以看到他的很多案例使用。
    然后我们删除多余的文件,把有用的导入项目中。
    在这里插入图片描述
    将多余的文件删除,把文件名改为md(这个随便什么都可以),导入项目中

    三、搭建springboot项目

    1、数据库设计

    article:文章表
    在这里插入图片描述

    CREATE TABLE `article` (
    `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'int文章的唯一ID',
    `author` varchar(50) NOT NULL COMMENT '作者',
    `title` varchar(100) NOT NULL COMMENT '标题',
    `content` longtext NOT NULL COMMENT '文章的内容',
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8
    

    2.创建项目导入web模块

    在这里插入图片描述
    在这里插入图片描述

    3、导入相关依赖

    <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.66</version>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.16.10</version>
            </dependency>
            <!--MySQL驱动-->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.49</version>
            </dependency>
            <!--数据源druid-->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid</artifactId>
                <version>1.1.12</version>
            </dependency>
            <!---->
            <dependency>
                <groupId>log4j</groupId>
                <artifactId>log4j</artifactId>
                <version>1.2.17</version>
            </dependency>
            <!--mybatis-->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
            <!--thymeleaf xmlns:th="http://www.thymeleaf.org-->
            <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf-spring5</artifactId>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf.extras</groupId>
                <artifactId>thymeleaf-extras-java8time</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
    <resources>
       <resource>
           <directory>src/main/java</directory>
           <includes>
               <include>**/*.xml</include>
           </includes>
           <filtering>true</filtering>
       </resource>
    </resources>
    

    4、编写application.yml配置文件

    这里做了三件事 连接数据库、设置数据源、整合mybatis

    spring:
      datasource:
        username: root
        password: x5
        #?serverTimezone=UTC解决时区的报错
        url: jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
        driver-class-name: com.mysql.jdbc.Driver
        type: com.alibaba.druid.pool.DruidDataSource
    
        #Spring Boot 默认是不注入这些属性值的,需要自己绑定
        #druid 数据源专有配置
        initialSize: 5
        minIdle: 5
        maxActive: 20
        maxWait: 60000
        timeBetweenEvictionRunsMillis: 60000
        minEvictableIdleTimeMillis: 300000
        validationQuery: SELECT 1 FROM DUAL
        testWhileIdle: true
        testOnBorrow: false
        testOnReturn: false
        poolPreparedStatements: true
    
        #配置监控统计拦截的filters,stat:监控统计、log4j:日志记录、wall:防御sql注入
        #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
        #则导入 log4j 依赖即可,Maven 地址:https://mvnrepository.com/artifact/log4j/log4j
        filters: stat,wall,log4j
        maxPoolPreparedStatementPerConnectionSize: 20
        useGlobalDataSourceStat: true
        connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
    #整合Mybatis
    mybatis:
      type-aliases-package: com.zhao.pojo
      mapper-locations: classpath:mapper/*.xml
    

    5、实体类

    package com.zhao.pojo;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    import java.io.Serializable;
    
    //文章类
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public class Article implements Serializable {
    
       private int id; //文章的唯一ID
       private String author; //作者名
       private String title; //标题
       private String content; //文章的内容
    
    }
    

    6、mapper接口:

    package com.zhao.mapper;
    
    import com.zhao.pojo.Article;
    import org.apache.ibatis.annotations.Mapper;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Mapper
    @Repository
    public interface ArticleMapper {
       //查询所有的文章
       List<Article> queryArticles();
    
       //新增一个文章
       int addArticle(Article article);
    
       //根据文章id查询文章
       Article getArticleById(int id);
    
       //根据文章id删除文章
       int deleteArticleById(int id);
    
    }
    

    在mapper下创建,因为上面配置的是这个路径
    在这里插入图片描述

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.zhao.mapper.ArticleMapper">
    
        <select id="queryArticles" resultType="Article">
          select * from article
       </select>
    
        <select id="getArticleById" resultType="Article">
          select * from article where id = #{id}
       </select>
    
        <insert id="addArticle" parameterType="Article">
          insert into article (author,title,content) values (#{author},#{title},#{content});
       </insert>
    
        <delete id="deleteArticleById" parameterType="int">
          delete from article where id = #{id}
       </delete>
    
    </mapper>
    

    测试一样搭建的环境是否有问题,没有问题我们就开始学习

    四、文章编辑整合(重点)

    1、导入 editor.md 资源

    主要导入红色框里的
    在这里插入图片描述

    2.editor.html编辑页面

    <!DOCTYPE html>
    <html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title>富文本编辑器</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!--Editor.md-->
        <link rel="stylesheet" th:href="@{/md/css/editormd.css}"/>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    
    <body>
    
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <!--博客表单-->
                <form name="mdEditorForm">
                    <div>
                        标题:<input class="layui-input" type="text" name="title">
                    </div>
                    <div>
                        作者:<input class="layui-input" type="text" name="author">
                    </div>
                    <div id="article-content">
                        <textarea name="content" id="content" style=""> </textarea>
                    </div>
                </form>
    
            </div>
        </div>
    </div>
    </body>
    
    <!--editormd-->
    <script th:src="@{/js/jquery-2.1.0.js}"></script>
    <script th:src="@{/md/editormd.js}"></script>
    
    <script type="text/javascript">
        var testEditor;
    
        //window.onload = function(){ }
        $(function() {
            testEditor = editormd("article-content", {
                width : "95%",
                height : "1000px",
                syncScrolling : "single",
                path : "../md/lib/", //使用自己的路径
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                emoji: true,
                theme: "dark",//工具栏主题
                previewTheme: "dark",//预览主题
                editorTheme: "pastel-on-dark",//编辑主题
                tex : true,                   // 开启科学公式TeX语言支持,默认关闭
                flowChart : true,             // 开启流程图支持,默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
                //图片上传
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/article/file/upload", //图片上传路径
                onload : function() {
                    console.log('onload', this);
                },
                /*指定需要显示的功能按钮*/
                toolbarIcons : function() {
                    return ["undo","redo","|",
                        "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                        "h1","h2","h3","h4","h5","h6","|",
                        "list-ul","list-ol","hr","|",
                        "link","reference-link","image","code","preformatted-text",
                        "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                        "goto-line","watch","preview","fullscreen","clear","search","|",
                        "help","info","releaseIcon", "index"]
                },
    
                /*自定义功能按钮,下面我自定义了2个,一个是发布,一个是返回首页*/
                toolbarIconTexts : {
                    releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                    index : "<span bgcolor=\"red\">返回首页</span>",
                },
    
                /*给自定义按钮指定回调函数*/
                toolbarHandlers:{
                    releaseIcon : function(cm, icon, cursor, selection) {
                        //表单提交
                        mdEditorForm.method = "post";
                        mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                        mdEditorForm.submit();
                    },
                    index : function(){
                        window.location.href = '/article/toEditor';//刷新当前页面
                    },
                }
            });
        });
    </script>
    
    </html>
    

    3、编写Controller,进行跳转,以及保存文章

    package com.zhao.controller;
    
    import com.zhao.mapper.ArticleMapper;
    import com.zhao.pojo.Article;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    
    @Controller
    @RequestMapping("/article")
    public class ArticleController {
    
        @Autowired
        ArticleMapper articleMapper;
    
    
        @GetMapping("/toEditor")
        public String toEditor() {
            return "editor";
        }
        
        @PostMapping("/addArticle")
        public String addArticle(Article article) {
            articleMapper.addArticle(article);
            return "editor";
        }
    }
    

    到这里我们就可以上传文章了
    在这里插入图片描述
    上传成功,数据库如下
    在这里插入图片描述

    五、图片上传问题

    1、页面代码

    在页面中已经写了图片上传的设置,代码如下

    //图片上传
    imageUpload : true,
    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址
    

    2、controller层添加图片上传方法

      //博客图片上传问题
        @RequestMapping("/file/upload")
        @ResponseBody
        public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
            //上传路径保存设置
    
            //获得SpringBoot当前项目的路径:System.getProperty("user.dir")
            String path = System.getProperty("user.dir")+"/upload/";
            System.out.println(path);
            //按照月份进行分类:
            Calendar instance = Calendar.getInstance();
            String month = (instance.get(Calendar.MONTH) + 1)+"月";
            path = path+month;
    
            File realPath = new File(path);
            if (!realPath.exists()){
                realPath.mkdir();
            }
    
            //上传文件地址
            System.out.println("上传文件保存地址:"+realPath);
    
            //解决文件名字问题:我们使用uuid;
            String filename = "ks-"+ UUID.randomUUID().toString().replaceAll("-", "");
            //通过CommonsMultipartFile的方法直接写文件(注意这个时候)
            file.transferTo(new File(realPath +"/"+ filename));
    
            //给editormd进行回调
            JSONObject res = new JSONObject();
            res.put("url","/upload/"+month+"/"+ filename);
            res.put("success", 1);
            res.put("message", "upload success!");
    
            return res;
        }
    

    3、解决文件回显显示的问题

    设置虚拟目录映射!在我们自己拓展的MvcConfig中进行配置即可!

    package com.zhao.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class MyMvcConfig implements WebMvcConfigurer {
    
        // 文件保存在真实目录/upload/下,
        // 访问的时候使用虚路径/upload,比如文件名为1.png,就直接/upload/1.png就ok了。
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/upload/**")
                    .addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
        }
    
    }
    

    这里运行如果报错可能是没有文件夹,手动创建就行。
    在这里插入图片描述

    六、表情包问题

    自己手动下载,emoji 表情包,放到图片路径下:

    修改editormd.js文件

    // Emoji graphics files url path
    editormd.emoji     = {
       path : "../editormd/plugins/emoji-dialog/emoji/",
       ext   : ".png"
    };
    

    七、文章展示

    1、Controller 中增加方法

    @GetMapping("/{id}")
    public String show(@PathVariable("id") int id,Model model){
       Article article = articleMapper.getArticleById(id);
       model.addAttribute("article",article);
       return "article";
    }
    

    2、编写页面 article.html

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title th:text="${article.title}"></title>
    </head>
    <body>
    
    <div>
        <!--文章头部信息:标题,作者,最后更新日期,导航-->
        <h2 style="margin: auto 0" th:text="${article.title}"></h2>
        作者:<span style="" th:text="${article.author}"></span>
        <!--文章主体内容-->
        <div id="doc-content">
            <textarea style="" placeholder="markdown" th:text="${article.content}"></textarea>
        </div>
    
    </div>
    
    <link rel="stylesheet" th:href="@{/md/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-2.1.0.js}"></script>
    <script th:src="@{/md/lib/marked.min.js}"></script>
    <script th:src="@{/md/lib/prettify.min.js}"></script>
    <script th:src="@{/md/lib/raphael.min.js}"></script>
    <script th:src="@{/md/lib/underscore.min.js}"></script>
    <script th:src="@{/md/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/md/lib/flowchart.min.js}"></script>
    <script th:src="@{/md/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/md/editormd.js}"></script>
    
    
    <script type="text/javascript">
        var testEditor;
        $(function () {
            testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true
            });});
    </script>
    </body>
    </html>
    

    现在我们就可从新启动项目进行测试了

    八、整体测试

    1、图片上传

    在这里插入图片描述

    2.编辑文章,显示图片

    在这里插入图片描述
    在这里插入图片描述

    3、文章显示

    在这里插入图片描述

    展开全文
  • 既然要集成,第一步就是找到来源,直接到官方网站下载依赖。...// 引入css样式文件// 引入js等依赖将文本输入框替换为Markdown编辑器初始化Markdown编辑器的jsvar testEditor;$(function () {testEdi...

    既然要集成,第一步就是找到来源,直接到官方网站下载依赖。

    下载之后解压下载文件

    1ccf50bbf256ea4d23d5e8070233de06.png

    要是用的依赖基本就是用红框标注出来的,将需要的依赖丢入自己项目中的resources目录下

    找到文本输入框的html,开始引入依赖。

    // 引入css样式文件

    // 引入js等依赖

    将文本输入框替换为Markdown编辑器

    初始化Markdown编辑器的js

    var testEditor;

    $(function () {

    testEditor = editormd("test-editormd", { // test-editormd为之前定义编辑器所在div的id

    width: "98%",

    height: 300,

    syncScrolling: "single",

    path: "/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置)

    saveHTMLToTextarea: true,

    emoji: true,

    taskList: true,

    tex: true,

    flowChart: true,

    tocm: true,

    sequenceDiagram: true,

    /* 上传图片配置 */

    imageUpload: false,

    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // 上传图片支持格式

    imageUploadURL: "../imageUpload" // 上传图片的路径

    });

    });

    以上集成编辑器就完成了,接下来就是讲取出来的数据展示出来。

    第一步依旧是引入所需依赖

    页面显示的div

    解析的js

    editormd.markdownToHTML("test-editormd", {

    htmlDecode : "style,script,iframe",

    emoji : true,

    taskList : true,

    tex : true, // 默认不解析

    flowChart : true, // 默认不解析

    sequenceDiagram : true // 默认不解析

    });

    到此就完成了Markdown 编辑器Editor.md简单集成。

    展开全文
  • md编辑器使用规范

    2021-01-09 18:10:15
    这里写自定义目录标题_自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定...

    欢迎使用Markdown编辑器

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

    新的改变

    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G
    查找:Ctrl/Command + F
    替换:Ctrl/Command + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    标记文本

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    居中的图片: Alt

    居中并且带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var foo = 'bar';
    

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目Value
    电脑$1600
    手机$12
    导管$1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列第二列第三列
    第一列文本居中第二列文本居右第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPEASCIIHTML
    Single backticks'Isn't this fun?'‘Isn’t this fun?’
    Quotes"Isn't this fun?"“Isn’t this fun?”
    Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to- HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

    Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

    张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no
    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • 通过简单的讲解,快速的上手一个高大上的富文本编辑器。以下简称编辑器,并实现实际开发中最常用的功能: 创建一个富文本编辑器 获取富文本编辑器的内容(存数据库) 设置富文本编辑器的内容(数据库读出来...

    文章简介

    通过简单的讲解,快速的上手一个高大上的富文本编辑器。以下简称编辑器,并实现实际开发中最常用的功能:

    • 创建一个富文本编辑器

    • 获取富文本编辑器的内容(存数据库)

    • 设置富文本编辑器的内容(数据库读出来修改)

    准备工作

    创建一个空的springboot项目,添加thymeleaf依赖。

    <dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

    下载editor.md,这里给出下载地址:

    GitHub 官方地址:https://github.com/pandao/editor.md

    直接点击下载:https://github.com/pandao/editor.md/archive/master.zip

    static目录下面创建一个editor文件夹。解压下载的文件,复制以下文件到editor文件夹下。

    1. css

    2. fonts

    3. images

    4. lib

    5. plugins

    6. editormd.min.js

    然后下载 jQuery,放到 static 目录下面。

    下载地址:http://jquery.com/download/

    创建编辑器

    【第一步】新建一个editormd-create.html。引入相关css:

    <link rel="stylesheet" data-th-href="@{/editor/css/editormd.min.css}">
    

    【第二步】编写<body>中的内容:

    <div id="test-editormd">
    	<textarea style="display:none;"></textarea>
    </div>
    

    【第三步】引入相关 js 文件:

    <script data-th-src="@{/jquery.min.js}"></script>
    <script data-th-src="@{/editor/editormd.min.js}"></script>
    

    【第四步】初始化编辑器:

    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {
            height: 590,
            htmlDecode: true,  // 你可以过滤标签解码
            syncScrolling: "single",
            path: "/admin/editor/lib/",
            saveHTMLToTextarea: true,
    
            emoji: true,
            watch: false,
            codeFold: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
        });
    });
    

    获得编辑器内容

    通过上面的创建编辑器的过程,我们获取编辑器的内容变得格外简单:

    testEditor.getMarkdown();
    

    设置编辑器内容

    【第一步】新建一个editormd-create.html。引入相关css:

    <link rel="stylesheet" data-th-href="@{/editor/css/editormd.preview.min.css}">
    

    【第二步】编写<body>中的内容:

    <div id="test-editormd-view">
    	<textarea name="test-editormd-markdown-doc" th:utext="${article.content}"></textarea>
    </div>
    

    【第三步】引入相关 js 文件:

    <script data-th-src="@{/jquery.min.js}"></script>
    <script data-th-src="@{/editor/lib/marked.min.js}"></script>
    <script data-th-src="@{/editor/lib/prettify.min.js}"></script>
    <script data-th-src="@{/editor/lib/raphael.min.js}"></script>
    <script data-th-src="@{/editor/lib/underscore.min.js}"></script>
    <script data-th-src="@{/editor/lib/sequence-diagram.min.js}"></script>
    <script data-th-src="@{/editor/lib/flowchart.min.js}"></script>
    <script data-th-src="@{/editor/lib/jquery.flowchart.min.js}"></script>
    <script data-th-src="@{/editor/editormd.min.js}"></script>
    

    【第四步】初始化编辑器:

    var testEditormdView;
    $(function () {
        testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            //htmlDecode      : true,       // 开启 HTML 标签解析,为了安全性,默认不开启
            // htmlDecode: "video",  // 你可以过滤标签解码
            //toc             : false,
            tocm: true,    // Using [TOCM]
            tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            //tocDropdown     : true,
            // markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true
        });
    });
    

    生成文章目录

    通过上一步的设置编辑器内容,这里注意初始化时,其中一个参数,tocContainer: "#custom-toc-container" // 自定义 ToC 容器层,这句话制定了生成目录的容器,也就是说,写一个idcustom-toc-containerdiv,即可自动生成文章目录,例如:

    <div class="markdown-body" id="custom-toc-container"></div>
    

    相关链接

    技术分享区

    在这里插入图片描述

    展开全文
  • 相信大家很多人都已经知道了, 最好用最受欢迎的 markdown 编辑器 - Typora, 从 1.0.0 版本已经开始收费, 根据其官网的介绍, 收费方式为买断制, 也就是一次付费永久...
  • 让群晖“文本编辑器”支持更多文件扩展名 让其支持cnf、conf以及md文件用markdown方式打开 #ssh连接后台 cd /volume1/@appstore/TextEditor/ui #备份js cp TextEditor.js TextEditor.js_`date +%Y%m%d` 主要修改了...
  • 于是出现了富文本编辑器以及标记语言Markdown。这两种编辑方法现在正在成为主流。但是他们也存在不同,尤其对于不同的网路人群来说,它们有巨大的差别,使用上还有一些要领。对于希望搭建社区或峰会的站长来说,也...
  • // 编辑器的事件,每次改变会获取其html内容 this.editor.config.onchange = (html) => { this.editorHtml = html; }; // 富文本上传方法 this.editor.config.customUploadImg = (resultFiles, insertImgFn) => { ...
  • 文本编辑器 Editormd 简介 Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费 官网:https://pandao.github.io/editor.md/ 主要特征 支持“标准” Markdown / CommonMark 和 ...
  • 由于我的项目需要进行富文本编辑,于是我使用springboot整合editor.md编辑器 一、下载editor.md 开源在线 Markdown 编辑器 进入下载官网 采用第一种Github下载,点击即可下载压缩包 解压可得到以下文件 示例:...
  • <mavon-editor v-model="value" ref=md @save="save" placeholder="请输入文本" > mavon-editor> 提交el-button> div> template> <script> export default { data(){ return { value: '123', } }, methods:{ save(){...
  • 我们在制作个人的博客系统或类似的项目时,写博客以及将写好的博客展示出来便是...本文将总结mavon-editor插件和marked插件的使用方法,通过vue实现markdown编辑器,以及将markdown文件转换成对应的html,并自定义CSS。
  • 如何使用Markdown编辑器欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左...
  • 获取编辑器得两种途径,进入官网下载zip,压缩到对应位置Editor.md一款开源在线编辑器 第二种途径进入OSCHINA,点击下载并压缩。 为什么这里要说到两种方式,原因是博主关于第一种进入官网会出现网页加载不了的情况...
  • 详细的编辑器api参考:文档。 图片裁剪预览 编辑器预览 1. 基本使用 这里演示两种环境三种写法: 1.1 npm安装用法 这种方式支持两种写法,除了.vue模板写法,还有jsx语法。 安装 yarn add md-editor-v3 .vue...
  • Markdown是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown编写的文档可以导出 HTML、Word、图像、PDF、Epub 等多种格式的文档。 用Markdown编写的文档后缀为 .md, .markdown。 二、...
  • 文本编辑器:Typora(编辑与预览一体化) 资源: 官网: https://www.typora.io/ 官网下载:点击下载 使用教程:https://blog.csdn.net/mus123/article/details/104294246 以上就是关于“ 富文本编辑器:Typora...
  • 文本编辑器

    2021-03-01 12:00:44
    文本编辑器 1.简介 思考:我们平时在博客园,或者CSDN等平台进行写作的时候,有同学思考过他们的编辑器是怎么实现的吗? 在博客园后台的选项设置中,可以看到一个文本编辑器的选项: CuteEditor TinyMCE(推荐) ...
  • 首先,要搞清楚一点,markdown 编辑器与传统的富文本编辑器实际上一点区别都没有!只是可能由于某些原因放到了一个概念,那么是一个什么概念呢? 在传统的富文本时代,我们不需要接触任何的标签,我们只用编辑器自带...
  • 下载安装截取的一部分1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开,并查看源代码);2.lib文件夹中是editor.md所依赖的第三方js资源;3.plugins文件夹中是如emoji表情支持、代码格式化等插件;在...
  • Typora是一款非常好用的Markdown文本编辑器! Typora在文本编辑方面具备类似word一样强大的文本编辑能力,但本身却非常的“轻巧”,正如其官网所言:“Simple, yet Powerful!(简单而强大!)” 一、下载及安装  ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验; 在创作中心设置你喜爱的代码高亮...
  • 其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器,比如: Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费 官网:https://pandao.github.io/editor.md/ ...
  • 其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器,比如: Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费 官网:https://pandao.github.io/editor.md/ ...
  • 文章目录1. 简介2. Editor.md3. 基础工程搭建3.1 数据库设计...其实这个就是富文本编辑器,市面上有许多非常成熟的富文本编辑器,比如: Editor.md——功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免
  • 第一步:安装插件 npm install mavon-editor --save 如果安装了淘宝镜像也可使用 cnpm install mavon-editor --save 安装 第二步:在全局main.js中引入项目 ...第三步:在你需要放置编辑...
  • 最近在写一个个人博客项目,其中用到了一款开源的Markdown文本编辑器——Editor.md,记录一下将其集成到项目中的方法,以及踩的坑。 1. 从官网上下载源码 官网地址:Editor.md - 开源在线 Markdown 编辑器 最新...
  • [markdown](https://www.mdeditor.com/images/logos/markdown.png "markdown")Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。它允许人们使用易读...
  • React 富文本编辑器、简单实用。 语雀文档:https://www.yuque.com/braft-editor/be/lzwpnr 二、Editor.md【推荐】 功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费。 网址:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,660
精华内容 28,664
关键字:

md文档编辑器