markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器
1、下载editor.md插件
git地址:https://github.com/pandao/editor.md.git
npm安装:npm install editor.md
官网:https://pandao.github.io/editor.md/
2、实现一个简单的markdown
注意事项:
1、注意css和js引用的路径,引用错误就不可以使用。
2、一定要先引用jquery,然后在引用editor.md的js代码,因为editor是依赖于jquery的。
3、editormd需要初始化。
<!--引入 editormd css核心类-->
<link rel="stylesheet" href="/markdown/css/editormd.min.css" />
<div id="markdown">
<textarea style="display: none;" name="markdown-doc" id="markdown-doc"> ### Hello Editor.md !</textarea>
</div>
<!--引入jq核心类-->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!--引入 editormd js核心类-->
<script src="/markdown/editormd.min.js" ></script>
<script>
$(function() {
var editor = editormd("markdown", {
width : "100%",
height : "600px",
placeholder : "请输入要发布的内容...",
htmlDecode : true,
htmlDecode : "style,script,iframe",
path : "/markdown/lib/",
//黑色背景
previewTheme : "dark",
});
});
</script>
页面展示
初始化的参数
<script>
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "100%",
height : "600px",
path : '../lib/',
placeholder : "请输入要发布的内容...",
htmlDecode : true,
htmlDecode : "style,script,iframe",
path : "/markdown/lib/",
//黑色背景
previewTheme : "dark",
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
//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", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
imageUpload : 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默认 });
</script>