editor.md国产markdown编辑器使用实例
插件名:editor.md
下载地址:https://pandao.github.io/editor.md/examples/index.html
适用版本:version v1.5.0
日期:2016年11月
需要引入:jquery.min.js
插件目录结构:
注释:红色箭头标注关键目录
前端引用css:
<link rel="stylesheet" href="css/editormd.css" />
html文本框设置:
<div id="test-editormd"><textarea name="content" style="display:none;"></textarea>
</div>
前端引用js:
<script src="editormd.js"></script>
引用代码片段:
var testEditor;$(function() {$.get("examples/test.md", function(md){testEditor = editormd("test-editormd", {width: "98%",height: 730,path : 'lib/',markdown : md,codeFold : true,saveHTMLToTextarea : true,searchReplace : true,htmlDecode : "style,script,iframe|on*",emoji : true,taskList : true,tocm : true, // Using [TOCM]tex : true, // 开启科学公式TeX语言支持,默认关闭flowChart : true, // 开启流程图支持,默认关闭sequenceDiagram : true, // 开启时序/序列图支持,默认关闭,imageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "examples/php/upload.php",onload : function() {console.log('onload', this);}});});
})
注意:要放在本地环境里尝试不然没有效果哦!另外推荐一个源码站点,原创源码库,大家可以看看。推荐!
读取markdown显示引入css文件:
<link rel="stylesheet" href="css/editormd.css" />
读取markdown显示html实例:
<div id="wordsView"><textarea style="display:none;" name="editormd-markdown-doc">这里写入md格式内容</textarea>
</div>
读取markdown显示前端js调用
<script src="lib/marked.min.js"></script>
<script src="lib/prettify.min.js"></script>
<script src="lib/raphael.min.js"></script>
<script src="lib/underscore.min.js"></script>
<script src="lib/sequence-diagram.min.js"></script>
<script src="lib/flowchart.min.js"></script>
<script src="lib/jquery.flowchart.min.js"></script>
<script src="editormd.js"></script>
<script type="text/javascript">$(document).ready(function() {var wordsView;wordsView = editormd.markdownToHTML("wordsView", {htmlDecode : "style,script,iframe", // you can filter tags decodeemoji : true,taskList : true,tex : true, // 默认不解析flowChart : true, // 默认不解析sequenceDiagram : true, // 默认不解析});})</script>
editor.md国产markdown编辑器使用实例相关推荐
- SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录 一.技术选型及分支部署 二.集成手册 2 ...
- editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
- Editor.md 的Markdown 编辑器集成与使用(全)
在这之前使用的编辑器是ueditor,是百度的:现在记录一下已经集成有段时间的 Editor.md 的 md 编辑器,确实好用! 在这之前,有个问题,数据库是保存 md 的还是保存 html 的,在网 ...
- Editor.md开源在线编辑器(页面插件集成—markdown)
页面插件集成-markdown 我想或许是个人博客主的福音了,通过引入markdown到博客内容管理区,非常有效且快速. 为了便以理解,这边利用个人html文件进行描述,如有不懂得地方,请提出 获取编 ...
- Django集成Markdown编辑器【附源码】
专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m ...
- SpringBoot集成Editor.md 流程详细
接上一篇:SpringBoot整合Editor.md实现Markdown编辑器 https://blog.csdn.net/weixin_40816738/article/details/103160 ...
- Vue + editor.Md 双向数据绑定Markdown编辑器(vue-editormd-wrap)
Vue + editor.Md 双向数据绑定组件(vue-editormd-wrap) 先贴上组件的npm主页和源码,如果有下载了开发过程中build版本的用户,将无法使用,请更新为最新版就可以正常使 ...
- markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发 需求 经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
- Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
最新文章
- 老生常谈--GetROProperty,GetTOProperty,SetTOProperty的区别
- Taro -- 微信小程序登录
- 数据可视化(一)-Matplotlib简易入门
- 菜鸟启动“快递包装换鸡蛋”活动 史上最低碳的一届“双11”来了
- 使用getGenericSuperclass()和getActualTypeArguments()将DAO做成泛型
- Windows核心编程_更改当前工作目录
- ORACLE数据库异步IO介绍
- 概率论 - 常见分布(及其分布表)
- vue中使用海康插件实现视频监控-前端给视频画面中添加文字
- 分布式事务 - 两阶段提交与三阶段提交
- ioncube加密与解密 php代码
- php正则表达式工具,正则表达式语法教程(含在线测试工具)
- Ubuntu下使用OpenCV显示中文
- SQLI DUMB SERIES-2
- 赶紧学会!开发者愚人节怎么写代码。。。
- C. 实验7_3_奇数偶数
- 多地推广应用电子劳动合同,君子签赋能人力资源管理数字化
- 高桥盾react和boost_热门对比丨React pk Boost,你更偏向哪一双?
- 数字图像隐写术之JPEG 隐写分析
- [012量化交易] python 最高价 最低价