Editormd的使用——在线编辑和查看文章

Editormd的使用——在线编辑和查看文章使用Editormd可以方便地在界面上嵌入markdown编辑器,并能够实时预览。先看一下实现效果:编辑文章界面:展示文章界面:用法:首先,到https://pandao.github.io/editor.md/下载Editormd的压缩包,解压到自己的静态资源文件夹下。第二步,引入必要的文件: <linkrel=”stylesheet”href=”/resource/assets/editormd/css/editormd.css”/><linkrel=

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

使用Editormd可以方便地在界面上嵌入markdown编辑器,并能够实时预览。
先看一下实现效果:
编辑文章界面:
在这里插入图片描述展示文章界面:
在这里插入图片描述
用法:

首先,到https://pandao.github.io/editor.md/下载Editormd的压缩包,解压到自己的静态资源文件夹下。
在这里插入图片描述 第二步,引入必要的文件:

	<link rel="stylesheet" href="/resource/assets/editormd/css/editormd.css"/>
    <link rel="stylesheet" href="/resource/assets/editormd/css/editormd.min.css"/>
    <script src="/resource/assets/js/jquery.min.js"></script>
    <script src="/resource/assets/editormd/editormd.min.js"></script>

Jetbrains全家桶1年46,售后保障稳定

注意:jquery文件必须要在editormd之前引入,否则会报editormd is undefined/zepto is undefined的错误

第三步,在html中添加如下代码:

<div id="my-editormd">
	<!-- 书写与实时显示的textarea -->
	<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"><%=content%></textarea>
	<!-- 用于后端获取md稳当内容,Java中:request.getParameter("my-editormd-html-code")-->
	<textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>

JavaScript代码如下所示:

 var editor;
    $(function() { 
   
        editor = editormd("my-editormd", { 
   //注意1:这里的就是上面的DIV的id属性值
            width   : "96%",
            height  : 600,
            syncScrolling : "single",
            path    : "/resource/assets/editormd/lib/",//注意2:你的路径
            saveHTMLToTextarea : true,//注意3:这个配置,方便post提交表单
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
            imageUploadURL : "/admin/uploadFile" //你的controller里为上传图片所设计的路径
        });
    });
// 通过editor.getMarkdown()可以获取到你所写的文章内容。可以使用encodeURIComponent()方法将文章内容编码后存储。
// 编码后的内容可以在后端调用URLDecoder.decode(content, "UTF-8")来解码
// var blogContent = encodeURIComponent(editor.getMarkdown())
// article.content = blogConent;
...

详细代码可以看https://github.com/FuGaZn/SpringBlog/blob/master/src/main/webapp/WEB-INF/views/admin/editArticle.jsp
实现图片上传功能的Controller下方法如下所示:

	@RequestMapping(value = "/admin/uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public String uploadFile(HttpServletRequest request, HttpServletResponse response,
                                 @RequestParam(value = "editormd-image-file", required = false) MultipartFile attach){ 
   
        JSONObject jsonObject=new JSONObject();

        try { 
   
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            String rootPath = request.getSession().getServletContext().getRealPath("/resource/img");

            System.out.println("editormd上传图片:"+rootPath);

            /** * 文件路径不存在则需要创建文件路径 */
            File filePath = new File(rootPath);
            if (!filePath.exists()) { 
   
                filePath.mkdirs();
            }

            // 最终文件名
            File realFile = new File(rootPath + File.separator + attach.getOriginalFilename());
            Files.copy(attach.getInputStream(),realFile.toPath());
            //FileUtils.copyInputStreamToFile(attach.getInputStream(), realFile);

            // 下面response返回的json格式是editor.md所限制的,规范输出就OK
            jsonObject.put("success", 1);
            jsonObject.put("message", "上传成功");
            jsonObject.put("url", "/resource/img/"+attach.getOriginalFilename());
        } catch (Exception e) { 
   
            jsonObject.put("success", 0);
        }
        return jsonObject.toString();
    }

注意:SpringMVC项目需要在配置文件或配置类中引入对MultipartFile的支持
java配置类的写法:

    @Bean(name = "multipartResolver") // bean必须写name属性且必须为multipartResolver
    protected CommonsMultipartResolver multipartResolver() { 
   
        CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
        commonsMultipartResolver.setMaxUploadSize(5 * 1024 * 1024);
        commonsMultipartResolver.setMaxInMemorySize(0);
        commonsMultipartResolver.setDefaultEncoding("UTF-8");
        return commonsMultipartResolver;
    }

上面步骤完成后,就可以在页面中在线编辑文件并上传图片了。
接下来让我们看看如何把数据库编码后的md内容转换成html显示在页面上。
首先引入以下文件:

	<link rel="stylesheet" href="/resource/assets/editormd/css/editormd.min.css"/>
    <link rel="stylesheet" href="/resource/assets/editormd/css/editormd.css"/>
    <script src="/resource/assets/js/jquery.min.js"></script>
    <script src="/resource/assets/editormd/editormd.min.js"></script>

    <script src="/resource/assets/editormd/lib/marked.min.js"></script>
    <script src="/resource/assets/editormd/lib/prettify.min.js"></script>
    <script src="/resource/assets/editormd/lib/raphael.min.js"></script>
    <script src="/resource/assets/editormd/lib/underscore.min.js"></script>
    <script src="/resource/assets/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/resource/assets/editormd/lib/flowchart.min.js"></script>
    <script src="/resource/assets/editormd/lib/jquery.flowchart.min.js"></script>

在html中添加如下内容:

<div id="test-editormd" style="width: 90%;padding-left: 5%" >
	<textarea style="display: none" name="test-editormd-markdown-doc"><%=content%></textarea>
</div>

在JavaScript中引入如下内容:

	var testEditor;
    $(function () { 
   
        testEditor = editormd.markdownToHTML("test-editormd", { 
   
            htmlDecode :"style, script, iframe",
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    })

然后皆可以看到转换为html后的文章内容啦

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234752.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号