集成editormd支持markdown语法（二）之页面显示及回显

一、显示markdown内容

引入css和js

<link rel="stylesheet" href="${ctx}/editormd/css/editormd.preview2.css" />
<link rel="stylesheet" href="${ctx}/editormd/css/editormd3.css" /><script src="${ctx}/editormd/lib/marked.min.js"></script>
<script src="${ctx}/editormd/lib/prettify.min.js"></script>
<script src="${ctx}/editormd/lib/editormd.min.js"></script>

给显示内容的div加个id

<div  id="content-text">${cont.content}</div>

最后调用js将markdown转为html显示

<script language=javascript>editormd.markdownToHTML("content-text_"+id);
</script>

如果后台传来的是个list集合，如：

request.setAttribute("list", JSON.toJSONString( endPage.getResult() )  );

则要给每个div都赋值不同的id，如：

<div  id="content-text_${cont.id}">${cont.content}</div>

然后给每个div的markdown转为html显示

$(function () {var clist = ${list};$(clist).each(function () {var id = this.ideditormd.markdownToHTML("content-text_"+id);})

二、回显

当编辑的时候需要回显内容，发现已经没有了样式

我采用的是比较笨的一种方法，将md格式和html格式的数据都保存一份，它们相互转换的方法没找到合适的

上一节在显示编辑器的时候说过两个文本域，一个是md格式的一个是html格式的

    <div class=" editormd"  id="test-editormd"><textarea class="editormd-markdown-textarea" id="editormd" name="test-editormd-markdown-doc">${cont.editormd}</textarea><!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 --><textarea class="editormd-html-textarea" id="content" name="content"></textarea></div>

再创建一个隐藏域用于接收md格式的值，或者后台直接用name="test-editormd-markdown-doc"进行接收（没试）

<input type="hidden" name="editormd" id="editormdVal"/>

然后js获取md格式的值赋值给隐藏域

 var editormd2=$("#editormd").val();$("#editormdVal").val(editormd2)

然后编辑的时候用EL表达式（${cont.editormd}）直接回显md格式的内容即可

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源

集成editormd支持markdown语法（二）之页面显示及回显相关推荐

如何用Vue实现简易的富文本编辑器，并支持Markdown语法
前端开发经常会用到富文本编辑器,比如CKEditor,动不动一个库几十M的代码量,其中涉及许多你可能用不到的功能特性和相关设置,CKEditor最新版本的代码仓库就有接近2000个JS文件,300,0 ...
OneNote安装onemark支持markdown语法
OneNote安装onemark支持markdown语法一.标题用 # 号一个两个三个四个五个六个用 = 和 -(然而这两个都不支持,只支持#) 这是====== === 这是- 二 ...
wiki php markdown,一款支持Markdown语法的Wiki知识管理系统：Wikitten搭建教程
简介 Wikitten是一款开源Wiki知识管理系统,使用PHP开发,支持Markdown语法,无需数据库,自动生成树形目录,适合用来做个人Wiki知识库. 截图安装环境要求:PHP >= ...
一款美观实用的在线文档编辑系统，支持Markdown语法
说明:最近博主对文档程序小有需求,找了很久发现都是单页,而且还不支持移动端,不是很理想,所以就专门花了半天时间,写了一个,该文档程序基于graphql.nuxtjs.mongodb.keystonej ...
activiti高亮显示图片_第 09 篇：让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到HelloGitHub-Team 仓库[1] 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法 ...
markdown引入代码_第 09 篇：让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到HelloGitHub-Team 仓库[1] 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法 ...
Django博客--5.让博客支持 Markdown 语法和代码高亮
文章目录 0.前言 1.安装 Python Markdown 2.在 detail 视图中解析 Markdown 3.safe 标签 4.代码高亮 5.效果展示 0.前言 Markdown 是一种 H ...
印象笔记（evernote）支持MarkDown语法
2018.12.26 重大更新 Windows 6.16.6 版本已经开始支持 Markdown 了,更新说明如下: Windows 6.16.6 版本发版说明说明:印象笔记 6.16.6.475 ...
JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器
知识回顾 springmvc框架用户请求url到DispatcherServlet前端控制器,相当于中央调度器,降低系统各组件之间的耦合度. DispatcherServlet前端控制器通过Hand ...
Markdown语法(二)——链接代码块
前言:继上一篇简单的阐述标题和分割线后,笔者一直在排版美观的路上努力.这篇文章介绍下如何在文章中插入一些其他的元素:图片.链接.代码块. 链接我们都希望在网页上显示一个网址时,它可以被直接点击而 ...

集成editormd支持markdown语法（二）之页面显示及回显

一、显示markdown内容

二、回显

关注我的微信公众号获取更多资源

集成editormd支持markdown语法（二）之页面显示及回显相关推荐

最新文章

热门文章