Markdown编辑器Editor.md插件的使用

官网：

Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项：

var testEditor;
testEditor = editormd("test-editormd", {placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了width: "90%",height: 640,syncScrolling: "single",  path: "lib/js/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）theme: "dark",//工具栏主题previewTheme: "dark",//预览主题editorTheme: "pastel-on-dark",//编辑主题saveHTMLToTextarea: true,emoji: false,taskList: true, tocm: true,         // Using [TOCM]tex: true,                   // 开启科学公式TeX语言支持，默认关闭flowChart: true,             // 开启流程图支持，默认关闭sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,toolbarIcons : function() {  //自定义工具栏，后面有详细介绍return editormd.toolbarModes['simple']; // full, simple, mini},
});
//上面的挑有用的写上去就行

获取Markdown格式的文本

document.querySelector('.editormd-markdown-textarea').value

获取markdown渲染过的文章

document.querySelector('.markdown-body').textContent,

自定义工具栏

工具栏分为三组，full, simple, mini这三个，可以选择，也可以自由的设置工具栏，自由的设置工具栏在官网中有写，在这里就只介绍3组。

t.toolbarModes={full:["undo","redo","|","bold","del","italic","quote","ucwords","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","link","reference-link","image","code","preformatted-text","code-block","table","datetime","emoji","html-entities","pagebreak","|","goto-line","watch","preview","fullscreen","clear","search","|","help","info"],simple:["undo","redo","|","bold","del","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol","hr","|","watch","preview","fullscreen","|","help","info"],mini:["undo","redo","|","watch","preview","|","help","info"]
}

每一个标签表示一个工具，也可以随意使用上面的标签自定义工具栏，每个标签具体表示的工具官网上没有，所以只能与工具栏对照一下才行了

Markdown编辑器Editor.md插件的使用相关推荐

Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
基于JavaWeb的MarkDown编辑器editor.md的使用
1.简介 editor.md是国内开发的开源项目,单纯基于前端JavaScript,可以实现markdown编辑器的所有功能. 主要特性支持通用 Markdown / CommonMark 和 GF ...
127.0.0.1/dokuwiki/install.php,DokuWiki安装+集成markdown编辑器editor.md
安装安装php和nginx yum install -y php70w php70w-gd php70w-xml php70w-fpm nginx 开机自启动 systemctl enable ng ...
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
使用editor编辑器遇到的小问题：editor.md工具栏置顶
问题原因: 在使用Markdown编辑器editor.md时,由于editor.md的toolbar始终保持在页面顶部,导致我在使用vue整合时,页面排版出现错乱解决方案: 在 editormd.j ...
PHP项目中使用 Markdown编辑器
个人站点 :http://oldchen.iwulai.com/ Markdown在技术圈越来越受欢迎,今天为大家带来一款国内开源的比较好用的Markdown编辑器--editor.md. 在这次项目 ...
editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
Typora收费了？推荐两款Markdown编辑器
大家好,这里是扫地工. 这是一篇迟了两个月的推文,Typora 在11月底时推出正式版本,并正式转为收费版本. 这个话题当时直接冲上了知乎热榜第一,不过我很少使用Markdown,而且一直觉得Typo ...
Editor.md开源在线编辑器（页面插件集成—markdown）
页面插件集成-markdown 我想或许是个人博客主的福音了,通过引入markdown到博客内容管理区,非常有效且快速. 为了便以理解,这边利用个人html文件进行描述,如有不懂得地方,请提出获取编 ...

Markdown编辑器Editor.md插件的使用

Markdown编辑器Editor.md插件的使用相关推荐

最新文章

热门文章