markdown编辑器之editormd使用整合

务必引入 editormd/css/editormd.css 和 editormd/editormd.js两个文件。

1.页面textarea样式

<div id="test-editor"><textarea id="inp-content" style="display:none;">这是我首次使用</textarea>
</div>

2.js调用代码

<script>$(function() {
var editor = editormd("test-editor", {height:'350px',syncScrolling : "single",emoji:true,//启动本地图片上传功能imageUpload: true,watch:true,imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp","zip","rar"],path   : "./editormd/lib/",imageUploadURL : "./upload.php", //文件提交请求路径saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单previewTheme : "dark",//预览主题样式 黑色});
})
</script>

3.详细配置，方法

{width: "90%",height: 740,path : '../lib/',theme : "dark",previewTheme : "dark",editorTheme : "pastel-on-dark",markdown : md,codeFold : true,//syncScrolling : false,saveHTMLToTextarea : true,    // 保存 HTML 到 TextareasearchReplace : true,//watch : false,                // 关闭实时预览htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启//toolbar  : false,             //关闭工具栏//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启emoji : true,taskList : true,tocm            : true,         // Using [TOCM]tex : true,                   // 开启科学公式TeX语言支持，默认关闭flowChart : true,             // 开启流程图支持，默认关闭sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fffimageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "./php/upload.php",onload : function() {console.log('onload', this);//this.fullscreen();//this.unwatch();//this.watch().fullscreen();//this.setMarkdown("#PHP");//this.width("100%");//this.height(480);//this.resize("100%", 640);}
}调用方法：
testEditor.gotoLine(90);//转到第90行testEditor.show();//显示编辑器testEditor.hide();//隐藏编辑器alert(testEditor.getMarkdown());//获取编辑器内容（不含html）alert(testEditor.getHTML());//获取编辑器html内容testEditor.watch();//开启双窗口对比testEditor.unwatch();//取消双窗口对比testEditor.previewing();//预览效果testEditor.fullscreen();//全屏（按ESC取消）testEditor.showToolbar();//显示工具栏testEditor.hideToolbar();//隐藏工具栏testEditor.config({tocDropdown   : true,tocTitle      : "目录 Table of Contents",
});//TOC下拉菜单testEditor.config("tocDropdown", false);//TOC默认

4.前台展示editormd数据

引入css

<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><!-- 引入editormd样式文件 --><link rel="stylesheet" href="./editormd/css/editormd.css" ><link href="./editormd/css/sons-of-obsidian.css" rel="stylesheet" type="text/css" /><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

页面展示

<div id="test-editormd-view" style="width:700px;" class="blog-single-desc"><textarea style="display:none;" id="test-editormd-markdown-doc"><?php echo $data==''? '## 还没有数据哦！':$data;?></textarea>
</div>

js处理

<script src="./editormd/lib/marked.min.js"></script><!-- 第三方界面样式文件google --><script src="./editormd/lib/google-code-prettify/prettify.js"></script><script src="./editormd/lib/raphael.min.js"></script><script src="./editormd/lib/underscore.min.js"></script><script src="./editormd/lib/sequence-diagram.min.js"></script><script src="./editormd/lib/flowchart.min.js"></script><script src="./editormd/editormd.js"></script><script>$(function() {editormd.markdownToHTML("test-editormd-view", {htmlDecode: "style,script,iframe", // you can filter tags decodeemoji: true,taskList: true,tex: true, // 默认不解析flowChart: false, // 默认不解析sequenceDiagram: true, // 默认不解析path: "./editormd/lib/",previewTheme: "dark"});});</script>

markdown编辑器之editormd使用整合相关推荐

拒绝选择恐惧症！国内好用的Markdown编辑器之有道云笔记
拒绝选择恐惧症!国内好用的Markdown编辑器之有道云笔记什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程序员群体所用,目前它已是全球最大的技术分享网站 GitHub ...
CSDN Markdown编辑器之emoji表情
CSDN Markdown编辑器是有彩蛋
Cmd Markdown 编辑阅读器
欢迎使用 Cmd Markdown 编辑阅读器我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...
7 款优秀 Markdown 编辑工具推荐
解决作者编辑们的焦虑:7 款优秀 Markdown 编辑工具推荐什么是 Markdown?简单地说,它就是一种语法,一门适合用于写作的简单语言.用过 Markdown 的人都知道,它的高效在于能有效 ...
Markdown 编辑阅读器
border="0" width="330" height="86" src="//music.163.com/outchain/ ...
Cmd Markdown 编辑阅读器使用教程
欢迎使用 Cmd Markdown 编辑阅读器我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...
Markdown 编辑阅读器使用方法
欢迎使用 Cmd Markdown 编辑阅读器我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...
作业部落 Cmd Markdown 编辑阅读器
Cmd Markdown 编辑阅读器 Cmd Markdown 编辑阅读器 WindowsMacLinux 全平台客户端什么是 Markdown 书写一个质能守恒公式1 高亮一段代码2 高效绘制流 ...
欢迎使用 Cmd Markdown 编辑阅读器
欢迎使用 Cmd Markdown 编辑阅读器我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...

markdown编辑器之editormd使用整合

务必引入 editormd/css/editormd.css 和 editormd/editormd.js两个文件。

1.页面textarea样式

2.js调用代码

3.详细配置，方法

4.前台展示editormd数据

markdown编辑器之editormd使用整合相关推荐

最新文章

热门文章