editor.md api文档 markdown编辑器搭建教程

发布时间:2022-01-16 02:48:36 作者:路人甲 阅读(113)

网上的html编辑器种类繁多,目前百度富文本编辑器是 比较多人使用的编辑器,但是部署后发现代码臃肿不堪,很多逻辑写了好几套出来,觉得还是使用markdown编辑器比较合理,

目前叶新东博客的编辑器也是用editor.md搭建的
官网地址:http://pandao.github.io/editor.md/examples/

一、下载插件

项目地址:http://pandao.github.io/editor.md/
下载安装包后放在相应的目录中并引用

  1. <!-- 依赖jquery-->
  2. <link rel="stylesheet" href="lib/js/editor.md-master/css/editormd.css" />
  3. <script type="text/javascript" src="lib/js/jquery.min.js"></script>
  4. <script src="lib/js/editor.md-master/editormd.min.js"></script>
  5. <!-- 需要这三个文件,自己对应好目录哦-->

二、在页面上添加id

  1. <div id="test-editormd">
  2. <textarea />
  3. </div>

三、js代码

主要就是说这个就是代码,记得make一下

  1. var testEditor;
  2. testEditor = editormd("test-editormd", {
  3. placeholder:'本编辑器支持Markdown编辑,左边编写,右边预览', //默认显示的文字,这里就不解释了
  4. width: "90%", //宽度
  5. height: 640, //高度
  6. syncScrolling: "single",
  7. path: "lib/js/editor.md-master/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置)
  8. theme: "dark",//工具栏主题
  9. previewTheme: "dark",//预览主题
  10. editorTheme: "pastel-on-dark",//编辑主题
  11. watch : true,//是否显示预览窗口
  12. emoji: true, //是否启用emoji表情,默认false
  13. taskList: true,
  14. tocm: true, // Using [TOCM]
  15. tex: true, // 开启科学公式TeX语言支持,默认关闭
  16. flowChart: true, // 开启流程图支持,默认关闭
  17. sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
  18. toolbar:true,//显示工具栏
  19. readOnly:true,//开启只读
  20. onchange : function() {},//编辑器内容改变事件
  21. toolbarIcons : function() { //自定义工具栏
  22. return [
  23. // "undo", //撤回
  24. // "redo", //重做
  25. "bold", //粗体
  26. "hr", //横线
  27. // "del", //删除线
  28. "italic",//斜体
  29. "quote",//引用
  30. // "ucwords",//首字母转大写
  31. // "uppercase",//字母转大写
  32. // "lowercase", //字母转小写
  33. "|",
  34. "h1",//字体标题大小
  35. "h2",//字体标题大小
  36. "h3",//字体标题大小
  37. "h4",//字体标题大小
  38. "h5",//字体标题大小
  39. "h6",//字体标题大小
  40. "|",
  41. "list-ul",//无序列表
  42. "list-ol",//有序列表
  43. "link",//链接
  44. // "reference-link",//引用链接
  45. "image",//添加图片
  46. "code",//行内代码
  47. // "preformatted-text",//代码块预览格式文本(缩进风格)
  48. "code-block",//代码块预览格式文本(多语言风格)
  49. "table",//插入表格
  50. "datetime",//日期时间
  51. "emoji",//emoji 表情
  52. // "html-entities",//HTML实体字符--特殊字符
  53. "pagebreak",//插入分页符
  54. "|",
  55. // "preview",//全窗口预览HTML(按 Shift + ESC还原)
  56. "watch",//实时预览
  57. "|",
  58. // "fullscreen", //全屏
  59. "clear", //清空
  60. // "search", //搜索
  61. "help", //使用帮助
  62. "info", //关于
  63. ]
  64. },
  65. });
  66. //上面的挑有用的写上去就行

其他用法

  1. // 定位到第90行
  2. $("#goto-line-btn").bind("click", function(){
  3. testEditor.gotoLine(90);
  4. });
  5. // 显示编辑器
  6. $("#show-btn").bind('click', function(){
  7. testEditor.show();
  8. });
  9. // 因此编辑器
  10. $("#hide-btn").bind('click', function(){
  11. testEditor.hide();
  12. });
  13. // 获取markdown源码
  14. $("#get-md-btn").bind('click', function(){
  15. alert(testEditor.getMarkdown());
  16. });
  17. // 获取渲染后的html内容
  18. $("#get-html-btn").bind('click', function() {
  19. alert(testEditor.getHTML());
  20. });
  21. // 查看预览
  22. $("#watch-btn").bind('click', function() {
  23. testEditor.watch();
  24. });
  25. // 取消预览
  26. $("#unwatch-btn").bind('click', function() {
  27. testEditor.unwatch();
  28. });
  29. // 只看预览
  30. $("#preview-btn").bind('click', function() {
  31. testEditor.previewing();
  32. });
  33. // 编辑器全屏
  34. $("#fullscreen-btn").bind('click', function() {
  35. testEditor.fullscreen();
  36. });
  37. // 显示菜单栏
  38. $("#show-toolbar-btn").bind('click', function() {
  39. testEditor.showToolbar();
  40. });
  41. // 关闭菜单栏
  42. $("#close-toolbar-btn").bind('click', function() {
  43. testEditor.hideToolbar();
  44. });
  45. // 回到指定标题
  46. $("#toc-menu-btn").click(function(){
  47. testEditor.config({
  48. tocDropdown : true,
  49. tocTitle : "目录 Table of Contents",
  50. });
  51. });
  52. // 回到顶部
  53. $("#toc-default-btn").click(function() {
  54. testEditor.config("tocDropdown", false);
  55. });

关键字前端